UX/UI Tools for React + Material-UI

Instructions

Implementation Reference

• index.js:598-606 (handler)

  Handler for the 'apply_complete_ux' tool. Returns a text response containing the complete UX guidelines instructions from UX_GUIDELINES.completeUX, appended with the target component name and a note to apply all guidelines.

  case 'apply_complete_ux':
    return {
      content: [
        {
          type: 'text',
          text: `${UX_GUIDELINES.completeUX.instructions}\n\n**Componente:** ${args.component}\n\nAplique TODAS as diretrizes acima no componente especificado.`,
        },
      ],
    };

• index.js:483-496 (registration)

  Registration of the 'apply_complete_ux' tool in the ListToolsRequestSchema response. Includes the tool name, description, and input schema requiring a 'component' string parameter.

  {
    name: 'apply_complete_ux',
    description: 'Aplica TODAS as diretrizes de UX/UI (responsividade, MUI, Apple, Nielsen, vieses)',
    inputSchema: {
      type: 'object',
      properties: {
        component: {
          type: 'string',
          description: 'Código do componente ou nome do arquivo',
        },
      },
      required: ['component'],
    },
  },

• index.js:354-377 (helper)

  Helper data object UX_GUIDELINES.completeUX containing the description and detailed instructions/checklist used by the tool handler to provide comprehensive UX/UI guidelines.

    completeUX: {
      description: "Aplica TODAS as diretrizes de UX/UI",
      instructions: `
  **Checklist Completo:**
  
  ✅ Responsividade Mobile-First
  ✅ Material-UI Best Practices
  ✅ Apple Design Patterns
  ✅ 10 Heurísticas de Nielsen
  ✅ Vieses Cognitivos (Fitts, Grouping, Proximity, etc.)
  
  **Aplique:**
  1. useMediaQuery para responsividade
  2. theme.spacing para espaçamentos
  3. alpha() para transparências
  4. Tooltips em todos botões/ícones
  5. Loading states em ações
  6. Mensagens de erro claras
  7. Touch targets ≥ 44px
  8. Transições suaves
  9. Scrollbar customizada
  10. Validação em tempo real
      `
    }