.agent/skills/auditar-ux-heuristicas/SKILL.md

name	description	scope
auditar-ux-heuristicas	Auditoria de UX baseada em heurísticas de Nielsen e verificação de estados de UI.	local

Skill: Auditar UX por Heurísticas

Objetivo

Avaliar UX de tela ou fluxo antes de propor mudanças.

Etapas

1. Heurísticas de Nielsen

#	Heurística	Pergunta
1	Visibilidade do status	Sistema informa o que acontece?
2	Compatibilidade	Mensagens usam linguagem do domínio?
3	Controle e liberdade	Pode desfazer, voltar, cancelar?
4	Consistência	Mesmos conceitos, mesma aparência?
5	Prevenção de erros	Campos obrigatórios claros? Confirmação em ações destrutivas?
6	Reconhecimento > Lembrança	Labels descritivos?
7	Flexibilidade	Ações frequentes acessíveis?
8	Estética minimalista	Info desnecessária?
9	Recuperação de erros	Mensagens orientam correção?
10	Ajuda	Ajuda contextual disponível?

2. Estados de Interface

Para cada componente: □ Loading □ Vazio □ Sucesso □ Erro □ Desabilitado

2.5. Auditoria de Fluxo Funcional e Jornada (ux-fluxo-funcional)

Para a aplicação como um todo e entre telas conectadas:

• Navegação Visível e Ordenada: A barra principal exibe os módulos na ordem lógica da tarefa (Cadastros Base → Modelos → Planejamento/Entidade → Execução → Monitoramento) sem esconder tudo apenas em menu hambúrguer?
• Pré-requisitos Guiados: Telas dependentes de cadastros prévios exibem aviso claro e botão direto (to="...") para o passo anterior quando vazias?
• Revelação Progressiva (Sem Aperto Visual): Telas com tabelas largas, cronogramas ou 3+ abas utilizam 12 colunas (com seletor de contexto no topo) em vez de split-screen 4+8 espremido?
• Zero Jargão Técnico: Rótulos técnicos de banco/código ((info), JSONB, CRUD, Instanciar, enums crus) foram traduzidos para linguagem humana do domínio?
• Contraste de Tema Vuetify: O token secondary em tema claro (dark: false) usa tom escuro (#3E4436 ou #4A6500) garantindo legibilidade em variant="tonal" e variant="outlined"?
• Ergonomia de Quadros: Quadros Kanban dispostos horizontalmente lado a lado (overflow-x-auto) sem empilhar colunas vazias de 420px verticalmente?

3. Acessibilidade Básica

rg "<img" --include='*.vue' <modulo>-front/src/ -n | grep -v "alt="
rg "<v-btn\|<button" --include='*.vue' <modulo>-front/src/ -n | grep -v "aria-label\|title"

4. Relatório

# Auditoria UX — [tela/fluxo]

## Achados por Heurística
| # | Heurística | Status | Problema | Recomendação |
|---|-----------|--------|----------|--------------|

## Estados de Interface
| Componente | Loading | Vazio | Erro | Sucesso |
|------------|---------|-------|------|---------|

## Fluxo Funcional e Jornada (ux-fluxo-funcional)
| Pilar | Status | Problema Identificado | Correção Proposta |
|-------|--------|-----------------------|-------------------|

## Plano de Melhoria
1. ...

Referências

• Skill: skills/ux-fluxo-funcional/SKILL.md
• Skill: skills/ux/SKILL.md
• Rule: global/rules/diagnostico-antes-correcao
• Rule: global/rules/mensagens-usuario
• Rule: global/rules/feedback-visivel