@the-bearded-bear/claude-craft 8.8.1 → 8.8.2

package/Dev/i18n/pt/UIUX/commands/design-tokens.md

@@ -1,33 +1,33 @@
 ---
 description: Definição de Design Tokens
-argument-hint: [arguments]
+argument-hint: [argumentos]
 ---
 
 # Definição de Design Tokens
 
-Você é um Lead UI Designer. Você deve definir os design tokens para um design system coerente e manutenível.
+Você é um Designer de IU Líder. Você deve definir design tokens para um sistema de design coerente e de fácil manutenção.
 
 ## Argumentos
 $ARGUMENTS
 
 Argumentos:
 - Tipo de tokens a definir: colors, typography, spacing, shadows, all
-- (Opcional) Cor primária base: #HEXCODE
+- (Opcional) Cor primária de base: #HEXCODE
 - (Opcional) Modo: light, dark, both
 
 Exemplo: `/uiux:design-tokens all #3B82F6 both`
 
-## Modo Plano
+## Modo de Planejamento
 
-> **O modo plano é obrigatório.** Antes de executar, Claude ativa o modo plano para analisar o código impactado, propor um plano de implementação e aguardar sua validação antes de realizar qualquer alteração.
+> **O modo de planejamento é obrigatório.** Antes de executar, Claude ativa o modo de planejamento para analisar o código impactado, propor um plano de implementação e aguardar a sua validação antes de fazer qualquer alteração.
 
 ## MISSÃO
 
 ### Etapa 1: Analisar o contexto
 
-- Stack frontend (React, Vue, Tailwind, CSS vars...)
-- Design system existente?
-- Guia de marca fornecida?
+- Stack de front-end (React, Vue, Tailwind, CSS vars...)
+- Sistema de design existente?
+- Diretrizes de marca fornecidas?
 
 ### Etapa 2: Definir os tokens
 
@@ -46,36 +46,80 @@ Formato: CSS Custom Properties
 
 ### Paleta Semântica
 
-#### Primary (Ação principal)
-| Token | Light | Dark | Uso |
-|-------|-------|------|-----|
+#### Primário (Ação principal)
+| Token | Claro | Escuro | Uso |
+|-------|-------|--------|-----|
 | --color-primary-50 | #eff6ff | #1e3a5f | Fundo sutil |
+| --color-primary-100 | #dbeafe | #1e40af | Fundo |
+| --color-primary-200 | #bfdbfe | #1d4ed8 | Borda |
+| --color-primary-300 | #93c5fd | #2563eb | Borda hover |
+| --color-primary-400 | #60a5fa | #3b82f6 | Ícone |
 | --color-primary-500 | #3b82f6 | #60a5fa | Texto |
 | --color-primary-600 | #2563eb | #93c5fd | Texto hover |
+| --color-primary-700 | #1d4ed8 | #bfdbfe | - |
+| --color-primary-800 | #1e40af | #dbeafe | - |
+| --color-primary-900 | #1e3a5f | #eff6ff | - |
+
+#### Sucesso
+| Token | Claro | Escuro |
+|-------|-------|--------|
+| --color-success-50 | #f0fdf4 | #14532d |
+| --color-success-500 | #22c55e | #4ade80 |
+| --color-success-700 | #15803d | #86efac |
 
-#### Success / Warning / Error
-{Escalas similares}
+#### Aviso
+| Token | Claro | Escuro |
+|-------|-------|--------|
+| --color-warning-50 | #fffbeb | #78350f |
+| --color-warning-500 | #f59e0b | #fbbf24 |
+| --color-warning-700 | #b45309 | #fcd34d |
 
-#### Neutral (Texto, Fundos)
-| Token | Light | Dark | Uso |
-|-------|-------|------|-----|
+#### Erro
+| Token | Claro | Escuro |
+|-------|-------|--------|
+| --color-error-50 | #fef2f2 | #7f1d1d |
+| --color-error-500 | #ef4444 | #f87171 |
+| --color-error-700 | #b91c1c | #fca5a5 |
+
+#### Neutro (Texto, Fundos)
+| Token | Claro | Escuro | Uso |
+|-------|-------|--------|-----|
 | --color-neutral-0 | #ffffff | #0a0a0a | Fundo |
