From 20663b7f6abf054b9de68c88a6634690949a0007 Mon Sep 17 00:00:00 2001 From: Luiz Silva Date: Sun, 18 Oct 2026 16:06:51 -0300 Subject: [PATCH] feat(ux): restringir navegacao principal ao MenuLateral.vue na skill ux-fluxo-funcional --- skills/ux-fluxo-funcional/SKILL.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/skills/ux-fluxo-funcional/SKILL.md b/skills/ux-fluxo-funcional/SKILL.md index f9e580a..9e285a0 100644 --- a/skills/ux-fluxo-funcional/SKILL.md +++ b/skills/ux-fluxo-funcional/SKILL.md @@ -18,17 +18,17 @@ Garantir que qualquer aplicação `-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 `-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?