apply_material_ui_best_practices
Apply Material-UI best practices like theme.spacing, alpha functions, and sx prop to React components for consistent styling and improved maintainability.
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)Handler for 'apply_material_ui_best_practices' tool: returns pre-defined Material-UI best practices instructions and example, referencing the input component.
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:417-430 (registration)Registration of the 'apply_material_ui_best_practices' tool in the ListTools response, including 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:420-429 (schema)Input schema definition for the tool: requires a 'component' string.
inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Código do componente ou nome do arquivo', }, }, required: ['component'], }, - index.js:70-120 (helper)UX_GUIDELINES.materialUI object containing the instructions and example text returned by the handler.
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], }, }} > ` },