refactor(ux): garantir agnosticismo polimorfico e exemplos neutros nos artefatos de UX

global/skills/ux/SKILL.md

@@ -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 |