name: frontend-ux-chakra description: Use this skill when improving UX/UI in React frontend using Chakra UI, especially navigation clarity, operational dashboards, and accessible components for emergency workflows.
Frontend UX Chakra
Quando usar
- Pedidos para melhorar UX/UI.
- Necessidade de design system consistente em páginas operacionais.
- Refatorar telas com foco em rapidez de ação.
Workflow
- Mapear jornada principal (ex.: abrir ocorrência, acionar equipe, concluir).
- Criar shell com navegação clara (dashboard, mapa, boletins).
- Implementar componentes Chakra:
Cardpara KPI operacional.Input/Textarea/selectpara captura rápida.Table+Badgepara status e prioridade.
- Validar acessibilidade visual (contraste, estados e hierarquia).
- Executar
npm run lintenpm run build.
Padrões
- Evitar telas super carregadas: separar contexto (KPI) de execução (CRUD).
- Botões de ação imediata sempre visíveis.
- Status semântico: aberto (vermelho), em ação (laranja), concluído (verde).