apply_complete_ux
Apply comprehensive UX/UI guidelines including responsive design, Material-UI patterns, Apple design principles, Nielsen heuristics, and cognitive biases to React components.
Instructions
Aplica TODAS as diretrizes de UX/UI (responsividade, MUI, Apple, Nielsen, vieses)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
Implementation Reference
- index.js:598-606 (handler)The main handler function for the 'apply_complete_ux' tool. It retrieves instructions from UX_GUIDELINES.completeUX and returns them as text content along with the input component.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)Tool registration in the ListToolsRequestSchema handler, defining name, description, and input schema.{ 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:486-494 (schema)Input schema for the apply_complete_ux tool, requiring a 'component' string.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 structure containing the complete UX guidelines instructions used by the tool handler.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 ` }