---
name: auditar-ux-heuristicas
description: >
  Auditoria de UX baseada em heurísticas de Nielsen e verificação de estados de UI.
scope: 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

```sh
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

```markdown
# 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`