chore(agent): evoluir @ux com ergonomia cognitiva, orcamento de viewport 75/25, teto de 3 indicadores por linha e inspetor em acordeao

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

@@ -5,7 +5,7 @@ description: >
   e Contraste Funcional em aplicações <modulo>-front. Transforma telas isoladas em um fluxo contínuo,
   autoexplicativo e sem sobrecarga cognitiva.
 scope: global
-updatedAt: "2026-10-18"
+updatedAt: "2026-10-26"
 ---
 
 # Skill: UX de Fluxo Funcional e Jornada Guiada (`ux-fluxo-funcional`)
@@ -42,14 +42,25 @@ Quando uma tela ou ação exige registros previamente cadastrados em outra tela,
 
 ---
 
-### Pilar 3 — Revelação Progressiva e Anti-Aperto Visual (*Progressive Disclosure*)
+### Pilar 3 — Revelação Progressiva, Orçamento de Viewport e Anti-Aperto Visual (*Progressive Disclosure*)
 
-Evitar empilhar listas mestras, formulários e múltiplas abas analíticas na mesma dobra de tela.
+Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas abas analíticas na mesma dobra de tela. Pelo menos **70%–75% da área da janela (`1366x768`)** deve pertencer ao conteúdo principal.
 
 1. **Proibição de *Split-Screen* Estreito (`4 + 8 colunas`) para Conteúdo Complexo:**
    - **Nunca** dividir a tela em `v-col md="4"` (lista lateral fixa) + `v-col md="8"` (detalhe) quando o painel de detalhe possuir **tabelas de múltiplas colunas, cronogramas, árvores hierárquicas ou 3+ abas**.
    - **Padrão Recomendado:** Utilizar um **Seletor Rápido de Contexto no Topo** (`v-select` / `v-autocomplete` em card compacto + botão de listagem/troca) e dedicar **100% da largura (`12 colunas`)** para a área de trabalho ativa.
-2. **Agrupamento de Ações Secundárias:**
+2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
+   - **Proibido** manter abertos simultaneamente o Menu Lateral de Navegação (`256px`) e uma Gaveta Inspetora de Detalhes (`400px–440px`) quando isso espremer a área central.
+   - Ao abrir o Painel Inspetor (`Master-Detail`) ou alternar para visões horizontais largas (`Cronograma Gantt`), o menu lateral esquerdo deve **recolher automaticamente** (`auto-collapse`).
+3. **Teto de 2 Faixas no Topo e Criadores Sob Demanda:**
+   - **Proibido** empilhar 4 a 6 barras horizontais antes do conteúdo (Topbar + Header + Ações/KPIs + Abas/Filtros + Form Inline de Criação + Barra de Situação).
+   - Consolidar o cabeçalho da visão em no máximo **2 faixas horizontais** e abrir formulários de criação rápida (`+ Nova Tarefa`) **sob demanda** ao clicar no botão de ação, recolhendo-os após criar ou cancelar.
+4. **Revelação Progressiva Intra-Painel (Inspetor em Acordeão e Zero Card Redundante):**
+   - Gavetas de detalhe (`PainelInspetor`) nunca devem exibir um "Card de Resumo" que repete os dados já visíveis no item selecionado e nos campos abaixo, nem abrir 5+ seções ao mesmo tempo.
+   - Manter abertas por padrão apenas as seções de *Identificação/Prazo* e *Entrega*, e usar **acordeões colapsáveis** com resumo no título (`Recursos (2 • R$ 1.200,00)`, `Pré-requisitos (1/1)`, `Responsáveis (1)`) para seções secundárias `1:N`.
+5. **Orçamento de Densidade por Linha (Teto de 3 Indicadores em Repouso):**
+   - Cada linha de árvore/lista ou card Kanban em repouso deve exibir no máximo **3 indicadores** além do título (ex.: Checkbox/Ícone + Prazo ou Progresso + Bloqueio/Alerta), ocultando ações secundárias (`+ Sub`, `Editar`) até o `:hover` / `:focus-within`.
+6. **Agrupamento de Ações Secundárias:**
    - Limitar cada cabeçalho de seção ou linha de tabela a **1 ação primária visível** + até **2 ações frequentes**.
    - Agrupar ações secundárias ou administrativas (ex.: exportar, clonar, histórico, arquivar, excluir) em menu contextual (`v-menu`) ou modal específico.
 
@@ -113,6 +124,8 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
 - [ ] 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?
+- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (com criadores rápidos sob demanda) e recolhe o menu lateral automaticamente ao abrir o Inspetor de Detalhes?
+- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges") e o Inspetor usa seções colapsáveis (Acordeão) sem card de resumo duplicado?
 - [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio?
 - [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em botões e chips `variant="tonal"` e `variant="outlined"`?
 - [ ] Quadros Kanban renderizam colunas lado a lado (`overflow-x-auto`) sem empilhar caixas vazias gigantes?