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)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 ` }