From 4818887cb3564b4f0360133b158030354696bc2a Mon Sep 17 00:00:00 2001 From: Luiz Silva Date: Mon, 26 Oct 2026 10:01:55 -0300 Subject: [PATCH] chore(agent): evoluir @ux com ergonomia cognitiva, orcamento de viewport 75/25, teto de 3 indicadores por linha e inspetor em acordeao --- .../refactoring-ui-hierarquia-despoluicao.md | 22 ++++++++++++++++++- agents/ux/agent.md | 5 +++-- agents/ux/persona | 5 +++-- .../refactoring-ui-hierarquia-despoluicao.md | 22 ++++++++++++++++++- .../ux/skills/auditar-ux-heuristicas/SKILL.md | 9 ++++++++ agents/ux/skills/ux-fluxo-funcional/SKILL.md | 21 ++++++++++++++---- .../refactoring-ui-hierarquia-despoluicao.md | 22 ++++++++++++++++++- global/skills/auditar-ux-heuristicas/SKILL.md | 9 ++++++++ global/skills/ux-fluxo-funcional/SKILL.md | 21 ++++++++++++++---- global/skills/ux/SKILL.md | 4 ++++ global/workflows/ux.md | 4 ++++ .../refactoring-ui-hierarquia-despoluicao.md | 22 ++++++++++++++++++- skills/auditar-ux-heuristicas/SKILL.md | 9 ++++++++ skills/ux-fluxo-funcional/SKILL.md | 21 ++++++++++++++---- skills/ux/SKILL.md | 4 ++++ 15 files changed, 180 insertions(+), 20 deletions(-) diff --git a/agents/front/rules/refactoring-ui-hierarquia-despoluicao.md b/agents/front/rules/refactoring-ui-hierarquia-despoluicao.md index f2d4194..c69c3ab 100644 --- a/agents/front/rules/refactoring-ui-hierarquia-despoluicao.md +++ b/agents/front/rules/refactoring-ui-hierarquia-despoluicao.md @@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A scope: global trigger: always_on priority: alta -updatedAt: "2026-10-24" +updatedAt: "2026-10-26" --- # Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*) @@ -96,6 +96,26 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land 3. **Estados Vazios Despoluídos (p. 234):** - Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA). +### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller) + +Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial: + +1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:** + - Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban). + - **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**: + - *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas. + - *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura). +2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):** + - **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central. + - Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho. +3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):** + - Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`). + - **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas). + - Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`). +4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):** + - Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo. + - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário. + --- ## Exemplos diff --git a/agents/ux/agent.md b/agents/ux/agent.md index 762e88f..07b2947 100644 --- a/agents/ux/agent.md +++ b/agents/ux/agent.md @@ -71,8 +71,7 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas 4. **Progressão natural** — o fluxo segue a lógica operacional do usuário 5. **Erros orientam** — mensagens de erro guiam a correção 6. **Revelação progressiva** — exibir uma tarefa complexa por vez em largura total (`12 colunas`), sem espremer múltiplas abas e tabelas em colunas estreitas -7. **Despoluição visual (*Refactoring UI*)** — separar grupos por contraste de superfície ou espaçamento (sem *Card-ception* nem excesso de ``), enfatizar des-enfatizando elementos secundários, consolidar colunas em tabelas e respeitar a pirâmide de ações - +7. **Despoluição visual e Ergonomia Cognitiva (*Refactoring UI*)** — separar grupos por contraste de superfície ou espaçamento (sem *Card-ception* nem excesso de ``), enfatizar des-enfatizando elementos secundários, consolidar colunas em tabelas, respeitar a pirâmide de ações, limitar o cabeçalho operacional a 2 faixas horizontais (com criadores rápidos sob demanda), recolher o menu lateral automaticamente ao abrir o Inspetor de Detalhes, limitar linhas de árvore/lista a 3 indicadores em repouso (sem "Natal de Badges") e organizar seções secundárias do Inspetor em acordeões colapsáveis ## Checklist de revisão UX @@ -80,6 +79,8 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas - [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) na sequência lógica de uso? - [ ] Telas com pré-requisitos orientam o usuário com botão direto para o cadastro anterior quando vazias? - [ ] Telas com tabelas densas, cronogramas ou múltiplas abas usam `12 colunas` em vez de *split-screen* `4+8` espremido? +- [ ] O orçamento de viewport é respeitado (teto de 2 faixas no cabeçalho, criadores rápidos sob demanda e auto-recolhimento do menu lateral ao abrir o Inspetor de Detalhes)? +- [ ] Linhas de árvore/lista respeitam o teto de 3 indicadores em repouso (sem "Natal de Badges") e ações em linha aparecem sob `:hover`, enquanto seções secundárias do Inspetor usam acordeões colapsáveis sem card de resumo redundante? - [ ] Todos os estados (loading, erro, vazio sem filtros inúteis, sucesso) estão definidos? - [ ] Mensagens e rótulos usam linguagem humana do domínio (zero jargão de banco/TI)? - [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em variantes `tonal` e `outlined`? diff --git a/agents/ux/persona b/agents/ux/persona index 762e88f..07b2947 100644 --- a/agents/ux/persona +++ b/agents/ux/persona @@ -71,8 +71,7 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas 4. **Progressão natural** — o fluxo segue a lógica operacional do usuário 5. **Erros orientam** — mensagens de erro guiam a correção 6. **Revelação progressiva** — exibir uma tarefa complexa por vez em largura total (`12 colunas`), sem espremer múltiplas abas e tabelas em colunas estreitas -7. **Despoluição visual (*Refactoring UI*)** — separar grupos por contraste de superfície ou espaçamento (sem *Card-ception* nem excesso de ``), enfatizar des-enfatizando elementos secundários, consolidar colunas em tabelas e respeitar a pirâmide de ações - +7. **Despoluição visual e Ergonomia Cognitiva (*Refactoring UI*)** — separar grupos por contraste de superfície ou espaçamento (sem *Card-ception* nem excesso de ``), enfatizar des-enfatizando elementos secundários, consolidar colunas em tabelas, respeitar a pirâmide de ações, limitar o cabeçalho operacional a 2 faixas horizontais (com criadores rápidos sob demanda), recolher o menu lateral automaticamente ao abrir o Inspetor de Detalhes, limitar linhas de árvore/lista a 3 indicadores em repouso (sem "Natal de Badges") e organizar seções secundárias do Inspetor em acordeões colapsáveis ## Checklist de revisão UX @@ -80,6 +79,8 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas - [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) na sequência lógica de uso? - [ ] Telas com pré-requisitos orientam o usuário com botão direto para o cadastro anterior quando vazias? - [ ] Telas com tabelas densas, cronogramas ou múltiplas abas usam `12 colunas` em vez de *split-screen* `4+8` espremido? +- [ ] O orçamento de viewport é respeitado (teto de 2 faixas no cabeçalho, criadores rápidos sob demanda e auto-recolhimento do menu lateral ao abrir o Inspetor de Detalhes)? +- [ ] Linhas de árvore/lista respeitam o teto de 3 indicadores em repouso (sem "Natal de Badges") e ações em linha aparecem sob `:hover`, enquanto seções secundárias do Inspetor usam acordeões colapsáveis sem card de resumo redundante? - [ ] Todos os estados (loading, erro, vazio sem filtros inúteis, sucesso) estão definidos? - [ ] Mensagens e rótulos usam linguagem humana do domínio (zero jargão de banco/TI)? - [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em variantes `tonal` e `outlined`? diff --git a/agents/ux/rules/refactoring-ui-hierarquia-despoluicao.md b/agents/ux/rules/refactoring-ui-hierarquia-despoluicao.md index f2d4194..c69c3ab 100644 --- a/agents/ux/rules/refactoring-ui-hierarquia-despoluicao.md +++ b/agents/ux/rules/refactoring-ui-hierarquia-despoluicao.md @@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A scope: global trigger: always_on priority: alta -updatedAt: "2026-10-24" +updatedAt: "2026-10-26" --- # Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*) @@ -96,6 +96,26 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land 3. **Estados Vazios Despoluídos (p. 234):** - Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA). +### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller) + +Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial: + +1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:** + - Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban). + - **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**: + - *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas. + - *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura). +2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):** + - **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central. + - Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho. +3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):** + - Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`). + - **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas). + - Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`). +4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):** + - Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo. + - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário. + --- ## Exemplos diff --git a/agents/ux/skills/auditar-ux-heuristicas/SKILL.md b/agents/ux/skills/auditar-ux-heuristicas/SKILL.md index c8661f6..f440148 100644 --- a/agents/ux/skills/auditar-ux-heuristicas/SKILL.md +++ b/agents/ux/skills/auditar-ux-heuristicas/SKILL.md @@ -52,6 +52,15 @@ Verificar conformidade com `rules/refactoring-ui-hierarquia-despoluicao`: - [ ] **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? +### 2.7. Auditoria Quantitativa de Ergonomia e Carga Cognitiva (`agent-browser`) + +Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha: +- [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo? +- [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda? +- [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente? +- [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? +- [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título? + ```sh # Detectar excesso de divisores e possíveis cards aninhados rg "-front/src/ -c | sort -t: -k2 -rn | head -10 diff --git a/agents/ux/skills/ux-fluxo-funcional/SKILL.md b/agents/ux/skills/ux-fluxo-funcional/SKILL.md index 06d4b52..82efebf 100644 --- a/agents/ux/skills/ux-fluxo-funcional/SKILL.md +++ b/agents/ux/skills/ux-fluxo-funcional/SKILL.md @@ -5,7 +5,7 @@ description: > e Contraste Funcional em aplicações -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? diff --git a/global/rules/refactoring-ui-hierarquia-despoluicao.md b/global/rules/refactoring-ui-hierarquia-despoluicao.md index f2d4194..c69c3ab 100644 --- a/global/rules/refactoring-ui-hierarquia-despoluicao.md +++ b/global/rules/refactoring-ui-hierarquia-despoluicao.md @@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A scope: global trigger: always_on priority: alta -updatedAt: "2026-10-24" +updatedAt: "2026-10-26" --- # Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*) @@ -96,6 +96,26 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land 3. **Estados Vazios Despoluídos (p. 234):** - Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA). +### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller) + +Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial: + +1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:** + - Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban). + - **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**: + - *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas. + - *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura). +2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):** + - **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central. + - Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho. +3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):** + - Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`). + - **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas). + - Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`). +4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):** + - Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo. + - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário. + --- ## Exemplos diff --git a/global/skills/auditar-ux-heuristicas/SKILL.md b/global/skills/auditar-ux-heuristicas/SKILL.md index c8661f6..f440148 100644 --- a/global/skills/auditar-ux-heuristicas/SKILL.md +++ b/global/skills/auditar-ux-heuristicas/SKILL.md @@ -52,6 +52,15 @@ Verificar conformidade com `rules/refactoring-ui-hierarquia-despoluicao`: - [ ] **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? +### 2.7. Auditoria Quantitativa de Ergonomia e Carga Cognitiva (`agent-browser`) + +Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha: +- [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo? +- [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda? +- [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente? +- [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? +- [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título? + ```sh # Detectar excesso de divisores e possíveis cards aninhados rg "-front/src/ -c | sort -t: -k2 -rn | head -10 diff --git a/global/skills/ux-fluxo-funcional/SKILL.md b/global/skills/ux-fluxo-funcional/SKILL.md index 06d4b52..82efebf 100644 --- a/global/skills/ux-fluxo-funcional/SKILL.md +++ b/global/skills/ux-fluxo-funcional/SKILL.md @@ -5,7 +5,7 @@ description: > e Contraste Funcional em aplicações -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? diff --git a/global/skills/ux/SKILL.md b/global/skills/ux/SKILL.md index 6827952..bc5b9d0 100644 --- a/global/skills/ux/SKILL.md +++ b/global/skills/ux/SKILL.md @@ -136,6 +136,10 @@ Para cada elemento da interface, avaliar: - [ ] Colunas numéricas e monetárias estão alinhadas à direita com `tabular-nums`? - [ ] Badges e chips usam contraste invertido (fundo pastel claro + texto escuro da mesma matiz) em vez de múltiplas pílulas saturadas escuras? - [ ] Quando a listagem está inicialmente vazia (zero registros), barras de filtros secundárias e paginação inúteis são ocultadas? +- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (mantendo criadores rápidos `+ Nova Tarefa` recolhidos sob demanda)? +- [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil? +- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? +- [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo? #### Feedback e estados diff --git a/global/workflows/ux.md b/global/workflows/ux.md index 6827952..bc5b9d0 100644 --- a/global/workflows/ux.md +++ b/global/workflows/ux.md @@ -136,6 +136,10 @@ Para cada elemento da interface, avaliar: - [ ] Colunas numéricas e monetárias estão alinhadas à direita com `tabular-nums`? - [ ] Badges e chips usam contraste invertido (fundo pastel claro + texto escuro da mesma matiz) em vez de múltiplas pílulas saturadas escuras? - [ ] Quando a listagem está inicialmente vazia (zero registros), barras de filtros secundárias e paginação inúteis são ocultadas? +- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (mantendo criadores rápidos `+ Nova Tarefa` recolhidos sob demanda)? +- [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil? +- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? +- [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo? #### Feedback e estados diff --git a/rules/refactoring-ui-hierarquia-despoluicao.md b/rules/refactoring-ui-hierarquia-despoluicao.md index f2d4194..c69c3ab 100644 --- a/rules/refactoring-ui-hierarquia-despoluicao.md +++ b/rules/refactoring-ui-hierarquia-despoluicao.md @@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A scope: global trigger: always_on priority: alta -updatedAt: "2026-10-24" +updatedAt: "2026-10-26" --- # Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*) @@ -96,6 +96,26 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land 3. **Estados Vazios Despoluídos (p. 234):** - Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA). +### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller) + +Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial: + +1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:** + - Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban). + - **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**: + - *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas. + - *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura). +2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):** + - **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central. + - Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho. +3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):** + - Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`). + - **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas). + - Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`). +4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):** + - Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo. + - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário. + --- ## Exemplos diff --git a/skills/auditar-ux-heuristicas/SKILL.md b/skills/auditar-ux-heuristicas/SKILL.md index c8661f6..f440148 100644 --- a/skills/auditar-ux-heuristicas/SKILL.md +++ b/skills/auditar-ux-heuristicas/SKILL.md @@ -52,6 +52,15 @@ Verificar conformidade com `rules/refactoring-ui-hierarquia-despoluicao`: - [ ] **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? +### 2.7. Auditoria Quantitativa de Ergonomia e Carga Cognitiva (`agent-browser`) + +Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha: +- [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo? +- [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda? +- [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente? +- [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? +- [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título? + ```sh # Detectar excesso de divisores e possíveis cards aninhados rg "-front/src/ -c | sort -t: -k2 -rn | head -10 diff --git a/skills/ux-fluxo-funcional/SKILL.md b/skills/ux-fluxo-funcional/SKILL.md index 06d4b52..82efebf 100644 --- a/skills/ux-fluxo-funcional/SKILL.md +++ b/skills/ux-fluxo-funcional/SKILL.md @@ -5,7 +5,7 @@ description: > e Contraste Funcional em aplicações -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? diff --git a/skills/ux/SKILL.md b/skills/ux/SKILL.md index 6827952..bc5b9d0 100644 --- a/skills/ux/SKILL.md +++ b/skills/ux/SKILL.md @@ -136,6 +136,10 @@ Para cada elemento da interface, avaliar: - [ ] Colunas numéricas e monetárias estão alinhadas à direita com `tabular-nums`? - [ ] Badges e chips usam contraste invertido (fundo pastel claro + texto escuro da mesma matiz) em vez de múltiplas pílulas saturadas escuras? - [ ] Quando a listagem está inicialmente vazia (zero registros), barras de filtros secundárias e paginação inúteis são ocultadas? +- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (mantendo criadores rápidos `+ Nova Tarefa` recolhidos sob demanda)? +- [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil? +- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? +- [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo? #### Feedback e estados