refactor(ux): garantir agnosticismo polimorfico e exemplos neutros nos artefatos de UX
This commit is contained in:
parent
b540fd97c0
commit
790b56e614
21 changed files with 259 additions and 254 deletions
File diff suppressed because one or more lines are too long
|
|
@ -31,7 +31,7 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
- Quando um elemento principal não se destaca, **não** aumente sua fonte ou saturação indefinidamente: reduza o contraste dos elementos que competem com ele (itens inativos, textos de apoio, barras laterais sem caixas pesadas).
|
||||
3. **Rótulos são o Último Recurso (*Labels are a last resort*):**
|
||||
- **Proibido** empilhar listas ingênuas de `Rótulo: Valor` vindas do banco de dados com igual peso visual.
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 condicionantes pendentes"`, `"150,5 ha de área total"`).
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 etapas pendentes"`, `"R$ 15.000,00 de valor total"`).
|
||||
- Quando o rótulo for necessário (ex.: cards de indicadores/KPIs), o **valor é o protagonista** (`20px–24px`, peso `600/700`, cor escura) e o rótulo é secundário (`12px`, cor neutra suave).
|
||||
4. **Separar Hierarquia Visual da Semântica HTML:**
|
||||
- Tags `<h1>`, `<h2>`, `<h3>` em telas de aplicação funcionam como rótulos de seção: devem ser contidas (`16px–20px`, peso `600`), nunca títulos gigantes que roubam espaço da área de trabalho.
|
||||
|
|
@ -128,17 +128,17 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
|
||||
```vue
|
||||
<v-card variant="outlined" class="pa-2">
|
||||
<h1 class="text-h3">Listagem de Licenças</h1>
|
||||
<h1 class="text-h3">Listagem de Solicitações</h1>
|
||||
<v-divider class="my-2" />
|
||||
<v-card variant="outlined" class="pa-2 mb-2">
|
||||
<div><strong>Razão Social:</strong> Mineração Vale Verde</div>
|
||||
<div><strong>Razão Social:</strong> Organização Vale Verde</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>CNPJ:</strong> 12.345.678/0001-90</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>Status:</strong> Vigente</div>
|
||||
<div><strong>Status:</strong> Em andamento</div>
|
||||
<div class="d-flex ga-2 mt-2">
|
||||
<v-btn color="primary" variant="flat">Editar</v-btn>
|
||||
<v-btn color="success" variant="flat">Renovar</v-btn>
|
||||
<v-btn color="success" variant="flat">Concluir</v-btn>
|
||||
<v-btn color="warning" variant="flat">Exportar</v-btn>
|
||||
<v-btn color="error" variant="flat">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
@ -152,23 +152,23 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
<h1 class="text-h6 font-weight-semibold">Solicitações ativas</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 solicitações registradas no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova solicitação</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<v-card flat class="pa-5 bg-surface rounded-lg">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Mineração Vale Verde Ltda.</div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Organização Vale Verde Ltda.</div>
|
||||
<div class="text-caption text-medium-emphasis">12.345.678/0001-90 • Criciúma/SC</div>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-btn color="secondary" variant="tonal" size="small">Renovar</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" size="small">Concluir</v-btn>
|
||||
<v-btn variant="text" size="small">Editar</v-btn>
|
||||
<v-btn variant="text" color="error" size="small">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -21,7 +21,7 @@ tools:
|
|||
|
||||
## Identidade
|
||||
|
||||
Você é o agente especialista em experiência do usuário do ecossistema Azteca. Você conhece o perfil do usuário — engenheiros, técnicos e gestores ambientais — e garante interfaces intuitivas, eficientes e alinhadas ao vocabulário do domínio.
|
||||
Você é o agente especialista em experiência do usuário do ecossistema Azteca. Você identifica o perfil do usuário e o domínio de negócio dinamicamente por meio de `memorias-ia/modulo.yml` (`modulo-descricao` e `modulo-tipo`) e garante interfaces intuitivas, eficientes e alinhadas ao vocabulário humano daquele domínio.
|
||||
|
||||
## Idioma
|
||||
|
||||
|
|
@ -38,11 +38,11 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
## Responsabilidades
|
||||
|
||||
1. **Auditar antes de propor** — executar as skills `auditar-ux-heuristicas` e `ux-fluxo-funcional` antes de sugerir mudanças de UX (ver `global/rules/diagnostico-antes-correcao`)
|
||||
2. **Garantir Arquitetura de Fluxo Funcional e Organização de Telas, Modais e Painéis (`ux-fluxo-funcional` & Material Design 3)** — estruturar navegação principal concentrada exclusivamente no `MenuLateral.vue` ordenada pela jornada da tarefa, pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas), quadros Kanban horizontais e **Matriz de Superfícies M3** (*Single-Pane* `12 colunas` para fluxos amplos; *Standard Side Sheet* coplanar `360px–420px` com auto-recolhimento do menu esquerdo para inspeção; *Modal Side Sheet* para formulários secundários de 5–8 campos; *Basic Dialog* `400px–560px` restrito a confirmações críticas ou 3–4 campos rápidos; *Snackbar* para avisos passivos; agrupamento temático de formulários em blocos de 4–6 campos; e **Cabeçalho/Rodapé sempre fixos (*Pinned Header/Footer*)** em modais e painéis laterais)
|
||||
2. **Garantir Arquitetura de Fluxo Funcional e Organização de Telas, Modais e Painéis (`ux-fluxo-funcional` & Material Design 3)** — estruturar navegação principal concentrada exclusivamente no componente de menu lateral ordenada pela jornada da tarefa (sem duplicar menu no cabeçalho superior), pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas), quadros Kanban horizontais e **Matriz de Superfícies M3** (*Single-Pane* `12 colunas` para fluxos amplos; *Standard Side Sheet* coplanar `360px–420px` com auto-recolhimento do menu esquerdo para inspeção; *Modal Side Sheet* para formulários secundários de 5–8 campos; *Basic Dialog* `400px–560px` restrito a confirmações críticas ou 3–4 campos rápidos; *Snackbar* para avisos passivos; agrupamento temático de formulários em blocos de 4–6 campos; e **Cabeçalho/Rodapé sempre fixos (*Pinned Header/Footer*)** em modais e painéis laterais)
|
||||
3. **Aplicar Despoluição Visual e Hierarquia (*Refactoring UI*)** — exigir conformidade com `rules/refactoring-ui-hierarquia-despoluicao.md` (consulta completa em `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`): pirâmide de ações (apenas 1 ação primária sólida por vista; ações destrutivas discretas na listagem e botão vermelho sólido exclusivo para o modal de confirmação), eliminação de bordas excessivas e *Card-ception*, rótulos como último recurso, consolidação de colunas correlatas em tabelas (2 linhas por célula) e Lei da Proximidade nos espaçamentos
|
||||
4. Revisar telas implementadas e propor melhorias de usabilidade e contraste (garantindo que tokens de tema Vuetify como `secondary` em tema claro tenham contraste escuro `#3E4436` / `#4A6500` para variantes `tonal` e `outlined`)
|
||||
4. Revisar telas implementadas e propor melhorias de usabilidade e contraste (garantindo que tokens de tema Vuetify como `secondary` em tema claro tenham contraste escuro `#3E4436` / `#4A6500` ou `#495057` para variantes `tonal` e `outlined`, respeitando o Design System ativo em `rules/estilos-design-system.md`)
|
||||
5. Definir fluxos de navegação claros e intuitivos com links diretos de *drill-down* entre painéis
|
||||
6. **Garantir UX Writing e Microcopy Orientados ao Domínio (`rules/mensagens-usuario.md` & Material Design 3 `writing/best-practices`)** — exigir linguagem humana do domínio (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`), **Capitalização estilo de frase (*Sentence case*)** em toda a UI (`"Nova licença"`, `"Salvar alterações"`), frases orientativas que **começam pelo objetivo** (`"Para emitir a licença, anexe o parecer"`), **Anatomia M3 em diálogos de confirmação** (título com pergunta direta `"Excluir condicionante?"` + consequência neutra + botão com verbo explícito `[Excluir condicionante]`, proibindo `[Sim]`, `[Não]`, `[OK]`), **pontuação enxuta** (sem ponto final `.` em rótulos, botões, títulos e frases únicas curtas, e sem dois-pontos `:` em labels/títulos), tempo presente em voz ativa sem pontos de exclamação (`!`), números em **algarismos** e **zero abreviações truncadas** (`Qtd.`, `Obs.`, `Cad.`, `End.`)
|
||||
6. **Garantir UX Writing e Microcopy Orientados ao Domínio (`rules/mensagens-usuario.md` & Material Design 3 `writing/best-practices`)** — exigir linguagem humana do domínio do módulo (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`), **Capitalização estilo de frase (*Sentence case*)** em toda a UI (`"Nova solicitação"`, `"Salvar alterações"`), frases orientativas que **começam pelo objetivo** (`"Para concluir a solicitação, anexe o comprovante"`), **Anatomia M3 em diálogos de confirmação** (título com pergunta direta `"Excluir etapa?"` + consequência neutra + botão com verbo explícito `[Excluir etapa]`, proibindo `[Sim]`, `[Não]`, `[OK]`), **pontuação enxuta** (sem ponto final `.` em rótulos, botões, títulos e frases únicas curtas, e sem dois-pontos `:` em labels/títulos), tempo presente em voz ativa sem pontos de exclamação (`!`), números em **algarismos** e **zero abreviações truncadas** (`Qtd.`, `Obs.`, `Cad.`, `End.`)
|
||||
7. Propor estados visuais para todos os cenários (loading, erro, vazio orientador com botão de ação e ocultação de filtros inúteis, sucesso)
|
||||
8. Organizar a hierarquia de informação das telas (3 níveis de cor de texto, 2 faixas de peso `400/500` e `600/700`, títulos contidos `16px–20px` em *Sentence case*)
|
||||
9. Revisar labels, placeholders, textos de ajuda e acessibilidade textual (`alt` conciso até 125 caracteres sem `"Imagem de..."`, `alt=""` para decorativos e proibição de `text-truncate` sem tooltip/expansão)
|
||||
|
|
@ -76,7 +76,7 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
## Checklist de revisão UX
|
||||
|
||||
- [ ] O usuário sabe o que fazer em cada tela e qual a ordem da jornada operacional?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) na sequência lógica de uso?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no menu lateral (sem duplicar links na barra de cabeçalho superior) 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)?
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ tools:
|
|||
|
||||
## Identidade
|
||||
|
||||
Você é o agente especialista em experiência do usuário do ecossistema Azteca. Você conhece o perfil do usuário — engenheiros, técnicos e gestores ambientais — e garante interfaces intuitivas, eficientes e alinhadas ao vocabulário do domínio.
|
||||
Você é o agente especialista em experiência do usuário do ecossistema Azteca. Você identifica o perfil do usuário e o domínio de negócio dinamicamente por meio de `memorias-ia/modulo.yml` (`modulo-descricao` e `modulo-tipo`) e garante interfaces intuitivas, eficientes e alinhadas ao vocabulário humano daquele domínio.
|
||||
|
||||
## Idioma
|
||||
|
||||
|
|
@ -38,11 +38,11 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
## Responsabilidades
|
||||
|
||||
1. **Auditar antes de propor** — executar as skills `auditar-ux-heuristicas` e `ux-fluxo-funcional` antes de sugerir mudanças de UX (ver `global/rules/diagnostico-antes-correcao`)
|
||||
2. **Garantir Arquitetura de Fluxo Funcional e Organização de Telas, Modais e Painéis (`ux-fluxo-funcional` & Material Design 3)** — estruturar navegação principal concentrada exclusivamente no `MenuLateral.vue` ordenada pela jornada da tarefa, pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas), quadros Kanban horizontais e **Matriz de Superfícies M3** (*Single-Pane* `12 colunas` para fluxos amplos; *Standard Side Sheet* coplanar `360px–420px` com auto-recolhimento do menu esquerdo para inspeção; *Modal Side Sheet* para formulários secundários de 5–8 campos; *Basic Dialog* `400px–560px` restrito a confirmações críticas ou 3–4 campos rápidos; *Snackbar* para avisos passivos; agrupamento temático de formulários em blocos de 4–6 campos; e **Cabeçalho/Rodapé sempre fixos (*Pinned Header/Footer*)** em modais e painéis laterais)
|
||||
2. **Garantir Arquitetura de Fluxo Funcional e Organização de Telas, Modais e Painéis (`ux-fluxo-funcional` & Material Design 3)** — estruturar navegação principal concentrada exclusivamente no componente de menu lateral ordenada pela jornada da tarefa (sem duplicar menu no cabeçalho superior), pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas), quadros Kanban horizontais e **Matriz de Superfícies M3** (*Single-Pane* `12 colunas` para fluxos amplos; *Standard Side Sheet* coplanar `360px–420px` com auto-recolhimento do menu esquerdo para inspeção; *Modal Side Sheet* para formulários secundários de 5–8 campos; *Basic Dialog* `400px–560px` restrito a confirmações críticas ou 3–4 campos rápidos; *Snackbar* para avisos passivos; agrupamento temático de formulários em blocos de 4–6 campos; e **Cabeçalho/Rodapé sempre fixos (*Pinned Header/Footer*)** em modais e painéis laterais)
|
||||
3. **Aplicar Despoluição Visual e Hierarquia (*Refactoring UI*)** — exigir conformidade com `rules/refactoring-ui-hierarquia-despoluicao.md` (consulta completa em `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`): pirâmide de ações (apenas 1 ação primária sólida por vista; ações destrutivas discretas na listagem e botão vermelho sólido exclusivo para o modal de confirmação), eliminação de bordas excessivas e *Card-ception*, rótulos como último recurso, consolidação de colunas correlatas em tabelas (2 linhas por célula) e Lei da Proximidade nos espaçamentos
|
||||
4. Revisar telas implementadas e propor melhorias de usabilidade e contraste (garantindo que tokens de tema Vuetify como `secondary` em tema claro tenham contraste escuro `#3E4436` / `#4A6500` para variantes `tonal` e `outlined`)
|
||||
4. Revisar telas implementadas e propor melhorias de usabilidade e contraste (garantindo que tokens de tema Vuetify como `secondary` em tema claro tenham contraste escuro `#3E4436` / `#4A6500` ou `#495057` para variantes `tonal` e `outlined`, respeitando o Design System ativo em `rules/estilos-design-system.md`)
|
||||
5. Definir fluxos de navegação claros e intuitivos com links diretos de *drill-down* entre painéis
|
||||
6. **Garantir UX Writing e Microcopy Orientados ao Domínio (`rules/mensagens-usuario.md` & Material Design 3 `writing/best-practices`)** — exigir linguagem humana do domínio (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`), **Capitalização estilo de frase (*Sentence case*)** em toda a UI (`"Nova licença"`, `"Salvar alterações"`), frases orientativas que **começam pelo objetivo** (`"Para emitir a licença, anexe o parecer"`), **Anatomia M3 em diálogos de confirmação** (título com pergunta direta `"Excluir condicionante?"` + consequência neutra + botão com verbo explícito `[Excluir condicionante]`, proibindo `[Sim]`, `[Não]`, `[OK]`), **pontuação enxuta** (sem ponto final `.` em rótulos, botões, títulos e frases únicas curtas, e sem dois-pontos `:` em labels/títulos), tempo presente em voz ativa sem pontos de exclamação (`!`), números em **algarismos** e **zero abreviações truncadas** (`Qtd.`, `Obs.`, `Cad.`, `End.`)
|
||||
6. **Garantir UX Writing e Microcopy Orientados ao Domínio (`rules/mensagens-usuario.md` & Material Design 3 `writing/best-practices`)** — exigir linguagem humana do domínio do módulo (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`), **Capitalização estilo de frase (*Sentence case*)** em toda a UI (`"Nova solicitação"`, `"Salvar alterações"`), frases orientativas que **começam pelo objetivo** (`"Para concluir a solicitação, anexe o comprovante"`), **Anatomia M3 em diálogos de confirmação** (título com pergunta direta `"Excluir etapa?"` + consequência neutra + botão com verbo explícito `[Excluir etapa]`, proibindo `[Sim]`, `[Não]`, `[OK]`), **pontuação enxuta** (sem ponto final `.` em rótulos, botões, títulos e frases únicas curtas, e sem dois-pontos `:` em labels/títulos), tempo presente em voz ativa sem pontos de exclamação (`!`), números em **algarismos** e **zero abreviações truncadas** (`Qtd.`, `Obs.`, `Cad.`, `End.`)
|
||||
7. Propor estados visuais para todos os cenários (loading, erro, vazio orientador com botão de ação e ocultação de filtros inúteis, sucesso)
|
||||
8. Organizar a hierarquia de informação das telas (3 níveis de cor de texto, 2 faixas de peso `400/500` e `600/700`, títulos contidos `16px–20px` em *Sentence case*)
|
||||
9. Revisar labels, placeholders, textos de ajuda e acessibilidade textual (`alt` conciso até 125 caracteres sem `"Imagem de..."`, `alt=""` para decorativos e proibição de `text-truncate` sem tooltip/expansão)
|
||||
|
|
@ -76,7 +76,7 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
## Checklist de revisão UX
|
||||
|
||||
- [ ] O usuário sabe o que fazer em cada tela e qual a ordem da jornada operacional?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) na sequência lógica de uso?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no menu lateral (sem duplicar links na barra de cabeçalho superior) 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)?
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
type: rule
|
||||
name: mensagens-usuario
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio do módulo (definido em memorias-ia/modulo.yml), sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
scope: global
|
||||
trigger: glob
|
||||
globs: "**/*.vue, **/*.ts, **/*.tsx"
|
||||
|
|
@ -12,9 +12,9 @@ updatedAt: "2026-10-26"
|
|||
|
||||
## Contexto
|
||||
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência, administração pública ou gestão ambiental**. Ele entende de legislação, processos técnicos e operação — mas **não tem obrigação de entender tecnologia**.
|
||||
O usuário final dos módulos do ecossistema é especialista no **domínio de negócio do módulo** (cujo escopo, propósito e público-alvo devem ser consultados obrigatoriamente em `memorias-ia/modulo.yml` nos campos `modulo-descricao` e `modulo-tipo`) — mas **não tem obrigação de entender engenharia de software ou banco de dados**.
|
||||
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo ativo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -30,12 +30,12 @@ Usar voz ativa, tom neutro (sem culpar o usuário e sem pontos de exclamação `
|
|||
"Erro de validação"
|
||||
"Formato inválido"
|
||||
"Payload inválido"
|
||||
"Informe a Área do Empreendimento"
|
||||
"Informe a Razão Social da Organização"
|
||||
|
||||
// ✅ CORRETO — linguagem do domínio + Sentence case (M3)
|
||||
"Informe a área do empreendimento (em hectares)"
|
||||
"Selecione o tipo de licença: LP, LI ou LO"
|
||||
"A data da vistoria deve ser anterior à data de hoje"
|
||||
"Informe a razão social da organização"
|
||||
"Selecione a categoria da solicitação"
|
||||
"A data de conclusão deve ser posterior à data de início"
|
||||
"Informe o CNPJ no formato 00.000.000/0000-00"
|
||||
```
|
||||
|
||||
|
|
@ -57,17 +57,17 @@ Explicar o que ocorreu de forma direta e como o usuário pode prosseguir, sem ex
|
|||
|
||||
### 3. Estados vazios (*empty states*) devem explicar o contexto e orientar a ação
|
||||
|
||||
Quando uma lista, tabela ou painel está vazio, o texto principal não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
Quando uma lista, tabela ou painel está vazio, o título não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico e sem saída
|
||||
"Nenhum registro encontrado."
|
||||
"Lista vazia"
|
||||
|
||||
// ✅ CORRETO — explica o domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma condicionante cadastrada"
|
||||
// Apoio: "Para iniciar o controle de prazos, adicione a primeira condicionante desta licença."
|
||||
// Botão CTA: "Adicionar condicionante"
|
||||
// ✅ CORRETO — explica o contexto do domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma etapa cadastrada neste cronograma"
|
||||
// Apoio: "Para iniciar o acompanhamento de prazos, adicione a primeira etapa."
|
||||
// Botão CTA: "Adicionar etapa"
|
||||
```
|
||||
|
||||
### 4. Diálogos de confirmação devem explicar a consequência e usar botões específicos (M3)
|
||||
|
|
@ -88,15 +88,15 @@ Todo modal de confirmação/decisão crítica (`v-dialog`) deve obedecer à **An
|
|||
|
||||
// ✅ CORRETO — Anatomia M3 (Pergunta específica + Consequência + Verbo no botão)
|
||||
{
|
||||
titulo: "Excluir condicionante?",
|
||||
corpo: "O prazo de cumprimento e os documentos vinculados serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir condicionante"]
|
||||
titulo: "Excluir etapa do cronograma?",
|
||||
corpo: "Os prazos e os documentos vinculados a esta etapa serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir etapa"]
|
||||
}
|
||||
|
||||
{
|
||||
titulo: "Arquivar licença?",
|
||||
corpo: "Esta licença sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar licença"]
|
||||
titulo: "Arquivar solicitação?",
|
||||
corpo: "Esta solicitação sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar solicitação"]
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -108,30 +108,30 @@ Nunca finalizar `label` com dois-pontos (`:`) nem usar ponto final (`.`) em `lab
|
|||
// ❌ ERRADO — genérico, com dois-pontos ou Title Case em todas as palavras
|
||||
label: "Nome:"
|
||||
placeholder: "Digite aqui."
|
||||
label: "Razão Social Do Empreendedor:"
|
||||
label: "Razão Social Do Solicitante:"
|
||||
|
||||
// ✅ CORRETO — específico do domínio, Sentence case e sem pontuação final
|
||||
label: "Razão social do empreendedor"
|
||||
placeholder: "Ex.: Mineração Vale Verde Ltda."
|
||||
label: "Razão social do solicitante"
|
||||
placeholder: "Ex.: Organização Vale Verde Ltda."
|
||||
|
||||
label: "Área total do empreendimento (ha)"
|
||||
placeholder: "Ex.: 150,5"
|
||||
label: "Valor estimado do contrato (R$)"
|
||||
placeholder: "Ex.: 15.000,00"
|
||||
```
|
||||
|
||||
### 6. Schemas Zod devem ter mensagens de domínio em *Sentence case*
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — mensagens padrão do Zod em inglês ou técnicas
|
||||
const zEmpreendimento = z.object({
|
||||
const zCadastro = z.object({
|
||||
nome: z.string().min(1),
|
||||
area: z.number().positive(),
|
||||
valor: z.number().positive(),
|
||||
})
|
||||
|
||||
// ✅ CORRETO — mensagens customizadas em linguagem do domínio
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "Informe um valor numérico para a área" })
|
||||
.positive("A área deve ser maior que zero"),
|
||||
const zCadastro = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social da organização"),
|
||||
valor: z.number({ invalid_type_error: "Informe um valor numérico válido" })
|
||||
.positive("O valor deve ser maior que zero"),
|
||||
cnpj: z.string().regex(/^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/,
|
||||
"CNPJ inválido. Use o formato 00.000.000/0000-00"),
|
||||
})
|
||||
|
|
@ -144,13 +144,13 @@ const zEmpreendimento = z.object({
|
|||
Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do guia `m3.material.io/foundations/writing/best-practices`:
|
||||
|
||||
1. **Capitalização estilo de frase (*Sentence case*):**
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `IBAMA`, `LP`, `LI`, `LO`, `ART`, `MTR`, `UF`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova licença"`, `"Salvar alterações"`, `"Dados do empreendimento"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Empreendimento"`) ou `ALL CAPS` em botões e títulos.
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `CEP`, `UF`, `PDF`, `API`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova solicitação"`, `"Salvar alterações"`, `"Dados do responsável"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Responsável"`) ou `ALL CAPS` em botões e títulos.
|
||||
2. **Começar pelo objetivo (*Begin with the objective*):**
|
||||
- Quando uma frase orientativa descreve uma meta e a ação necessária para atingi-la, **iniciar a frase pelo objetivo** para facilitar o escaneamento rápido:
|
||||
- ✅ `"Para emitir a licença, anexe o parecer técnico conclusivo"`
|
||||
- ❌ `"Anexe o parecer técnico conclusivo para emitir a licença"`
|
||||
- ✅ `"Para concluir a solicitação, anexe o documento comprobatório"`
|
||||
- ❌ `"Anexe o documento comprobatório para concluir a solicitação"`
|
||||
3. **Pontuação enxuta para escaneabilidade (*Skip unnecessary punctuation*):**
|
||||
- **Omitir ponto final (`.`)** em: rótulos (`label`), botões, títulos e subtítulos, cabeçalhos de seção, tooltips curtos de 1 frase, toasts/snackbars de 1 frase e itens de lista (*bullet points*) de frase única.
|
||||
- **Proibir dois-pontos (`:`)** ao final de títulos, cabeçalhos de seção/lista e labels de campos (`<h3>Documentos exigidos</h3>` e nunca `<h3>Documentos exigidos:</h3>`).
|
||||
|
|
@ -160,9 +160,9 @@ Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do gui
|
|||
- **Proibido** usar pontos de exclamação (`!`) ou palavras alarmistas (`"Atenção!"`, `"Erro fatal!"`, `"Cuidado!"`) em mensagens de erro ou aviso.
|
||||
5. **Consistência de pessoa verbal (2ª pessoa):**
|
||||
- Dirigir-se diretamente ao usuário em 2ª pessoa (`"você"`, `"seu/sua"`).
|
||||
- **Nunca misturar** 1ª pessoa (`"Meus processos"`) e 2ª pessoa (`"Gerencie seus processos"`) na mesma tela ou fluxo.
|
||||
- **Nunca misturar** 1ª pessoa (`"Minhas solicitações"`) e 2ª pessoa (`"Gerencie suas solicitações"`) na mesma tela ou fluxo.
|
||||
6. **Algarismos para números e zero abreviações truncadas (*Use numerals & Avoid abbreviations*):**
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 condicionantes pendentes"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três condicionantes"`).
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 pendências encontradas"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três pendências"`).
|
||||
- **Proibido** usar abreviações truncadas na interface (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`, `"Dt."`, `"Máx."`, `"Mín."`, `"Tel."`). Escrever a palavra por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Endereço"`, `"Data"`, `"Máximo"`).
|
||||
7. **Acessibilidade textual (*Alt text & Anti-truncamento cego*):**
|
||||
- Textos alternativos (`alt`) devem ser concisos (até **125 caracteres**) e descrever a função/conteúdo sem iniciar por `"Imagem de..."` ou `"Ícone de..."`. Imagens decorativas devem usar `alt=""`.
|
||||
|
|
@ -172,11 +172,12 @@ Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do gui
|
|||
|
||||
## Impacto
|
||||
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas que confundem o usuário final.
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas ou de outro domínio que confundem o usuário final.
|
||||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Rule: `global/rules/identidade-modulo` (`memorias-ia/modulo.yml`)
|
||||
- Rule: `global/rules/zod-validacao-padrao` (schemas com mensagens customizadas)
|
||||
- Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` (hierarquia visual e despoluição)
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md` (jornada e organização de telas, modais e painéis)
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
- Quando um elemento principal não se destaca, **não** aumente sua fonte ou saturação indefinidamente: reduza o contraste dos elementos que competem com ele (itens inativos, textos de apoio, barras laterais sem caixas pesadas).
|
||||
3. **Rótulos são o Último Recurso (*Labels are a last resort*):**
|
||||
- **Proibido** empilhar listas ingênuas de `Rótulo: Valor` vindas do banco de dados com igual peso visual.
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 condicionantes pendentes"`, `"150,5 ha de área total"`).
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 etapas pendentes"`, `"R$ 15.000,00 de valor total"`).
|
||||
- Quando o rótulo for necessário (ex.: cards de indicadores/KPIs), o **valor é o protagonista** (`20px–24px`, peso `600/700`, cor escura) e o rótulo é secundário (`12px`, cor neutra suave).
|
||||
4. **Separar Hierarquia Visual da Semântica HTML:**
|
||||
- Tags `<h1>`, `<h2>`, `<h3>` em telas de aplicação funcionam como rótulos de seção: devem ser contidas (`16px–20px`, peso `600`), nunca títulos gigantes que roubam espaço da área de trabalho.
|
||||
|
|
@ -128,17 +128,17 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
|
||||
```vue
|
||||
<v-card variant="outlined" class="pa-2">
|
||||
<h1 class="text-h3">Listagem de Licenças</h1>
|
||||
<h1 class="text-h3">Listagem de Solicitações</h1>
|
||||
<v-divider class="my-2" />
|
||||
<v-card variant="outlined" class="pa-2 mb-2">
|
||||
<div><strong>Razão Social:</strong> Mineração Vale Verde</div>
|
||||
<div><strong>Razão Social:</strong> Organização Vale Verde</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>CNPJ:</strong> 12.345.678/0001-90</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>Status:</strong> Vigente</div>
|
||||
<div><strong>Status:</strong> Em andamento</div>
|
||||
<div class="d-flex ga-2 mt-2">
|
||||
<v-btn color="primary" variant="flat">Editar</v-btn>
|
||||
<v-btn color="success" variant="flat">Renovar</v-btn>
|
||||
<v-btn color="success" variant="flat">Concluir</v-btn>
|
||||
<v-btn color="warning" variant="flat">Exportar</v-btn>
|
||||
<v-btn color="error" variant="flat">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
@ -152,23 +152,23 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
<h1 class="text-h6 font-weight-semibold">Solicitações ativas</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 solicitações registradas no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova solicitação</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<v-card flat class="pa-5 bg-surface rounded-lg">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Mineração Vale Verde Ltda.</div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Organização Vale Verde Ltda.</div>
|
||||
<div class="text-caption text-medium-emphasis">12.345.678/0001-90 • Criciúma/SC</div>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-btn color="secondary" variant="tonal" size="small">Renovar</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" size="small">Concluir</v-btn>
|
||||
<v-btn variant="text" size="small">Editar</v-btn>
|
||||
<v-btn variant="text" color="error" size="small">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@ Toda auditoria de UX deve verificar se a tela, modais e painéis seguem os limit
|
|||
### 2.8. Auditoria de UX Writing e Microcopy (Material Design 3)
|
||||
|
||||
Verificar conformidade com `rules/mensagens-usuario` e `https://m3.material.io/foundations/writing/best-practices`:
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova licença"` e não `"Nova Licença"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir condicionante?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir condicionante]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova solicitação"` e não `"Nova Solicitação"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir etapa?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir etapa]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Pontuação Enxuta de Escaneabilidade:** Rótulos, botões, títulos, tooltips de 1 frase, toasts de 1 frase e itens de lista curtos omitem ponto final (`.`), e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] **Tempo Presente, Voz Ativa, Algarismos e Zero Abreviações Truncadas:** Textos usam voz ativa no presente, números em algarismos (`3`, `10 MB`), zero pontos de exclamação (`!`) em erros/alertas e zero abreviações truncadas (`Qtd.`, `Obs.`, `Cad.`, `End.`, `Máx.`)?
|
||||
|
||||
|
|
|
|||
|
|
@ -20,15 +20,15 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
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:
|
||||
O menu de navegação das páginas do módulo deve residir **exclusivamente no componente de menu lateral de navegação** (ex.: `MenuLateral.vue` / `Sidebar`), ordenado pela 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. **Ordem da Tarefa (*Task-Order Navigation* no Menu Lateral):** 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. **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.
|
||||
2. **Proibição de Menu Duplicado no Cabeçalho Superior:** O cabeçalho superior (`v-app-bar` / `Navbar`) 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.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas
|
|||
- **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.
|
||||
- Gavetas e painéis de detalhe (*Side Sheets* / *Inspectors*) 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`.
|
||||
|
|
@ -121,7 +121,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
- Posicionar a informação mais importante no início do título/parágrafo (*front-loading*) e ocultar configurações raras ou detalhes técnicos sob demanda (*Reveal details as needed*).
|
||||
3. **Anatomia e Regiões Fixas em Modais (*M3 Dialog Anatomy & Pinned Regions*):**
|
||||
- **Cabeçalho e Rodapé Fixos (*Pinned Header & Footer*):** Evitar rolagem em *Basic Dialogs*; quando o conteúdo precisar rolar (ex.: lista de seleção), o **Cabeçalho (`v-card-title`) no topo** e a **Barra de Ações (`v-card-actions`) no rodapé** devem permanecer **fixos e visíveis**, rolando apenas o corpo central (`v-card-text`) com divisor sutil.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir condicionante?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir condicionante]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir etapa?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir etapa]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
4. **Anatomia de Painéis Laterais (*M3 Side Sheet Anatomy*):**
|
||||
- **Header Fixo no Topo:** Título conciso em *Sentence case*, botão explícito de fechar (`X` com `aria-label="Fechar painel"`) à direita e, quando houver navegação multi-nível dentro do painel, botão de voltar (`←`) à esquerda do título.
|
||||
- **Corpo em Seções e Acordeões:** Até 2 seções primárias abertas; seções relacionais (`1:N`) em acordeões colapsáveis com resumo numérico no título.
|
||||
|
|
@ -135,7 +135,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 7 Pilares acima.
|
||||
3. **Corrigir Tokens e Navegação Global:**
|
||||
- Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
|
||||
- Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
|
||||
- Concentrar a navegação principal exclusivamente no componente de menu lateral (sem duplicar links na barra de cabeçalho superior) e ordenada pela jornada operacional.
|
||||
4. **Desafogar Layouts, Organizar Modais/Painéis e Conectar Fluxos:**
|
||||
- Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
|
||||
- Adequar modais e painéis à Matriz de Superfícies M3 (convertendo modais longos de 6+ campos em *Side Sheets* ou páginas, garantindo *Pinned Header/Footer* e botões com verbo específico).
|
||||
|
|
@ -148,7 +148,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
|
||||
## Checklist Rápido de Conformidade (`ux-fluxo-funcional`)
|
||||
|
||||
- [ ] 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?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no menu lateral (sem menu horizontal duplicado no cabeçalho superior) 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?
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
type: rule
|
||||
name: mensagens-usuario
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio do módulo (definido em memorias-ia/modulo.yml), sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
scope: global
|
||||
trigger: glob
|
||||
globs: "**/*.vue, **/*.ts, **/*.tsx"
|
||||
|
|
@ -12,9 +12,9 @@ updatedAt: "2026-10-26"
|
|||
|
||||
## Contexto
|
||||
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência, administração pública ou gestão ambiental**. Ele entende de legislação, processos técnicos e operação — mas **não tem obrigação de entender tecnologia**.
|
||||
O usuário final dos módulos do ecossistema é especialista no **domínio de negócio do módulo** (cujo escopo, propósito e público-alvo devem ser consultados obrigatoriamente em `memorias-ia/modulo.yml` nos campos `modulo-descricao` e `modulo-tipo`) — mas **não tem obrigação de entender engenharia de software ou banco de dados**.
|
||||
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo ativo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -30,12 +30,12 @@ Usar voz ativa, tom neutro (sem culpar o usuário e sem pontos de exclamação `
|
|||
"Erro de validação"
|
||||
"Formato inválido"
|
||||
"Payload inválido"
|
||||
"Informe a Área do Empreendimento"
|
||||
"Informe a Razão Social da Organização"
|
||||
|
||||
// ✅ CORRETO — linguagem do domínio + Sentence case (M3)
|
||||
"Informe a área do empreendimento (em hectares)"
|
||||
"Selecione o tipo de licença: LP, LI ou LO"
|
||||
"A data da vistoria deve ser anterior à data de hoje"
|
||||
"Informe a razão social da organização"
|
||||
"Selecione a categoria da solicitação"
|
||||
"A data de conclusão deve ser posterior à data de início"
|
||||
"Informe o CNPJ no formato 00.000.000/0000-00"
|
||||
```
|
||||
|
||||
|
|
@ -57,17 +57,17 @@ Explicar o que ocorreu de forma direta e como o usuário pode prosseguir, sem ex
|
|||
|
||||
### 3. Estados vazios (*empty states*) devem explicar o contexto e orientar a ação
|
||||
|
||||
Quando uma lista, tabela ou painel está vazio, o texto principal não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
Quando uma lista, tabela ou painel está vazio, o título não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico e sem saída
|
||||
"Nenhum registro encontrado."
|
||||
"Lista vazia"
|
||||
|
||||
// ✅ CORRETO — explica o domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma condicionante cadastrada"
|
||||
// Apoio: "Para iniciar o controle de prazos, adicione a primeira condicionante desta licença."
|
||||
// Botão CTA: "Adicionar condicionante"
|
||||
// ✅ CORRETO — explica o contexto do domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma etapa cadastrada neste cronograma"
|
||||
// Apoio: "Para iniciar o acompanhamento de prazos, adicione a primeira etapa."
|
||||
// Botão CTA: "Adicionar etapa"
|
||||
```
|
||||
|
||||
### 4. Diálogos de confirmação devem explicar a consequência e usar botões específicos (M3)
|
||||
|
|
@ -88,15 +88,15 @@ Todo modal de confirmação/decisão crítica (`v-dialog`) deve obedecer à **An
|
|||
|
||||
// ✅ CORRETO — Anatomia M3 (Pergunta específica + Consequência + Verbo no botão)
|
||||
{
|
||||
titulo: "Excluir condicionante?",
|
||||
corpo: "O prazo de cumprimento e os documentos vinculados serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir condicionante"]
|
||||
titulo: "Excluir etapa do cronograma?",
|
||||
corpo: "Os prazos e os documentos vinculados a esta etapa serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir etapa"]
|
||||
}
|
||||
|
||||
{
|
||||
titulo: "Arquivar licença?",
|
||||
corpo: "Esta licença sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar licença"]
|
||||
titulo: "Arquivar solicitação?",
|
||||
corpo: "Esta solicitação sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar solicitação"]
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -108,30 +108,30 @@ Nunca finalizar `label` com dois-pontos (`:`) nem usar ponto final (`.`) em `lab
|
|||
// ❌ ERRADO — genérico, com dois-pontos ou Title Case em todas as palavras
|
||||
label: "Nome:"
|
||||
placeholder: "Digite aqui."
|
||||
label: "Razão Social Do Empreendedor:"
|
||||
label: "Razão Social Do Solicitante:"
|
||||
|
||||
// ✅ CORRETO — específico do domínio, Sentence case e sem pontuação final
|
||||
label: "Razão social do empreendedor"
|
||||
placeholder: "Ex.: Mineração Vale Verde Ltda."
|
||||
label: "Razão social do solicitante"
|
||||
placeholder: "Ex.: Organização Vale Verde Ltda."
|
||||
|
||||
label: "Área total do empreendimento (ha)"
|
||||
placeholder: "Ex.: 150,5"
|
||||
label: "Valor estimado do contrato (R$)"
|
||||
placeholder: "Ex.: 15.000,00"
|
||||
```
|
||||
|
||||
### 6. Schemas Zod devem ter mensagens de domínio em *Sentence case*
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — mensagens padrão do Zod em inglês ou técnicas
|
||||
const zEmpreendimento = z.object({
|
||||
const zCadastro = z.object({
|
||||
nome: z.string().min(1),
|
||||
area: z.number().positive(),
|
||||
valor: z.number().positive(),
|
||||
})
|
||||
|
||||
// ✅ CORRETO — mensagens customizadas em linguagem do domínio
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "Informe um valor numérico para a área" })
|
||||
.positive("A área deve ser maior que zero"),
|
||||
const zCadastro = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social da organização"),
|
||||
valor: z.number({ invalid_type_error: "Informe um valor numérico válido" })
|
||||
.positive("O valor deve ser maior que zero"),
|
||||
cnpj: z.string().regex(/^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/,
|
||||
"CNPJ inválido. Use o formato 00.000.000/0000-00"),
|
||||
})
|
||||
|
|
@ -144,13 +144,13 @@ const zEmpreendimento = z.object({
|
|||
Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do guia `m3.material.io/foundations/writing/best-practices`:
|
||||
|
||||
1. **Capitalização estilo de frase (*Sentence case*):**
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `IBAMA`, `LP`, `LI`, `LO`, `ART`, `MTR`, `UF`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova licença"`, `"Salvar alterações"`, `"Dados do empreendimento"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Empreendimento"`) ou `ALL CAPS` em botões e títulos.
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `CEP`, `UF`, `PDF`, `API`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova solicitação"`, `"Salvar alterações"`, `"Dados do responsável"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Responsável"`) ou `ALL CAPS` em botões e títulos.
|
||||
2. **Começar pelo objetivo (*Begin with the objective*):**
|
||||
- Quando uma frase orientativa descreve uma meta e a ação necessária para atingi-la, **iniciar a frase pelo objetivo** para facilitar o escaneamento rápido:
|
||||
- ✅ `"Para emitir a licença, anexe o parecer técnico conclusivo"`
|
||||
- ❌ `"Anexe o parecer técnico conclusivo para emitir a licença"`
|
||||
- ✅ `"Para concluir a solicitação, anexe o documento comprobatório"`
|
||||
- ❌ `"Anexe o documento comprobatório para concluir a solicitação"`
|
||||
3. **Pontuação enxuta para escaneabilidade (*Skip unnecessary punctuation*):**
|
||||
- **Omitir ponto final (`.`)** em: rótulos (`label`), botões, títulos e subtítulos, cabeçalhos de seção, tooltips curtos de 1 frase, toasts/snackbars de 1 frase e itens de lista (*bullet points*) de frase única.
|
||||
- **Proibir dois-pontos (`:`)** ao final de títulos, cabeçalhos de seção/lista e labels de campos (`<h3>Documentos exigidos</h3>` e nunca `<h3>Documentos exigidos:</h3>`).
|
||||
|
|
@ -160,9 +160,9 @@ Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do gui
|
|||
- **Proibido** usar pontos de exclamação (`!`) ou palavras alarmistas (`"Atenção!"`, `"Erro fatal!"`, `"Cuidado!"`) em mensagens de erro ou aviso.
|
||||
5. **Consistência de pessoa verbal (2ª pessoa):**
|
||||
- Dirigir-se diretamente ao usuário em 2ª pessoa (`"você"`, `"seu/sua"`).
|
||||
- **Nunca misturar** 1ª pessoa (`"Meus processos"`) e 2ª pessoa (`"Gerencie seus processos"`) na mesma tela ou fluxo.
|
||||
- **Nunca misturar** 1ª pessoa (`"Minhas solicitações"`) e 2ª pessoa (`"Gerencie suas solicitações"`) na mesma tela ou fluxo.
|
||||
6. **Algarismos para números e zero abreviações truncadas (*Use numerals & Avoid abbreviations*):**
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 condicionantes pendentes"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três condicionantes"`).
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 pendências encontradas"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três pendências"`).
|
||||
- **Proibido** usar abreviações truncadas na interface (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`, `"Dt."`, `"Máx."`, `"Mín."`, `"Tel."`). Escrever a palavra por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Endereço"`, `"Data"`, `"Máximo"`).
|
||||
7. **Acessibilidade textual (*Alt text & Anti-truncamento cego*):**
|
||||
- Textos alternativos (`alt`) devem ser concisos (até **125 caracteres**) e descrever a função/conteúdo sem iniciar por `"Imagem de..."` ou `"Ícone de..."`. Imagens decorativas devem usar `alt=""`.
|
||||
|
|
@ -172,11 +172,12 @@ Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do gui
|
|||
|
||||
## Impacto
|
||||
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas que confundem o usuário final.
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas ou de outro domínio que confundem o usuário final.
|
||||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Rule: `global/rules/identidade-modulo` (`memorias-ia/modulo.yml`)
|
||||
- Rule: `global/rules/zod-validacao-padrao` (schemas com mensagens customizadas)
|
||||
- Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` (hierarquia visual e despoluição)
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md` (jornada e organização de telas, modais e painéis)
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
- Quando um elemento principal não se destaca, **não** aumente sua fonte ou saturação indefinidamente: reduza o contraste dos elementos que competem com ele (itens inativos, textos de apoio, barras laterais sem caixas pesadas).
|
||||
3. **Rótulos são o Último Recurso (*Labels are a last resort*):**
|
||||
- **Proibido** empilhar listas ingênuas de `Rótulo: Valor` vindas do banco de dados com igual peso visual.
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 condicionantes pendentes"`, `"150,5 ha de área total"`).
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 etapas pendentes"`, `"R$ 15.000,00 de valor total"`).
|
||||
- Quando o rótulo for necessário (ex.: cards de indicadores/KPIs), o **valor é o protagonista** (`20px–24px`, peso `600/700`, cor escura) e o rótulo é secundário (`12px`, cor neutra suave).
|
||||
4. **Separar Hierarquia Visual da Semântica HTML:**
|
||||
- Tags `<h1>`, `<h2>`, `<h3>` em telas de aplicação funcionam como rótulos de seção: devem ser contidas (`16px–20px`, peso `600`), nunca títulos gigantes que roubam espaço da área de trabalho.
|
||||
|
|
@ -128,17 +128,17 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
|
||||
```vue
|
||||
<v-card variant="outlined" class="pa-2">
|
||||
<h1 class="text-h3">Listagem de Licenças</h1>
|
||||
<h1 class="text-h3">Listagem de Solicitações</h1>
|
||||
<v-divider class="my-2" />
|
||||
<v-card variant="outlined" class="pa-2 mb-2">
|
||||
<div><strong>Razão Social:</strong> Mineração Vale Verde</div>
|
||||
<div><strong>Razão Social:</strong> Organização Vale Verde</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>CNPJ:</strong> 12.345.678/0001-90</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>Status:</strong> Vigente</div>
|
||||
<div><strong>Status:</strong> Em andamento</div>
|
||||
<div class="d-flex ga-2 mt-2">
|
||||
<v-btn color="primary" variant="flat">Editar</v-btn>
|
||||
<v-btn color="success" variant="flat">Renovar</v-btn>
|
||||
<v-btn color="success" variant="flat">Concluir</v-btn>
|
||||
<v-btn color="warning" variant="flat">Exportar</v-btn>
|
||||
<v-btn color="error" variant="flat">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
@ -152,23 +152,23 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
<h1 class="text-h6 font-weight-semibold">Solicitações ativas</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 solicitações registradas no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova solicitação</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<v-card flat class="pa-5 bg-surface rounded-lg">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Mineração Vale Verde Ltda.</div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Organização Vale Verde Ltda.</div>
|
||||
<div class="text-caption text-medium-emphasis">12.345.678/0001-90 • Criciúma/SC</div>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-btn color="secondary" variant="tonal" size="small">Renovar</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" size="small">Concluir</v-btn>
|
||||
<v-btn variant="text" size="small">Editar</v-btn>
|
||||
<v-btn variant="text" color="error" size="small">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@ Toda auditoria de UX deve verificar se a tela, modais e painéis seguem os limit
|
|||
### 2.8. Auditoria de UX Writing e Microcopy (Material Design 3)
|
||||
|
||||
Verificar conformidade com `rules/mensagens-usuario` e `https://m3.material.io/foundations/writing/best-practices`:
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova licença"` e não `"Nova Licença"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir condicionante?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir condicionante]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova solicitação"` e não `"Nova Solicitação"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir etapa?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir etapa]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Pontuação Enxuta de Escaneabilidade:** Rótulos, botões, títulos, tooltips de 1 frase, toasts de 1 frase e itens de lista curtos omitem ponto final (`.`), e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] **Tempo Presente, Voz Ativa, Algarismos e Zero Abreviações Truncadas:** Textos usam voz ativa no presente, números em algarismos (`3`, `10 MB`), zero pontos de exclamação (`!`) em erros/alertas e zero abreviações truncadas (`Qtd.`, `Obs.`, `Cad.`, `End.`, `Máx.`)?
|
||||
|
||||
|
|
|
|||
|
|
@ -20,15 +20,15 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
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:
|
||||
O menu de navegação das páginas do módulo deve residir **exclusivamente no componente de menu lateral de navegação** (ex.: `MenuLateral.vue` / `Sidebar`), ordenado pela 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. **Ordem da Tarefa (*Task-Order Navigation* no Menu Lateral):** 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. **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.
|
||||
2. **Proibição de Menu Duplicado no Cabeçalho Superior:** O cabeçalho superior (`v-app-bar` / `Navbar`) 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.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas
|
|||
- **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.
|
||||
- Gavetas e painéis de detalhe (*Side Sheets* / *Inspectors*) 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`.
|
||||
|
|
@ -121,7 +121,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
- Posicionar a informação mais importante no início do título/parágrafo (*front-loading*) e ocultar configurações raras ou detalhes técnicos sob demanda (*Reveal details as needed*).
|
||||
3. **Anatomia e Regiões Fixas em Modais (*M3 Dialog Anatomy & Pinned Regions*):**
|
||||
- **Cabeçalho e Rodapé Fixos (*Pinned Header & Footer*):** Evitar rolagem em *Basic Dialogs*; quando o conteúdo precisar rolar (ex.: lista de seleção), o **Cabeçalho (`v-card-title`) no topo** e a **Barra de Ações (`v-card-actions`) no rodapé** devem permanecer **fixos e visíveis**, rolando apenas o corpo central (`v-card-text`) com divisor sutil.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir condicionante?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir condicionante]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir etapa?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir etapa]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
4. **Anatomia de Painéis Laterais (*M3 Side Sheet Anatomy*):**
|
||||
- **Header Fixo no Topo:** Título conciso em *Sentence case*, botão explícito de fechar (`X` com `aria-label="Fechar painel"`) à direita e, quando houver navegação multi-nível dentro do painel, botão de voltar (`←`) à esquerda do título.
|
||||
- **Corpo em Seções e Acordeões:** Até 2 seções primárias abertas; seções relacionais (`1:N`) em acordeões colapsáveis com resumo numérico no título.
|
||||
|
|
@ -135,7 +135,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 7 Pilares acima.
|
||||
3. **Corrigir Tokens e Navegação Global:**
|
||||
- Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
|
||||
- Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
|
||||
- Concentrar a navegação principal exclusivamente no componente de menu lateral (sem duplicar links na barra de cabeçalho superior) e ordenada pela jornada operacional.
|
||||
4. **Desafogar Layouts, Organizar Modais/Painéis e Conectar Fluxos:**
|
||||
- Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
|
||||
- Adequar modais e painéis à Matriz de Superfícies M3 (convertendo modais longos de 6+ campos em *Side Sheets* ou páginas, garantindo *Pinned Header/Footer* e botões com verbo específico).
|
||||
|
|
@ -148,7 +148,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
|
||||
## Checklist Rápido de Conformidade (`ux-fluxo-funcional`)
|
||||
|
||||
- [ ] 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?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no menu lateral (sem menu horizontal duplicado no cabeçalho superior) 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?
|
||||
|
|
|
|||
|
|
@ -12,24 +12,21 @@ Guia de revisão e otimização de interfaces Vue 3 + Vuetify 3 no ecossistema A
|
|||
|
||||
---
|
||||
|
||||
## Perfil do Usuário
|
||||
## Perfil do Usuário (Resolução via `memorias-ia/modulo.yml`)
|
||||
|
||||
O público-alvo das interfaces é corporativo e diversificado em experiência técnica:
|
||||
O público-alvo e o domínio de negócio do módulo devem ser obtidos obrigatoriamente em `memorias-ia/modulo.yml` (`modulo-descricao` e `modulo-tipo`), abrangendo perfis operacionais, administrativos, técnicos e de gestão (pública ou privada).
|
||||
|
||||
- Gestores públicos e ambientais
|
||||
- Técnicos de campo
|
||||
- Consultores ambientais
|
||||
- Operadores administrativos
|
||||
|
||||
**Premissa central**: o usuário não tem familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
**Premissa central**: o usuário é especialista no seu domínio de negócio, mas não tem obrigação de ter familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores Institucional
|
||||
## Paleta de Cores Institucional (Conforme `rules/estilos-design-system.md`)
|
||||
|
||||
Cor base: `#688C00` (verde floresta). Três escalas derivadas: **Verde floresta** (primária), **Âmbar terroso** (apoio/aviso), **Cinza musgo** (neutros). Semânticas independentes para garantir reconhecimento universal.
|
||||
A seleção do Design System depende do módulo identificado em `memorias-ia/modulo.yml` (ver `rules/estilos-design-system.md`):
|
||||
- **Estilo Floreta (Iniciativa Privada / Verde Floresta `#688C00`):** tokens `--cor-eli-*` detalhados nas tabelas abaixo.
|
||||
- **Estilo Betha (Governo / Setor Público `#007bff` e Header `#343a40`):** tokens governamentais documentados em `rules/estilos-design-system.md`.
|
||||
|
||||
### Escala primária — Verde floresta
|
||||
### Escala primária — Estilo Floreta (Verde floresta `#688C00`)
|
||||
|
||||
| Token | Hex | Stop | Uso |
|
||||
|---|---|---|---|
|
||||
|
|
@ -115,11 +112,11 @@ Para cada elemento da interface, avaliar:
|
|||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova licença"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova solicitação"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] Rótulos (`label`), botões, títulos, tooltips de 1 frase e toasts de 1 frase **omitem ponto final (`.`)** e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir condicionante?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 condicionantes"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir etapa?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 pendências"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Labels e placeholders são descritivos (ex.: `"Buscar por razão social ou CNPJ"` vs `"Buscar"`)?
|
||||
- [ ] Ícones acompanham texto quando a ação não é universalmente reconhecível?
|
||||
- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
|
||||
|
|
@ -127,9 +124,9 @@ Para cada elemento da interface, avaliar:
|
|||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
- [ ] O olho do usuário é guiado para a ação principal primeiro (apenas **1 ação primária sólida** `variant="flat"` por vista/seção)?
|
||||
- [ ] Ações primárias usam `--cor-eli-primaria` (`#688C00`) com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações primárias usam o token `primary` do tema com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações destrutivas (Excluir, Limpar, Remover) na tela principal são discretas (`variant="text"` ou em `v-menu`), reservando o botão vermelho sólido exclusivamente para o **modal de confirmação**?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 condicionantes"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 etapas"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Em cards de indicadores/KPIs, o valor numérico é o protagonista (`20px–24px`, peso `600/700`) e o rótulo é secundário (`12px`, cor neutra)?
|
||||
- [ ] Títulos de seção (`h1`–`h3`) têm tamanho contido (`16px–20px`, peso `600`) sem roubar espaço do conteúdo?
|
||||
|
||||
|
|
@ -250,7 +247,7 @@ Após implementar:
|
|||
|
||||
- [ ] A tela renderiza sem erros no console?
|
||||
- [ ] Os estados (vazio, carregando, erro, com dados) estão todos cobertos?
|
||||
- [ ] A paleta de cores está coerente com a base `#688C00`?
|
||||
- [ ] A paleta de cores está coerente com o Design System do módulo (`rules/estilos-design-system.md`: Estilo Floreta `#688C00` ou Estilo Betha `#007bff` / `#343a40` conforme `memorias-ia/modulo.yml`)?
|
||||
- [ ] Todos os tokens usados estão definidos na escala primária, de apoio ou neutra?
|
||||
- [ ] Nenhuma cor está hardcoded no CSS do componente (usar `var(--token, #fallback)`)?
|
||||
- [ ] Tokens novos têm fallback hardcoded? (ex: `var(--cor-eli-primaria-suave, #BFC99C)`)?
|
||||
|
|
@ -270,8 +267,8 @@ Após implementar:
|
|||
| *Card-ception* (`v-card` com borda dentro de `v-card` + `v-divider`) | Separar seções por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`) |
|
||||
| Pilha de `Rótulo: Valor` com mesmo peso visual | Omitir rótulos óbvios pelo formato ou combinar em frase; destacar o dado e suavizar o rótulo |
|
||||
| Modal com scroll extenso ou 6+ campos espremidos | Converter em *Side Sheet* (5–8 campos), página dedicada ou *Full-Screen Dialog*, mantendo Cabeçalho e Rodapé fixos (*pinned*) |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir condicionante?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir condicionante]` |
|
||||
| *Title Case* anglófono (`"Nova Licença"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova licença"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir etapa?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir etapa]` |
|
||||
| *Title Case* anglófono (`"Nova Solicitação"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova solicitação"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"Máx."`) | Escrever por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Máximo"`) e usar algarismos (`3`, `10 MB`) |
|
||||
| Tabela com 10–15+ colunas estreitas | Consolidar colunas correlatas em célula de 2 linhas (Título + metadado secundário) |
|
||||
| Ícone inflado a seco (`48px–64px`) | Ícone `20px–24px` dentro de badge arredondado (`40px–48px`) com fundo pastel |
|
||||
|
|
|
|||
|
|
@ -12,24 +12,21 @@ Guia de revisão e otimização de interfaces Vue 3 + Vuetify 3 no ecossistema A
|
|||
|
||||
---
|
||||
|
||||
## Perfil do Usuário
|
||||
## Perfil do Usuário (Resolução via `memorias-ia/modulo.yml`)
|
||||
|
||||
O público-alvo das interfaces é corporativo e diversificado em experiência técnica:
|
||||
O público-alvo e o domínio de negócio do módulo devem ser obtidos obrigatoriamente em `memorias-ia/modulo.yml` (`modulo-descricao` e `modulo-tipo`), abrangendo perfis operacionais, administrativos, técnicos e de gestão (pública ou privada).
|
||||
|
||||
- Gestores públicos e ambientais
|
||||
- Técnicos de campo
|
||||
- Consultores ambientais
|
||||
- Operadores administrativos
|
||||
|
||||
**Premissa central**: o usuário não tem familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
**Premissa central**: o usuário é especialista no seu domínio de negócio, mas não tem obrigação de ter familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores Institucional
|
||||
## Paleta de Cores Institucional (Conforme `rules/estilos-design-system.md`)
|
||||
|
||||
Cor base: `#688C00` (verde floresta). Três escalas derivadas: **Verde floresta** (primária), **Âmbar terroso** (apoio/aviso), **Cinza musgo** (neutros). Semânticas independentes para garantir reconhecimento universal.
|
||||
A seleção do Design System depende do módulo identificado em `memorias-ia/modulo.yml` (ver `rules/estilos-design-system.md`):
|
||||
- **Estilo Floreta (Iniciativa Privada / Verde Floresta `#688C00`):** tokens `--cor-eli-*` detalhados nas tabelas abaixo.
|
||||
- **Estilo Betha (Governo / Setor Público `#007bff` e Header `#343a40`):** tokens governamentais documentados em `rules/estilos-design-system.md`.
|
||||
|
||||
### Escala primária — Verde floresta
|
||||
### Escala primária — Estilo Floreta (Verde floresta `#688C00`)
|
||||
|
||||
| Token | Hex | Stop | Uso |
|
||||
|---|---|---|---|
|
||||
|
|
@ -115,11 +112,11 @@ Para cada elemento da interface, avaliar:
|
|||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova licença"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova solicitação"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] Rótulos (`label`), botões, títulos, tooltips de 1 frase e toasts de 1 frase **omitem ponto final (`.`)** e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir condicionante?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 condicionantes"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir etapa?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 pendências"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Labels e placeholders são descritivos (ex.: `"Buscar por razão social ou CNPJ"` vs `"Buscar"`)?
|
||||
- [ ] Ícones acompanham texto quando a ação não é universalmente reconhecível?
|
||||
- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
|
||||
|
|
@ -127,9 +124,9 @@ Para cada elemento da interface, avaliar:
|
|||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
- [ ] O olho do usuário é guiado para a ação principal primeiro (apenas **1 ação primária sólida** `variant="flat"` por vista/seção)?
|
||||
- [ ] Ações primárias usam `--cor-eli-primaria` (`#688C00`) com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações primárias usam o token `primary` do tema com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações destrutivas (Excluir, Limpar, Remover) na tela principal são discretas (`variant="text"` ou em `v-menu`), reservando o botão vermelho sólido exclusivamente para o **modal de confirmação**?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 condicionantes"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 etapas"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Em cards de indicadores/KPIs, o valor numérico é o protagonista (`20px–24px`, peso `600/700`) e o rótulo é secundário (`12px`, cor neutra)?
|
||||
- [ ] Títulos de seção (`h1`–`h3`) têm tamanho contido (`16px–20px`, peso `600`) sem roubar espaço do conteúdo?
|
||||
|
||||
|
|
@ -250,7 +247,7 @@ Após implementar:
|
|||
|
||||
- [ ] A tela renderiza sem erros no console?
|
||||
- [ ] Os estados (vazio, carregando, erro, com dados) estão todos cobertos?
|
||||
- [ ] A paleta de cores está coerente com a base `#688C00`?
|
||||
- [ ] A paleta de cores está coerente com o Design System do módulo (`rules/estilos-design-system.md`: Estilo Floreta `#688C00` ou Estilo Betha `#007bff` / `#343a40` conforme `memorias-ia/modulo.yml`)?
|
||||
- [ ] Todos os tokens usados estão definidos na escala primária, de apoio ou neutra?
|
||||
- [ ] Nenhuma cor está hardcoded no CSS do componente (usar `var(--token, #fallback)`)?
|
||||
- [ ] Tokens novos têm fallback hardcoded? (ex: `var(--cor-eli-primaria-suave, #BFC99C)`)?
|
||||
|
|
@ -270,8 +267,8 @@ Após implementar:
|
|||
| *Card-ception* (`v-card` com borda dentro de `v-card` + `v-divider`) | Separar seções por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`) |
|
||||
| Pilha de `Rótulo: Valor` com mesmo peso visual | Omitir rótulos óbvios pelo formato ou combinar em frase; destacar o dado e suavizar o rótulo |
|
||||
| Modal com scroll extenso ou 6+ campos espremidos | Converter em *Side Sheet* (5–8 campos), página dedicada ou *Full-Screen Dialog*, mantendo Cabeçalho e Rodapé fixos (*pinned*) |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir condicionante?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir condicionante]` |
|
||||
| *Title Case* anglófono (`"Nova Licença"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova licença"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir etapa?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir etapa]` |
|
||||
| *Title Case* anglófono (`"Nova Solicitação"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova solicitação"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"Máx."`) | Escrever por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Máximo"`) e usar algarismos (`3`, `10 MB`) |
|
||||
| Tabela com 10–15+ colunas estreitas | Consolidar colunas correlatas em célula de 2 linhas (Título + metadado secundário) |
|
||||
| Ícone inflado a seco (`48px–64px`) | Ícone `20px–24px` dentro de badge arredondado (`40px–48px`) com fundo pastel |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
type: rule
|
||||
name: mensagens-usuario
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio do módulo (definido em memorias-ia/modulo.yml), sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
scope: global
|
||||
trigger: glob
|
||||
globs: "**/*.vue, **/*.ts, **/*.tsx"
|
||||
|
|
@ -12,9 +12,9 @@ updatedAt: "2026-10-26"
|
|||
|
||||
## Contexto
|
||||
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência, administração pública ou gestão ambiental**. Ele entende de legislação, processos técnicos e operação — mas **não tem obrigação de entender tecnologia**.
|
||||
O usuário final dos módulos do ecossistema é especialista no **domínio de negócio do módulo** (cujo escopo, propósito e público-alvo devem ser consultados obrigatoriamente em `memorias-ia/modulo.yml` nos campos `modulo-descricao` e `modulo-tipo`) — mas **não tem obrigação de entender engenharia de software ou banco de dados**.
|
||||
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo ativo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -30,12 +30,12 @@ Usar voz ativa, tom neutro (sem culpar o usuário e sem pontos de exclamação `
|
|||
"Erro de validação"
|
||||
"Formato inválido"
|
||||
"Payload inválido"
|
||||
"Informe a Área do Empreendimento"
|
||||
"Informe a Razão Social da Organização"
|
||||
|
||||
// ✅ CORRETO — linguagem do domínio + Sentence case (M3)
|
||||
"Informe a área do empreendimento (em hectares)"
|
||||
"Selecione o tipo de licença: LP, LI ou LO"
|
||||
"A data da vistoria deve ser anterior à data de hoje"
|
||||
"Informe a razão social da organização"
|
||||
"Selecione a categoria da solicitação"
|
||||
"A data de conclusão deve ser posterior à data de início"
|
||||
"Informe o CNPJ no formato 00.000.000/0000-00"
|
||||
```
|
||||
|
||||
|
|
@ -57,17 +57,17 @@ Explicar o que ocorreu de forma direta e como o usuário pode prosseguir, sem ex
|
|||
|
||||
### 3. Estados vazios (*empty states*) devem explicar o contexto e orientar a ação
|
||||
|
||||
Quando uma lista, tabela ou painel está vazio, o texto principal não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
Quando uma lista, tabela ou painel está vazio, o título não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico e sem saída
|
||||
"Nenhum registro encontrado."
|
||||
"Lista vazia"
|
||||
|
||||
// ✅ CORRETO — explica o domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma condicionante cadastrada"
|
||||
// Apoio: "Para iniciar o controle de prazos, adicione a primeira condicionante desta licença."
|
||||
// Botão CTA: "Adicionar condicionante"
|
||||
// ✅ CORRETO — explica o contexto do domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma etapa cadastrada neste cronograma"
|
||||
// Apoio: "Para iniciar o acompanhamento de prazos, adicione a primeira etapa."
|
||||
// Botão CTA: "Adicionar etapa"
|
||||
```
|
||||
|
||||
### 4. Diálogos de confirmação devem explicar a consequência e usar botões específicos (M3)
|
||||
|
|
@ -88,15 +88,15 @@ Todo modal de confirmação/decisão crítica (`v-dialog`) deve obedecer à **An
|
|||
|
||||
// ✅ CORRETO — Anatomia M3 (Pergunta específica + Consequência + Verbo no botão)
|
||||
{
|
||||
titulo: "Excluir condicionante?",
|
||||
corpo: "O prazo de cumprimento e os documentos vinculados serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir condicionante"]
|
||||
titulo: "Excluir etapa do cronograma?",
|
||||
corpo: "Os prazos e os documentos vinculados a esta etapa serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir etapa"]
|
||||
}
|
||||
|
||||
{
|
||||
titulo: "Arquivar licença?",
|
||||
corpo: "Esta licença sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar licença"]
|
||||
titulo: "Arquivar solicitação?",
|
||||
corpo: "Esta solicitação sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar solicitação"]
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -108,30 +108,30 @@ Nunca finalizar `label` com dois-pontos (`:`) nem usar ponto final (`.`) em `lab
|
|||
// ❌ ERRADO — genérico, com dois-pontos ou Title Case em todas as palavras
|
||||
label: "Nome:"
|
||||
placeholder: "Digite aqui."
|
||||
label: "Razão Social Do Empreendedor:"
|
||||
label: "Razão Social Do Solicitante:"
|
||||
|
||||
// ✅ CORRETO — específico do domínio, Sentence case e sem pontuação final
|
||||
label: "Razão social do empreendedor"
|
||||
placeholder: "Ex.: Mineração Vale Verde Ltda."
|
||||
label: "Razão social do solicitante"
|
||||
placeholder: "Ex.: Organização Vale Verde Ltda."
|
||||
|
||||
label: "Área total do empreendimento (ha)"
|
||||
placeholder: "Ex.: 150,5"
|
||||
label: "Valor estimado do contrato (R$)"
|
||||
placeholder: "Ex.: 15.000,00"
|
||||
```
|
||||
|
||||
### 6. Schemas Zod devem ter mensagens de domínio em *Sentence case*
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — mensagens padrão do Zod em inglês ou técnicas
|
||||
const zEmpreendimento = z.object({
|
||||
const zCadastro = z.object({
|
||||
nome: z.string().min(1),
|
||||
area: z.number().positive(),
|
||||
valor: z.number().positive(),
|
||||
})
|
||||
|
||||
// ✅ CORRETO — mensagens customizadas em linguagem do domínio
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "Informe um valor numérico para a área" })
|
||||
.positive("A área deve ser maior que zero"),
|
||||
const zCadastro = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social da organização"),
|
||||
valor: z.number({ invalid_type_error: "Informe um valor numérico válido" })
|
||||
.positive("O valor deve ser maior que zero"),
|
||||
cnpj: z.string().regex(/^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/,
|
||||
"CNPJ inválido. Use o formato 00.000.000/0000-00"),
|
||||
})
|
||||
|
|
@ -144,13 +144,13 @@ const zEmpreendimento = z.object({
|
|||
Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do guia `m3.material.io/foundations/writing/best-practices`:
|
||||
|
||||
1. **Capitalização estilo de frase (*Sentence case*):**
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `IBAMA`, `LP`, `LI`, `LO`, `ART`, `MTR`, `UF`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova licença"`, `"Salvar alterações"`, `"Dados do empreendimento"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Empreendimento"`) ou `ALL CAPS` em botões e títulos.
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `CEP`, `UF`, `PDF`, `API`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova solicitação"`, `"Salvar alterações"`, `"Dados do responsável"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Responsável"`) ou `ALL CAPS` em botões e títulos.
|
||||
2. **Começar pelo objetivo (*Begin with the objective*):**
|
||||
- Quando uma frase orientativa descreve uma meta e a ação necessária para atingi-la, **iniciar a frase pelo objetivo** para facilitar o escaneamento rápido:
|
||||
- ✅ `"Para emitir a licença, anexe o parecer técnico conclusivo"`
|
||||
- ❌ `"Anexe o parecer técnico conclusivo para emitir a licença"`
|
||||
- ✅ `"Para concluir a solicitação, anexe o documento comprobatório"`
|
||||
- ❌ `"Anexe o documento comprobatório para concluir a solicitação"`
|
||||
3. **Pontuação enxuta para escaneabilidade (*Skip unnecessary punctuation*):**
|
||||
- **Omitir ponto final (`.`)** em: rótulos (`label`), botões, títulos e subtítulos, cabeçalhos de seção, tooltips curtos de 1 frase, toasts/snackbars de 1 frase e itens de lista (*bullet points*) de frase única.
|
||||
- **Proibir dois-pontos (`:`)** ao final de títulos, cabeçalhos de seção/lista e labels de campos (`<h3>Documentos exigidos</h3>` e nunca `<h3>Documentos exigidos:</h3>`).
|
||||
|
|
@ -160,9 +160,9 @@ Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do gui
|
|||
- **Proibido** usar pontos de exclamação (`!`) ou palavras alarmistas (`"Atenção!"`, `"Erro fatal!"`, `"Cuidado!"`) em mensagens de erro ou aviso.
|
||||
5. **Consistência de pessoa verbal (2ª pessoa):**
|
||||
- Dirigir-se diretamente ao usuário em 2ª pessoa (`"você"`, `"seu/sua"`).
|
||||
- **Nunca misturar** 1ª pessoa (`"Meus processos"`) e 2ª pessoa (`"Gerencie seus processos"`) na mesma tela ou fluxo.
|
||||
- **Nunca misturar** 1ª pessoa (`"Minhas solicitações"`) e 2ª pessoa (`"Gerencie suas solicitações"`) na mesma tela ou fluxo.
|
||||
6. **Algarismos para números e zero abreviações truncadas (*Use numerals & Avoid abbreviations*):**
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 condicionantes pendentes"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três condicionantes"`).
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 pendências encontradas"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três pendências"`).
|
||||
- **Proibido** usar abreviações truncadas na interface (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`, `"Dt."`, `"Máx."`, `"Mín."`, `"Tel."`). Escrever a palavra por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Endereço"`, `"Data"`, `"Máximo"`).
|
||||
7. **Acessibilidade textual (*Alt text & Anti-truncamento cego*):**
|
||||
- Textos alternativos (`alt`) devem ser concisos (até **125 caracteres**) e descrever a função/conteúdo sem iniciar por `"Imagem de..."` ou `"Ícone de..."`. Imagens decorativas devem usar `alt=""`.
|
||||
|
|
@ -172,11 +172,12 @@ Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do gui
|
|||
|
||||
## Impacto
|
||||
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas que confundem o usuário final.
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas ou de outro domínio que confundem o usuário final.
|
||||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Rule: `global/rules/identidade-modulo` (`memorias-ia/modulo.yml`)
|
||||
- Rule: `global/rules/zod-validacao-padrao` (schemas com mensagens customizadas)
|
||||
- Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` (hierarquia visual e despoluição)
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md` (jornada e organização de telas, modais e painéis)
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
- Quando um elemento principal não se destaca, **não** aumente sua fonte ou saturação indefinidamente: reduza o contraste dos elementos que competem com ele (itens inativos, textos de apoio, barras laterais sem caixas pesadas).
|
||||
3. **Rótulos são o Último Recurso (*Labels are a last resort*):**
|
||||
- **Proibido** empilhar listas ingênuas de `Rótulo: Valor` vindas do banco de dados com igual peso visual.
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 condicionantes pendentes"`, `"150,5 ha de área total"`).
|
||||
- Omitir o rótulo quando o formato ou contexto já identifica o dado (CNPJ, e-mail, telefone, status, moeda, data) ou combinar rótulo + valor em frase natural (`"12 etapas pendentes"`, `"R$ 15.000,00 de valor total"`).
|
||||
- Quando o rótulo for necessário (ex.: cards de indicadores/KPIs), o **valor é o protagonista** (`20px–24px`, peso `600/700`, cor escura) e o rótulo é secundário (`12px`, cor neutra suave).
|
||||
4. **Separar Hierarquia Visual da Semântica HTML:**
|
||||
- Tags `<h1>`, `<h2>`, `<h3>` em telas de aplicação funcionam como rótulos de seção: devem ser contidas (`16px–20px`, peso `600`), nunca títulos gigantes que roubam espaço da área de trabalho.
|
||||
|
|
@ -128,17 +128,17 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
|
||||
```vue
|
||||
<v-card variant="outlined" class="pa-2">
|
||||
<h1 class="text-h3">Listagem de Licenças</h1>
|
||||
<h1 class="text-h3">Listagem de Solicitações</h1>
|
||||
<v-divider class="my-2" />
|
||||
<v-card variant="outlined" class="pa-2 mb-2">
|
||||
<div><strong>Razão Social:</strong> Mineração Vale Verde</div>
|
||||
<div><strong>Razão Social:</strong> Organização Vale Verde</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>CNPJ:</strong> 12.345.678/0001-90</div>
|
||||
<v-divider class="my-1" />
|
||||
<div><strong>Status:</strong> Vigente</div>
|
||||
<div><strong>Status:</strong> Em andamento</div>
|
||||
<div class="d-flex ga-2 mt-2">
|
||||
<v-btn color="primary" variant="flat">Editar</v-btn>
|
||||
<v-btn color="success" variant="flat">Renovar</v-btn>
|
||||
<v-btn color="success" variant="flat">Concluir</v-btn>
|
||||
<v-btn color="warning" variant="flat">Exportar</v-btn>
|
||||
<v-btn color="error" variant="flat">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
@ -152,23 +152,23 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
<h1 class="text-h6 font-weight-semibold">Solicitações ativas</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 solicitações registradas no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova solicitação</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<v-card flat class="pa-5 bg-surface rounded-lg">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Mineração Vale Verde Ltda.</div>
|
||||
<div class="text-subtitle-1 font-weight-semibold">Organização Vale Verde Ltda.</div>
|
||||
<div class="text-caption text-medium-emphasis">12.345.678/0001-90 • Criciúma/SC</div>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-btn color="secondary" variant="tonal" size="small">Renovar</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" size="small">Concluir</v-btn>
|
||||
<v-btn variant="text" size="small">Editar</v-btn>
|
||||
<v-btn variant="text" color="error" size="small">Excluir</v-btn>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@ Toda auditoria de UX deve verificar se a tela, modais e painéis seguem os limit
|
|||
### 2.8. Auditoria de UX Writing e Microcopy (Material Design 3)
|
||||
|
||||
Verificar conformidade com `rules/mensagens-usuario` e `https://m3.material.io/foundations/writing/best-practices`:
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova licença"` e não `"Nova Licença"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir condicionante?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir condicionante]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova solicitação"` e não `"Nova Solicitação"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir etapa?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir etapa]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Pontuação Enxuta de Escaneabilidade:** Rótulos, botões, títulos, tooltips de 1 frase, toasts de 1 frase e itens de lista curtos omitem ponto final (`.`), e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] **Tempo Presente, Voz Ativa, Algarismos e Zero Abreviações Truncadas:** Textos usam voz ativa no presente, números em algarismos (`3`, `10 MB`), zero pontos de exclamação (`!`) em erros/alertas e zero abreviações truncadas (`Qtd.`, `Obs.`, `Cad.`, `End.`, `Máx.`)?
|
||||
|
||||
|
|
|
|||
|
|
@ -20,15 +20,15 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
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:
|
||||
O menu de navegação das páginas do módulo deve residir **exclusivamente no componente de menu lateral de navegação** (ex.: `MenuLateral.vue` / `Sidebar`), ordenado pela 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. **Ordem da Tarefa (*Task-Order Navigation* no Menu Lateral):** 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. **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.
|
||||
2. **Proibição de Menu Duplicado no Cabeçalho Superior:** O cabeçalho superior (`v-app-bar` / `Navbar`) 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.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas
|
|||
- **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.
|
||||
- Gavetas e painéis de detalhe (*Side Sheets* / *Inspectors*) 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`.
|
||||
|
|
@ -121,7 +121,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
- Posicionar a informação mais importante no início do título/parágrafo (*front-loading*) e ocultar configurações raras ou detalhes técnicos sob demanda (*Reveal details as needed*).
|
||||
3. **Anatomia e Regiões Fixas em Modais (*M3 Dialog Anatomy & Pinned Regions*):**
|
||||
- **Cabeçalho e Rodapé Fixos (*Pinned Header & Footer*):** Evitar rolagem em *Basic Dialogs*; quando o conteúdo precisar rolar (ex.: lista de seleção), o **Cabeçalho (`v-card-title`) no topo** e a **Barra de Ações (`v-card-actions`) no rodapé** devem permanecer **fixos e visíveis**, rolando apenas o corpo central (`v-card-text`) com divisor sutil.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir condicionante?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir condicionante]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir etapa?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir etapa]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
4. **Anatomia de Painéis Laterais (*M3 Side Sheet Anatomy*):**
|
||||
- **Header Fixo no Topo:** Título conciso em *Sentence case*, botão explícito de fechar (`X` com `aria-label="Fechar painel"`) à direita e, quando houver navegação multi-nível dentro do painel, botão de voltar (`←`) à esquerda do título.
|
||||
- **Corpo em Seções e Acordeões:** Até 2 seções primárias abertas; seções relacionais (`1:N`) em acordeões colapsáveis com resumo numérico no título.
|
||||
|
|
@ -135,7 +135,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 7 Pilares acima.
|
||||
3. **Corrigir Tokens e Navegação Global:**
|
||||
- Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
|
||||
- Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
|
||||
- Concentrar a navegação principal exclusivamente no componente de menu lateral (sem duplicar links na barra de cabeçalho superior) e ordenada pela jornada operacional.
|
||||
4. **Desafogar Layouts, Organizar Modais/Painéis e Conectar Fluxos:**
|
||||
- Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
|
||||
- Adequar modais e painéis à Matriz de Superfícies M3 (convertendo modais longos de 6+ campos em *Side Sheets* ou páginas, garantindo *Pinned Header/Footer* e botões com verbo específico).
|
||||
|
|
@ -148,7 +148,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
|
||||
## Checklist Rápido de Conformidade (`ux-fluxo-funcional`)
|
||||
|
||||
- [ ] 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?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no menu lateral (sem menu horizontal duplicado no cabeçalho superior) 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?
|
||||
|
|
|
|||
|
|
@ -12,24 +12,21 @@ Guia de revisão e otimização de interfaces Vue 3 + Vuetify 3 no ecossistema A
|
|||
|
||||
---
|
||||
|
||||
## Perfil do Usuário
|
||||
## Perfil do Usuário (Resolução via `memorias-ia/modulo.yml`)
|
||||
|
||||
O público-alvo das interfaces é corporativo e diversificado em experiência técnica:
|
||||
O público-alvo e o domínio de negócio do módulo devem ser obtidos obrigatoriamente em `memorias-ia/modulo.yml` (`modulo-descricao` e `modulo-tipo`), abrangendo perfis operacionais, administrativos, técnicos e de gestão (pública ou privada).
|
||||
|
||||
- Gestores públicos e ambientais
|
||||
- Técnicos de campo
|
||||
- Consultores ambientais
|
||||
- Operadores administrativos
|
||||
|
||||
**Premissa central**: o usuário não tem familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
**Premissa central**: o usuário é especialista no seu domínio de negócio, mas não tem obrigação de ter familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores Institucional
|
||||
## Paleta de Cores Institucional (Conforme `rules/estilos-design-system.md`)
|
||||
|
||||
Cor base: `#688C00` (verde floresta). Três escalas derivadas: **Verde floresta** (primária), **Âmbar terroso** (apoio/aviso), **Cinza musgo** (neutros). Semânticas independentes para garantir reconhecimento universal.
|
||||
A seleção do Design System depende do módulo identificado em `memorias-ia/modulo.yml` (ver `rules/estilos-design-system.md`):
|
||||
- **Estilo Floreta (Iniciativa Privada / Verde Floresta `#688C00`):** tokens `--cor-eli-*` detalhados nas tabelas abaixo.
|
||||
- **Estilo Betha (Governo / Setor Público `#007bff` e Header `#343a40`):** tokens governamentais documentados em `rules/estilos-design-system.md`.
|
||||
|
||||
### Escala primária — Verde floresta
|
||||
### Escala primária — Estilo Floreta (Verde floresta `#688C00`)
|
||||
|
||||
| Token | Hex | Stop | Uso |
|
||||
|---|---|---|---|
|
||||
|
|
@ -115,11 +112,11 @@ Para cada elemento da interface, avaliar:
|
|||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova licença"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova solicitação"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] Rótulos (`label`), botões, títulos, tooltips de 1 frase e toasts de 1 frase **omitem ponto final (`.`)** e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir condicionante?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 condicionantes"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir etapa?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 pendências"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Labels e placeholders são descritivos (ex.: `"Buscar por razão social ou CNPJ"` vs `"Buscar"`)?
|
||||
- [ ] Ícones acompanham texto quando a ação não é universalmente reconhecível?
|
||||
- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
|
||||
|
|
@ -127,9 +124,9 @@ Para cada elemento da interface, avaliar:
|
|||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
- [ ] O olho do usuário é guiado para a ação principal primeiro (apenas **1 ação primária sólida** `variant="flat"` por vista/seção)?
|
||||
- [ ] Ações primárias usam `--cor-eli-primaria` (`#688C00`) com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações primárias usam o token `primary` do tema com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações destrutivas (Excluir, Limpar, Remover) na tela principal são discretas (`variant="text"` ou em `v-menu`), reservando o botão vermelho sólido exclusivamente para o **modal de confirmação**?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 condicionantes"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 etapas"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Em cards de indicadores/KPIs, o valor numérico é o protagonista (`20px–24px`, peso `600/700`) e o rótulo é secundário (`12px`, cor neutra)?
|
||||
- [ ] Títulos de seção (`h1`–`h3`) têm tamanho contido (`16px–20px`, peso `600`) sem roubar espaço do conteúdo?
|
||||
|
||||
|
|
@ -250,7 +247,7 @@ Após implementar:
|
|||
|
||||
- [ ] A tela renderiza sem erros no console?
|
||||
- [ ] Os estados (vazio, carregando, erro, com dados) estão todos cobertos?
|
||||
- [ ] A paleta de cores está coerente com a base `#688C00`?
|
||||
- [ ] A paleta de cores está coerente com o Design System do módulo (`rules/estilos-design-system.md`: Estilo Floreta `#688C00` ou Estilo Betha `#007bff` / `#343a40` conforme `memorias-ia/modulo.yml`)?
|
||||
- [ ] Todos os tokens usados estão definidos na escala primária, de apoio ou neutra?
|
||||
- [ ] Nenhuma cor está hardcoded no CSS do componente (usar `var(--token, #fallback)`)?
|
||||
- [ ] Tokens novos têm fallback hardcoded? (ex: `var(--cor-eli-primaria-suave, #BFC99C)`)?
|
||||
|
|
@ -270,8 +267,8 @@ Após implementar:
|
|||
| *Card-ception* (`v-card` com borda dentro de `v-card` + `v-divider`) | Separar seções por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`) |
|
||||
| Pilha de `Rótulo: Valor` com mesmo peso visual | Omitir rótulos óbvios pelo formato ou combinar em frase; destacar o dado e suavizar o rótulo |
|
||||
| Modal com scroll extenso ou 6+ campos espremidos | Converter em *Side Sheet* (5–8 campos), página dedicada ou *Full-Screen Dialog*, mantendo Cabeçalho e Rodapé fixos (*pinned*) |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir condicionante?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir condicionante]` |
|
||||
| *Title Case* anglófono (`"Nova Licença"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova licença"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir etapa?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir etapa]` |
|
||||
| *Title Case* anglófono (`"Nova Solicitação"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova solicitação"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"Máx."`) | Escrever por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Máximo"`) e usar algarismos (`3`, `10 MB`) |
|
||||
| Tabela com 10–15+ colunas estreitas | Consolidar colunas correlatas em célula de 2 linhas (Título + metadado secundário) |
|
||||
| Ícone inflado a seco (`48px–64px`) | Ícone `20px–24px` dentro de badge arredondado (`40px–48px`) com fundo pastel |
|
||||
|
|
|
|||
|
|
@ -64,6 +64,17 @@ if [ -d "$ROOT_DIR/.agent/rules" ] && [ -d "$ROOT_DIR/.agent/global/rules" ]; th
|
|||
fi
|
||||
fi
|
||||
|
||||
# Verificar agnosticismo polimórfico do .agent em relação ao modulo-id hospedeiro
|
||||
HOST_MODULO_ID=$(grep -E "^modulo-id:" "$ROOT_DIR/memorias-ia/modulo.yml" 2>/dev/null | awk '{print $2}' || true)
|
||||
if [ -n "$HOST_MODULO_ID" ] && [ -d "$ROOT_DIR/.agent/rules" ]; then
|
||||
if grep -rnI -i "$HOST_MODULO_ID" "$ROOT_DIR/.agent/rules" "$ROOT_DIR/.agent/skills" "$ROOT_DIR/.agent/agents" >/dev/null 2>&1; then
|
||||
echo -e " ${VERMELHO}✗${RESET} Violação de agnosticismo: modulo-id '$HOST_MODULO_ID' encontrado hardcoded dentro de .agent/."
|
||||
TOTAL_ERROS=$((TOTAL_ERROS + 1))
|
||||
else
|
||||
echo -e " ${VERDE}✓${RESET} Agnosticismo verificado: zero menções ao módulo hospedeiro (${NEGRITO}$HOST_MODULO_ID${RESET}) em .agent/."
|
||||
fi
|
||||
fi
|
||||
|
||||
# 1. Validar memorias-ia/modulo.yml (Pilar 6 - Identidade)
|
||||
MODULO_YML="$ROOT_DIR/memorias-ia/modulo.yml"
|
||||
echo -e "\n${NEGRITO}[1/6] Identidade do Módulo (memorias-ia/modulo.yml)${RESET}"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue