feat(ux): incorporar diretrizes M3 de UX writing e organizacao de telas, modais e paineis

skills/ux/SKILL.md

@@ -112,12 +112,17 @@ Antes de alterar, entender o que já existe:
 
 Para cada elemento da interface, avaliar:
 
-#### Clareza
+#### Clareza e UX Writing (Material Design 3)
 
 - [ ] O propósito de cada elemento é óbvio sem instrução?
-- [ ] Labels e placeholders são descritivos? (ex: "Buscar por nome ou CPF" vs "Buscar")
+- [ ] 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"`)?
+- [ ] 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?
+- [ ] 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?
+- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
 
 #### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
 
@@ -140,6 +145,8 @@ Para cada elemento da interface, avaliar:
 - [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil?
 - [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
 - [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo?
+- [ ] A **Matriz de Superfícies M3** é respeitada (*Basic Dialog* restrito a confirmações críticas ou 3–4 campos rápidos; *Side Sheet* para formulários de 5–8 campos ou inspeção; `v-snackbar` para avisos passivos; formulários longos agrupados em blocos de até 4–6 campos)?
+- [ ] Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com botão fechar `X` nos painéis) e o **Rodapé de ações** permanecem **fixos (*pinned*)** caso o conteúdo central role?
 
 #### Feedback e estados
 
@@ -262,7 +269,10 @@ Após implementar:
 | Múltiplos botões sólidos (`primary`, `success`, `warning`) lado a lado | Pirâmide de ações: 1 primário `flat`, secundários `outlined`/`tonal` e terciários `text` |
 | *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 | Dividir em etapas ou usar drawer lateral |
+| 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 |
+| 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 |
 | Estilos inline em template | Usar `<style scoped>` com tokens CSS e fallback |