.agent/global/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?

2.6. Auditoria de Despoluição Visual e Hierarquia (Refactoring UI)

Verificar conformidade com rules/refactoring-ui-hierarquia-despoluicao:

• Pirâmide de Ações (1 Primária por Vista): Existe apenas 1 botão sólido (color="primary" variant="flat") por contexto, com secundárias em outlined/tonal e destrutivas discretas (variant="text" ou em v-menu, reservando vermelho sólido apenas para o modal de confirmação)?
• Zero Card-ception e Menos Bordas: Os componentes evitam v-card com borda dentro de v-card e excesso de <v-divider>, separando grupos por contraste de superfície (#FFFFFF sobre #F2F3EE) ou espaçamento (24px–32px)?
• Rótulos como Último Recurso: Dados autoexplicativos (CNPJ, e-mail, datas, status) ou frases combinadas evitam pilhas repetitivas de Rótulo: Valor com mesmo peso visual?
• Tabelas Enxutas (Colunas Combinadas): Tabelas evitam 8+ colunas estreitas agrupando dados relacionados na mesma célula em 2 linhas (Título escuro 600 + subtítulo neutro 12px) e alinham números à direita com tabular-nums?
• Lei da Proximidade e Largura Ideal: O espaço externo entre grupos/campos (16px–32px) é maior que o espaço interno (4px–8px), e formulários simples respeitam max-width: 640px–800px?
• Estados Vazios Despoluídos: Quando não há registros criados na base, filtros secundários e paginação são ocultados em favor apenas do Empty State orientador com CTA?

# Detectar excesso de divisores e possíveis cards aninhados
rg "<v-divider" --include='*.vue' <modulo>-front/src/ -c | sort -t: -k2 -rn | head -10
# Detectar botões destrutivos vermelhos sólidos fora de modais de confirmação
rg 'color="error"|<v-btn[^>]*error' --include='*.vue' <modulo>-front/src/ -n

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

• Rule: global/rules/refactoring-ui-hierarquia-despoluicao
• Livro Refactoring UI (Paiol): https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf
• 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