UX/UI Tools for React + Material-UI

Instructions

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],
      },
    }}
  >
      `
    },