apply_material_ui_best_practices
Apply Material-UI best practices to React components using theme.spacing, alpha functions, and sx prop for consistent styling and improved user interface design.
Instructions
Aplica best practices do Material-UI (theme.spacing, alpha, sx prop)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
Implementation Reference
- index.js:528-536 (handler)The switch case that implements the core logic of the 'apply_material_ui_best_practices' tool. It constructs and returns a text response containing instructions and an example from UX_GUIDELINES.materialUI, interpolated with the user-provided component code.case 'apply_material_ui_best_practices': return { content: [ { type: 'text', text: `${UX_GUIDELINES.materialUI.instructions}\n\n**Exemplo:**\n${UX_GUIDELINES.materialUI.example}\n\n**Componente:** ${args.component}`, }, ], };
- index.js:420-429 (schema)The input schema for the tool, defining a required 'component' property as a string containing the code or file name of the component to apply best practices to.inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Código do componente ou nome do arquivo', }, }, required: ['component'], },
- index.js:417-430 (registration)The tool registration entry in the ListToolsRequestSchema handler, specifying the tool's name, description, and input schema.{ name: 'apply_material_ui_best_practices', description: 'Aplica best practices do Material-UI (theme.spacing, alpha, sx prop)', inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Código do componente ou nome do arquivo', }, }, required: ['component'], }, },
- index.js:70-120 (helper)The UX guidelines object for Material-UI best practices (UX_GUIDELINES.materialUI), containing the description, detailed instructions, and example code snippets that are used by the tool handler to generate the response.materialUI: { description: "Aplica best practices do Material-UI", instructions: ` **Material-UI Best Practices:** 1. Use theme.spacing (múltiplos de 8px): \`\`\`typescript sx={{ padding: theme.spacing(2), margin: theme.spacing(1, 2) }} \`\`\` 2. Use alpha() para transparências: \`\`\`typescript import { alpha } from '@mui/material/styles'; bgcolor: alpha(theme.palette.primary.main, 0.1) \`\`\` 3. Prefira sx prop ao invés de styled: \`\`\`typescript <Box sx={{ display: 'flex', gap: 2 }} /> \`\`\` 4. Componentes nativos MUI: - Stack para layout linear - Box para container genérico - Paper para elevação/card 5. Transitions suaves: \`\`\`typescript transition: theme.transitions.create(['all'], { duration: theme.transitions.duration.standard, easing: theme.transitions.easing.easeInOut, }) \`\`\` `, example: ` <Paper sx={{ p: theme.spacing(3), bgcolor: alpha(theme.palette.background.paper, 0.95), transition: theme.transitions.create(['transform', 'box-shadow'], { duration: 250, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', }), '&:hover': { transform: 'translateY(-2px)', boxShadow: theme.shadows[8], }, }} > ` },