-| --color-neutral-500 | #737373 | #a3a3a3 | Texto muted |
+| --color-neutral-50 | #fafafa | #171717 | Fundo sutil |
+| --color-neutral-100 | #f5f5f5 | #262626 | Fundo atenuado |
+| --color-neutral-200 | #e5e5e5 | #404040 | Borda |
+| --color-neutral-300 | #d4d4d4 | #525252 | Borda hover |
+| --color-neutral-400 | #a3a3a3 | #737373 | Placeholder |
+| --color-neutral-500 | #737373 | #a3a3a3 | Texto atenuado |
+| --color-neutral-600 | #525252 | #d4d4d4 | Texto secundário |
+| --color-neutral-700 | #404040 | #e5e5e5 | Texto primário |
+| --color-neutral-800 | #262626 | #f5f5f5 | Texto de ênfase |
 | --color-neutral-900 | #171717 | #fafafa | Texto forte |
 
-### Tokens Alias (Semânticos)
+### Tokens de Alias (Semânticos)
 ```css
 /* Fundos */
 --color-bg-primary: var(--color-neutral-0);
 --color-bg-secondary: var(--color-neutral-50);
+--color-bg-tertiary: var(--color-neutral-100);
+--color-bg-inverse: var(--color-neutral-900);
 
-/* Textos */
+/* Texto */
 --color-text-primary: var(--color-neutral-900);
 --color-text-secondary: var(--color-neutral-600);
+--color-text-muted: var(--color-neutral-500);
+--color-text-inverse: var(--color-neutral-0);
 
 /* Bordas */
 --color-border-default: var(--color-neutral-200);
+--color-border-hover: var(--color-neutral-300);
 --color-border-focus: var(--color-primary-500);
+
+/* Estados */
+--color-state-focus: var(--color-primary-500);
+--color-state-error: var(--color-error-500);
+--color-state-success: var(--color-success-500);
+--color-state-warning: var(--color-warning-500);
 ```
 
 ──────────────────────────────────────────────────────────────
@@ -84,39 +128,159 @@ Formato: CSS Custom Properties
 
 ### Famílias
 ```css
---font-family-sans: 'Inter', system-ui, sans-serif;
---font-family-mono: 'JetBrains Mono', monospace;
+--font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
+--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
 ```
 
 ### Tamanhos (base 16px)
-| Token | Tamanho | Line Height | Uso |
-|-------|---------|-------------|-----|
-| --font-size-xs | 0.75rem | 1rem | Labels |
-| --font-size-base | 1rem | 1.5rem | Body |
-| --font-size-4xl | 2.25rem | 2.5rem | H1 |
+| Token | Tamanho | Altura da linha | Uso |
+|-------|---------|-----------------|-----|
+| --font-size-xs | 0.75rem (12px) | 1rem | Rótulos, badges |
+| --font-size-sm | 0.875rem (14px) | 1.25rem | Corpo pequeno |
+| --font-size-base | 1rem (16px) | 1.5rem | Corpo |
+| --font-size-lg | 1.125rem (18px) | 1.75rem | Texto de destaque |
+| --font-size-xl | 1.25rem (20px) | 1.75rem | H4 |
+| --font-size-2xl | 1.5rem (24px) | 2rem | H3 |
+| --font-size-3xl | 1.875rem (30px) | 2.25rem | H2 |
+| --font-size-4xl | 2.25rem (36px) | 2.5rem | H1 |
+| --font-size-5xl | 3rem (48px) | 1 | Display |
+
+### Pesos
+| Token | Valor | Uso |
+|-------|-------|-----|
+| --font-weight-normal | 400 | Corpo |
+| --font-weight-medium | 500 | Rótulos, nav |
+| --font-weight-semibold | 600 | Subtítulos |
+| --font-weight-bold | 700 | Títulos |
+
+### Alturas de Linha
+```css
+--line-height-none: 1;
+--line-height-tight: 1.25;
+--line-height-snug: 1.375;
+--line-height-normal: 1.5;
+--line-height-relaxed: 1.625;
+--line-height-loose: 2;
+```
+
+### Espaçamento entre Letras
+```css
+--letter-spacing-tighter: -0.05em;
+--letter-spacing-tight: -0.025em;
+--letter-spacing-normal: 0;
+--letter-spacing-wide: 0.025em;
+--letter-spacing-wider: 0.05em;
+```
 
 ──────────────────────────────────────────────────────────────
