feat(ux): incorporar diretrizes de despoluicao visual e hierarquia do Refactoring UI e referenciar livro no Paiol

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

@@ -42,6 +42,23 @@ Para a aplicação como um todo e entre telas conectadas:
 - [ ] **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?
+
+```sh
+# 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
 
 ```sh
@@ -72,6 +89,8 @@ rg "<v-btn\|<button" --include='*.vue' <modulo>-front/src/ -n | grep -v "aria-la
 
 ## 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`

agents/ux/skills/ux-fluxo-funcional/SKILL.md

@@ -18,17 +18,17 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
 
 ## Os 6 Pilares da Usabilidade Funcional
 
-### Pilar 1 — Navegação Primária Visível e Ordenada pela Jornada Operacional
+### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
 
-O usuário corporativo não deve adivinhar onde clicar nem abrir um menu hambúrguer oculto a cada troca de tela para descobrir como o sistema funciona.
+O menu de navegação das páginas do módulo deve residir **exclusivamente no menu lateral (`MenuLateral.vue`)**, ordenado pela sequência lógica de trabalho do domínio:
 
-1. **Ordem da Tarefa (Task-Order Navigation):** A navegação principal do módulo deve refletir a sequência lógica de trabalho do domínio:
+1. **Ordem da Tarefa (Task-Order Navigation no `MenuLateral.vue`):** A navegação lateral do módulo deve refletir a sequência lógica de trabalho do domínio:
    - `1. Cadastros Base / Pré-requisitos` (ex.: catálogos, recursos, equipes, parâmetros iniciais)
    - `2. Modelos / Configuração` (ex.: templates, padrões reutilizáveis)
    - `3. Entidade Principal / Planejamento` (ex.: registros centrais do módulo, cronogramas, estruturação)
    - `4. Execução Operacional` (ex.: quadros de trabalho, filas de atendimento, operação diária)
    - `5. Monitoramento / Indicadores` (ex.: dashboards executivos, relatórios consolidados)
-2. **Barra de Navegação Visível no Topo ou Subcabeçalho:** Além do menu lateral retrátil (`v-navigation-drawer`), manter uma barra de navegação primária visível no `v-app-bar` (ou barra horizontal de etapas) com destaque claro da rota ativa.
+2. **Proibição de Menu Duplicado no Cabeçalho (`CabecalhoPrincipal.vue`):** O `v-app-bar` superior deve conter apenas o botão de acionamento do menu lateral, a identidade do módulo e o menu de usuário/notificações — **nunca** duplicar botões de navegação de páginas na barra superior.
 
 ---
 
@@ -98,7 +98,7 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
 2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 6 Pilares acima.
 3. **Corrigir Tokens e Navegação Global:**
    - Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
-   - Tornar a navegação principal visível e ordenada pela jornada operacional em `App.vue`.
+   - Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
 4. **Desafogar Layouts e Conectar Fluxos:**
    - Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
    - Inserir links de navegação cruzada e *empty states* guiados entre telas dependentes.
@@ -110,7 +110,7 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
 
 ## Checklist Rápido de Conformidade (`ux-fluxo-funcional`)
 
-- [ ] A barra de navegação principal está visível e ordenada na sequência lógica de uso do módulo?
+- [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem menu horizontal duplicado no cabeçalho) e ordenada na sequência lógica de uso do módulo?
 - [ ] Todas as telas com pré-requisitos orientam o usuário e oferecem botão direto para a etapa anterior quando vazias?
 - [ ] Telas com abas densas ou tabelas largas usam `12 colunas` em vez de *split-screen* `4+8` espremido?
 - [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio?
@@ -122,6 +122,8 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
 
 ## Referências
 
+- Rule: `rules/refactoring-ui-hierarquia-despoluicao.md` (Hierarquia visual, pirâmide de ações, menos bordas e consolidação de tabelas — *Refactoring UI*)
+- Livro *Refactoring UI* (consulta online no Paiol): `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
 - Skill: `skills/ux/SKILL.md` (Paleta de cores, Lucide icons e padrões Vuetify)
 - Skill: `skills/auditar-ux-heuristicas/SKILL.md` (Heurísticas de Nielsen e estados de UI)
 - Skill: `skills/testar-interface-agent-browser/SKILL.md` (Validação visual E2E `--headed`)