-📐 ESPAÇAMENTOS
+📐 ESPAÇAMENTO
 ──────────────────────────────────────────────────────────────
 
 ### Escala (base 4px)
 | Token | Valor | Pixels | Uso |
 |-------|-------|--------|-----|
+| --spacing-0 | 0 | 0px | - |
+| --spacing-px | 1px | 1px | Bordas |
+| --spacing-0.5 | 0.125rem | 2px | Compacto |
 | --spacing-1 | 0.25rem | 4px | XS |
+| --spacing-1.5 | 0.375rem | 6px | - |
+| --spacing-2 | 0.5rem | 8px | S |
+| --spacing-2.5 | 0.625rem | 10px | - |
+| --spacing-3 | 0.75rem | 12px | - |
 | --spacing-4 | 1rem | 16px | M (base) |
+| --spacing-5 | 1.25rem | 20px | - |
+| --spacing-6 | 1.5rem | 24px | L |
 | --spacing-8 | 2rem | 32px | XL |
+| --spacing-10 | 2.5rem | 40px | - |
+| --spacing-12 | 3rem | 48px | 2XL |
+| --spacing-16 | 4rem | 64px | 3XL |
+| --spacing-20 | 5rem | 80px | - |
+| --spacing-24 | 6rem | 96px | 4XL |
 
 ──────────────────────────────────────────────────────────────
-🌗 SOMBRAS / ⭕ RAIOS / ⏱️ TRANSIÇÕES
+🌗 SOMBRAS
 ──────────────────────────────────────────────────────────────
 
-{Tabelas similares com tokens}
+| Token | Valor | Uso |
+|-------|-------|-----|
+| --shadow-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) | Sutil |
+| --shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1) | Cards |
+| --shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1) | Dropdowns |
+| --shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1) | Modais |
+| --shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1) | Diálogos |
+| --shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) | Sobreposições |
+| --shadow-inner | inset 0 2px 4px 0 rgb(0 0 0 / 0.05) | Campos |
+| --shadow-none | none | Redefinir |
+
+──────────────────────────────────────────────────────────────
+⭕ RAIOS (Border Radius)
+──────────────────────────────────────────────────────────────
+
+| Token | Valor | Uso |
+|-------|-------|-----|
+| --radius-none | 0 | Arestas vivas |
+| --radius-sm | 0.125rem (2px) | Sutil |
+| --radius-md | 0.375rem (6px) | Botões, campos |
+| --radius-lg | 0.5rem (8px) | Cards |
+| --radius-xl | 0.75rem (12px) | Modais |
+| --radius-2xl | 1rem (16px) | Cards grandes |
+| --radius-full | 9999px | Pílulas, avatares |
+
+──────────────────────────────────────────────────────────────
+⏱️ TRANSIÇÕES
+──────────────────────────────────────────────────────────────
+
+### Durações
+| Token | Valor | Uso |
+|-------|-------|-----|
+| --duration-75 | 75ms | Micro |
+| --duration-100 | 100ms | Rápido |
+| --duration-150 | 150ms | Padrão |
+| --duration-200 | 200ms | Normal |
+| --duration-300 | 300ms | Lento |
+| --duration-500 | 500ms | Ênfase |
+
+### Easings
+```css
+--ease-linear: linear;
+--ease-in: cubic-bezier(0.4, 0, 1, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+```
+
+### Transições Compostas
+```css
+--transition-none: none;
+--transition-all: all 150ms ease-out;
+--transition-colors: color, background-color, border-color 150ms ease-out;
+--transition-opacity: opacity 150ms ease-out;
+--transition-shadow: box-shadow 150ms ease-out;
+--transition-transform: transform 150ms ease-out;
+```
+
+──────────────────────────────────────────────────────────────
+📦 Z-INDEX
+──────────────────────────────────────────────────────────────
 
+| Token | Valor | Uso |
+|-------|-------|-----|
+| --z-0 | 0 | Base |
+| --z-10 | 10 | Elevado |
+| --z-20 | 20 | Dropdowns |
+| --z-30 | 30 | Fixo ao rolar |
+| --z-40 | 40 | Fixo |
+| --z-50 | 50 | Fundo do modal |
+| --z-60 | 60 | Modal |
+| --z-70 | 70 | Popover |
+| --z-80 | 80 | Toast |
+| --z-90 | 90 | Tooltip |
+| --z-max | 9999 | Máximo |
 ```
 
 ### Etapa 3: Exportar
 
-Gerar arquivos:
-- `tokens.css` - CSS Custom Properties
-- `tokens.json` - Formato Style Dictionary
-- `tailwind.config.js` - Extensão Tailwind (se aplicável)
+Gerar os arquivos:
+- `tokens.css` — CSS Custom Properties
+- `tokens.json` — formato Style Dictionary
+- `tailwind.config.js` — extensão do Tailwind (se aplicável)

package/Dev/i18n/pt/UIUX/commands/user-flow.md

@@ -1,32 +1,32 @@
 ---
 description: Design de Fluxo de Usuário
-argument-hint: [arguments]
+argument-hint: [argumentos]
 ---
 
 # Design de Fluxo de Usuário
 
-Você é um Especialista UX/Ergonomia. Você deve projetar um fluxo de usuário (user flow) completo e otimizado.
+Você é um Especialista em UX/Ergonomia. Você deve projetar um fluxo de usuário completo e otimizado.
 
 ## Argumentos
 $ARGUMENTS
 
 Argumentos:
 - Nome do fluxo a projetar
-- (Opcional) Persona alvo
+- (Opcional) Persona-alvo
 - (Opcional) Restrições específicas
 
-Exemplo: `/uiux:user-flow "Registro de usuário"` ou `/uiux:user-flow "Checkout" persona:"Usuário mobile" restricao:"< 30 segundos"`
+Exemplo: `/uiux:user-flow "Cadastro de usuário"` ou `/uiux:user-flow "Checkout" persona:"Usuário mobile" constraint:"< 30 segundos"`
 
-## Modo Plano
+## Modo de Planejamento
 
-> **O modo plano é recomendado.** Claude ativa o modo plano para estruturar a abordagem, identificar dependências e apresentar uma estratégia de geração antes de criar artefatos.
+> **O modo de planejamento é recomendado.** Claude ativa o modo de planejamento para estruturar a abordagem, identificar dependências e apresentar uma estratégia de geração antes de criar os artefatos.
 
 ## MISSÃO
 
 ### Etapa 1: Definir o contexto
 
 - Objetivo do usuário
-- Persona alvo
+- Persona-alvo
 - Contexto de uso (dispositivo, ambiente)
 - Restrições de negócio
 
@@ -48,8 +48,8 @@ Versão: 1.0
 | Atributo | Valor |
 |----------|-------|
 | Nome | {persona} |
-| Papel | {papel} |
-| Nível técnico | Iniciante / Intermediário / Especialista |
+| Função | {função} |
+| Nível técnico | Iniciante / Intermediário / Avançado |
 | Dispositivo principal | Mobile / Desktop / Ambos |
 | Contexto | {ambiente de uso} |
 
@@ -57,38 +57,195 @@ Versão: 1.0
 > "{O que o usuário quer realizar}"
 
 ### Objetivo de negócio
-> "{O que o negócio quer obter}"
+> "{O que a empresa quer alcançar}"
+
+### Restrições
+- Tempo máximo: {X segundos/minutos}
+- Etapas máximas: {Y}
+- Dispositivo: {restrições técnicas}
+- Offline: Sim / Não
+
+──────────────────────────────────────────────────────────────
+🗺️ VISÃO GERAL
+──────────────────────────────────────────────────────────────
+
+```
+┌──────┐    ┌──────┐    ┌──────┐    ┌──────┐    ┌──────┐
+│Início│───▶│Etapa1│───▶│Etapa2│───▶│Etapa3│───▶│ Fim  │
+└──────┘    └──────┘    └──────┘    └──────┘    └──────┘
+                │            │
+                ▼            ▼
+           ┌────────┐   ┌────────┐
+           │Erro A  │   │Erro B  │
+           └────────┘   └────────┘
+```
 
 ──────────────────────────────────────────────────────────────
 📋 FLUXO DETALHADO
 ──────────────────────────────────────────────────────────────
 
 ### Etapa 0: Gatilho
+
 **Ponto de entrada**: {Como o usuário chega}
+- Via: {menu / link / CTA / deep link}
+- Estado anterior: {autenticado / anônimo / dados existentes}
+- Pré-condições: {o que deve ser verdadeiro}
+
+---
 
 ### Etapa 1: {Nome da etapa}
+
 **Tela**: {Nome da tela}
 **Objetivo**: {O que o usuário deve fazer}
 
 #### Ações disponíveis
-| Ação | Elemento UI | Resultado |
-|------|-------------|-----------|
-| Principal | {botão/link} | Passa para etapa 2 |
+| Ação | Elemento de IU | Resultado |
+|------|----------------|-----------|
+| Primária | {botão/link} | Avança para a etapa 2 |
+| Secundária | {botão/link} | {alternativa} |
+| Terciária | {link} | {outra opção} |
+
+#### Dados necessários
+| Campo | Tipo | Validação | Obrigatório |
+|-------|------|-----------|-------------|
+| {campo} | {tipo} | {regras} | Sim/Não |
 
 #### Feedback do sistema
 | Evento | Feedback | Tipo |
 |--------|----------|------|
+| Foco no campo | {feedback} | Visual |
 | Erro de validação | {mensagem} | Inline |
+| Sucesso | {feedback} | Toast/inline |
+
+#### Pontos de atenção
+- ⚠️ {possível ponto de atrito}
+- 💡 {oportunidade de melhoria}
+
+---
+
+### Etapa 2: {Nome da etapa}
+
+{Mesma estrutura...}
+
+---
+
+### Etapa N: Confirmação (Fim)
+
+**Tela**: {Confirmação / Sucesso}
+**Estado final**: {O que foi realizado}
+
+#### Conteúdo
+- Mensagem de sucesso
+- Resumo da ação
+- Próximos passos sugeridos
+
+#### Próximas ações
+| Ação | Destino |
+|------|---------|
+| CTA Primário | {próximo fluxo} |
+| Voltar | {painel/lista} |
+| Compartilhar | {se aplicável} |
 
 ──────────────────────────────────────────────────────────────
-📊 MÉTRICAS & KPIs
+⚠️ CAMINHOS ALTERNATIVOS
 ──────────────────────────────────────────────────────────────
 
+### Erro: {Tipo de erro}
+
+**Gatilho**: {O que causa o erro}
+**Tela**: {Inline / Modal / Página dedicada}
+
+#### Mensagem de erro
+```
+Título: {Título claro}
+Descrição: {Explicação do problema}
+Ação: {Como resolver}
+```
+
+#### Opções do usuário
+- Tentar novamente: {comportamento}
+- Modificar: {retornar à etapa X}
+- Abandonar: {estado salvo?}
+
+---
+
+### Abandono: Salvamento de estado
+
+**Comportamento**:
+- Rascunho salvo automaticamente
+- Duração de retenção: {X dias}
+- Notificação de lembrete: Sim / Não
+
+---
+
+### Caso extremo: {Descrição}
+
+**Situação**: {Contexto particular}
+**Comportamento**: {Adaptação do fluxo}
+
+──────────────────────────────────────────────────────────────
+📊 MÉTRICAS E KPIs
+──────────────────────────────────────────────────────────────
+
+### Objetivos quantitativos
+
 | Métrica | Objetivo | Medição |
 |---------|----------|---------|
 | Tempo de conclusão | < {X} seg | Time-on-task |
-| Taxa de conclusão | > {Y}% | Funnel analytics |
+| Taxa de conclusão | > {Y}% | Funil analítico |
+| Taxa de erro | < {Z}% | Error rate |
 | Número de cliques | ≤ {N} | Click tracking |
+| Pontuação de satisfação | > {S}/5 | Pesquisa pós-tarefa |
+
+### Pontos de medição
+
+| Etapa | Evento a rastrear |
+|-------|-------------------|
+| Entrada | `flow_started` |
+| Etapa 1 | `step_1_completed` |
+| Etapa 2 | `step_2_completed` |
+| Sucesso | `flow_completed` |
+| Abandono | `flow_abandoned` com `last_step` |
+| Erro | `flow_error` com `error_type` |
+
+──────────────────────────────────────────────────────────────
+🧠 ERGONOMIA
+──────────────────────────────────────────────────────────────
+
+### Carga cognitiva
+
+| Etapa | Complexidade | Justificativa |
+|-------|-------------|---------------|
+| 1 | Baixa | {1-2 ações simples} |
+| 2 | Média | {formulário curto} |
+| 3 | Baixa | {somente confirmação} |
+
+### Princípios aplicados
+
+| Princípio | Aplicação |
+|-----------|-----------|
+| Divulgação progressiva | {como} |
+| Valores padrão | {quais} |
+| Validação inline | {quando} |
+| Salvamento automático | {frequência} |
+
+──────────────────────────────────────────────────────────────
+♿ ACESSIBILIDADE
+──────────────────────────────────────────────────────────────
+
+### Navegação por teclado
+- Ordem de tabulação: {sequência lógica}
+- Links de salto: {se formulário longo}
+- Gestão do foco: {na mudança de etapa}
+
+### Leitor de tela
+- Anúncio de etapa: "Etapa X de Y"
+- Erros: aria-live="assertive"
+- Progresso: aria-describedby
+
+### Tempo
+- Sem limite de tempo automático
+- Se houver atraso: extensível ou desativável
 
 ──────────────────────────────────────────────────────────────
 ✅ CHECKLIST DE VALIDAÇÃO
@@ -96,18 +253,24 @@ Versão: 1.0
 
 ### UX
 - [ ] Objetivo do usuário claro
-- [ ] Etapas mínimas necessárias
+- [ ] Mínimo de etapas necessárias
 - [ ] Feedback em cada ação
 - [ ] Caminhos de erro documentados
+- [ ] Abandono com salvamento
+
+### Mensurabilidade
+- [ ] KPIs definidos
+- [ ] Eventos de rastreamento listados
+- [ ] Objetivos quantificados
 
 ### Acessibilidade
 - [ ] Navegação por teclado
-- [ ] Anúncios SR
+- [ ] Anúncios para leitor de tela
 - [ ] Sem limites de tempo
 ```
 
 ### Etapa 3: Validação
 
-- Revisão com stakeholders
-- Teste de usuário (5 usuários mín)
-- Iteração baseada em feedback
+- Revisão com as partes interessadas
+- Teste com usuários (mínimo 5 usuários)
+- Iteração com base no feedback