@lugom.io/hefesto 0.3.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/agents/hefesto-argos.md +51 -237
  2. package/agents/hefesto-athena.md +59 -339
  3. package/agents/hefesto-hermes.md +39 -71
  4. package/bin/install.js +105 -69
  5. package/hooks/hefesto-check-update.cjs +32 -11
  6. package/hooks/hefesto-statusline.cjs +8 -17
  7. package/hooks/hefesto-workflow.cjs +68 -0
  8. package/package.json +12 -2
  9. package/skills/hefesto-context/SKILL.md +59 -26
  10. package/skills/hefesto-debug/SKILL.md +54 -0
  11. package/skills/hefesto-design/SKILL.md +133 -143
  12. package/skills/hefesto-execute/SKILL.md +133 -0
  13. package/skills/hefesto-init/SKILL.md +94 -59
  14. package/skills/hefesto-init/references/api.md +116 -0
  15. package/skills/hefesto-init/references/cli.md +91 -0
  16. package/skills/hefesto-init/references/mobile.md +69 -0
  17. package/skills/hefesto-init/references/web.md +246 -0
  18. package/skills/hefesto-new-feature/SKILL.md +75 -41
  19. package/skills/hefesto-security/SKILL.md +89 -0
  20. package/skills/hefesto-security/references/boundaries-and-bypasses.md +152 -0
  21. package/skills/hefesto-security/references/secrets-detection.md +121 -0
  22. package/skills/hefesto-security/references/severity-and-judgment.md +176 -0
  23. package/skills/hefesto-simplify/SKILL.md +82 -0
  24. package/templates/TPL-CLAUDE.md +54 -0
  25. package/templates/TPL-CONFIG.json +19 -0
  26. package/templates/TPL-DESIGN.md +305 -0
  27. package/templates/{FEATURE.md → TPL-FEATURE.md} +13 -6
  28. package/templates/TPL-PROJECT.md +50 -0
  29. package/templates/{RECON.md → TPL-RECON.md} +10 -4
  30. package/templates/{RESEARCH.md → TPL-RESEARCH.md} +15 -15
  31. package/templates/TPL-SECURITY.md +42 -0
  32. package/templates/TPL-SIMPLIFY.md +40 -0
  33. package/templates/{STATE.md → TPL-STATE.md} +0 -6
  34. package/templates/TPL-VERDICT.md +34 -0
  35. package/skills/hefesto-design/data/animations.csv +0 -21
  36. package/skills/hefesto-design/data/anti-patterns.csv +0 -41
  37. package/skills/hefesto-design/data/charts.csv +0 -26
  38. package/skills/hefesto-design/data/colors.csv +0 -108
  39. package/skills/hefesto-design/data/components.csv +0 -31
  40. package/skills/hefesto-design/data/google-fonts.csv +0 -56
  41. package/skills/hefesto-design/data/icons.csv +0 -23
  42. package/skills/hefesto-design/data/landing-pages.csv +0 -28
  43. package/skills/hefesto-design/data/products.csv +0 -46
  44. package/skills/hefesto-design/data/spacing.csv +0 -16
  45. package/skills/hefesto-design/data/styles.csv +0 -53
  46. package/skills/hefesto-design/data/typography.csv +0 -41
  47. package/skills/hefesto-design/data/ux-rules.csv +0 -61
  48. package/skills/hefesto-design/references/accessibility.md +0 -335
  49. package/skills/hefesto-design/references/aesthetics.md +0 -343
  50. package/skills/hefesto-design/references/anti-patterns.md +0 -107
  51. package/skills/hefesto-design/references/checklist.md +0 -66
  52. package/skills/hefesto-design/references/color-psychology.md +0 -203
  53. package/skills/hefesto-design/references/component-specs.md +0 -318
  54. package/skills/hefesto-design/references/polish.md +0 -339
  55. package/skills/hefesto-design/references/token-architecture.md +0 -394
  56. package/skills/hefesto-design/references/ux-rules.md +0 -349
  57. package/skills/hefesto-design/scripts/__pycache__/audit.cpython-314.pyc +0 -0
  58. package/skills/hefesto-design/scripts/__pycache__/contrast.cpython-314.pyc +0 -0
  59. package/skills/hefesto-design/scripts/__pycache__/core.cpython-314.pyc +0 -0
  60. package/skills/hefesto-design/scripts/__pycache__/design_system.cpython-314.pyc +0 -0
  61. package/skills/hefesto-design/scripts/__pycache__/search.cpython-314.pyc +0 -0
  62. package/skills/hefesto-design/scripts/__pycache__/validate_tokens.cpython-314.pyc +0 -0
  63. package/skills/hefesto-design/scripts/audit.py +0 -450
  64. package/skills/hefesto-design/scripts/contrast.py +0 -195
  65. package/skills/hefesto-design/scripts/core.py +0 -155
  66. package/skills/hefesto-design/scripts/design_system.py +0 -311
  67. package/skills/hefesto-design/scripts/search.py +0 -235
  68. package/skills/hefesto-design/scripts/validate_tokens.py +0 -274
  69. package/skills/hefesto-update/SKILL.md +0 -34
  70. package/templates/DESIGN.md +0 -137
  71. package/templates/PROJECT.md +0 -28
  72. package/templates/ROADMAP.md +0 -23
  73. package/templates/VERDICT.md +0 -52
@@ -1,6 +1,12 @@
1
1
  ---
2
2
  name: hefesto-context
3
- description: Conhecimento sobre a estrutura e convenções do Hefesto. Use sempre que o projeto tiver um diretório .hefesto/, quando o usuário mencionar features, specs, stories, roadmap ou estado do projeto no contexto do Hefesto, ou quando precisar entender como o .hefesto/ organiza o desenvolvimento.
3
+ description: >
4
+ Conhecimento sobre estrutura e convenções do Hefesto (.hefesto/).
5
+ ATIVAR quando: projeto tem .hefesto/, usuário menciona feature/spec/story/roadmap/STATE.md/
6
+ PROJECT.md/config.json, qualquer skill hefesto-* precisa de contexto do sistema, ou tarefa
7
+ envolve IDs (FEAT-NNN, RES-NNN), status de features ou ciclo de desenvolvimento Hefesto.
8
+ user-invocable: false
9
+ disable-model-invocation: false
4
10
  ---
5
11
 
6
12
  # Hefesto Context
@@ -11,15 +17,14 @@ O Hefesto é um toolkit spec-driven + story-driven que organiza o desenvolviment
11
17
 
12
18
  ```
13
19
  .hefesto/
14
- ├── PROJECT.md # Visão, valor central, restrições do projeto
15
- ├── ROADMAP.md # Lista de features com status e progresso
16
- ├── STATE.md # Memória viva — posição atual, decisões, bloqueios (~80 linhas)
17
- ├── config.json # Configuração (counters de ID, runtime, preferências)
20
+ ├── PROJECT.md # Visão, valor central, restrições, convenções e features
21
+ ├── STATE.md # Memória entre sessões posição, decisões, bloqueios (~80 linhas)
22
+ ├── config.json # Configuração (projeto, plataforma, counters de ID)
23
+ ├── DESIGN.md # Contrato visual (opcional, /hefesto-design)
18
24
  ├── features/ # Documentos narrativos unificados
19
25
  │ └── FEAT-NNN-slug.md # Uma feature por arquivo
20
- ├── research/ # Pesquisas estruturadas
21
- └── RES-NNN-slug.md # Uma pesquisa por arquivo
22
- └── DESIGN.md # Contrato de design do projeto (projeto-level)
26
+ └── research/ # Pesquisas estruturadas
27
+ └── RES-NNN-slug.md # Uma pesquisa por arquivo
23
28
  ```
24
29
 
25
30
  ## Features
@@ -49,14 +54,38 @@ Cada feature é um documento narrativo que combina **spec** (O QUÊ) e **stories
49
54
  - `done` — completa e verificada
50
55
  - `blocked` — bloqueada por dependência
51
56
 
57
+ ## UX: Interação com o Usuário
58
+
59
+ - **Opções predefinidas** → sempre usar seletor interativo (não texto livre). Aplica-se a qualquer pergunta com respostas fixas: escolha de plataforma, confirmações sim/não, seleção entre alternativas, etc.
60
+ - **Inputs abertos** → texto livre. Aplica-se a: nome do projeto, descrição, valor central, prazo, perguntas-chave, etc.
61
+
62
+ ## Ciclo de Vida Completo
63
+
64
+ ```
65
+ init → (design) → new-feature → (research) → execute → validate → done
66
+ │ │ │ │ │ │
67
+ ▼ ▼ ▼ ▼ ▼ ▼
68
+ /hefesto /hefesto /hefesto athena /hefesto argos
69
+ -init -design -new-feature (agent) -execute (agent)
70
+
71
+ ├→ hermes (recon)
72
+ ├→ self-review inline
73
+ ├→ verification gate
74
+ │ └→ falha após retries → /hefesto-debug
75
+ ├→ /hefesto-simplify (pós)
76
+ ├→ /hefesto-security (pós)
77
+ └→ argos (QA loop, max 3x)
78
+ ```
79
+
52
80
  ## STATE.md
53
81
 
54
- Memória viva do projeto. Máximo ~80 linhas. Contém:
55
- - Posição atual (features feitas vs total)
82
+ Memória entre sessões. Máximo ~80 linhas. Contém:
83
+
84
+ - Posição atual (features feitas vs total, progresso)
56
85
  - Feature e fase ativa
57
86
  - Decisões recentes
58
87
  - Bloqueios
59
- - Informação de continuidade (última sessão, onde parou, como retomar)
88
+ - Continuidade (última sessão, onde parou, como retomar)
60
89
 
61
90
  ## Pesquisas
62
91
 
@@ -68,31 +97,35 @@ Pesquisas estruturadas ficam em `.hefesto/research/` com IDs `RES-NNN`. São exe
68
97
  - **Vinculação**: podem ser linked a features via campo `feature` no frontmatter
69
98
  - Antes de pesquisar algo novo, verificar se já existe pesquisa relevante em `.hefesto/research/`
70
99
 
71
- ## Design
72
-
73
- Contrato de design do projeto fica em `.hefesto/DESIGN.md` (projeto-level). Define direção estética, paleta de cores (60/30/10), tipografia (max 4 sizes, 2 weights), espaçamento (múltiplos de 4), copywriting e tokens de design. É criado via `/hefesto-design`.
100
+ ## Validação
74
101
 
75
- - **Escopo**: projeto-level (único por projeto)
76
- - **Status**: `draft` → `done`
77
- - **Profundidade**: `quick` (contrato básico), `standard` (completo com tokens), `deep` (com specs de componentes)
78
- - **6 Pilares de verificação**: Copywriting, Cores (60/30/10), Tipografia (≤4/2), Espaçamento (mult. 4), Hierarquia visual, Acessibilidade (AA)
79
- - **Scripts Python**: busca BM25 em bases curadas (estilos, cores, tipografia, UX), verificador de contraste WCAG, scanner de violações
80
- - **Referências**: 8 guides em `.claude/skills/hefesto-design/references/` (estética, tokens, componentes, UX, a11y, cores, checklist, anti-padrões)
102
+ Após implementar features ou fases, delegue ao agente `hefesto-argos` para avaliação independente. O tester lê a spec, lê o código com olhar fresco (isolamento epistêmico), cria testes e retorna um veredicto estruturado (`approved` / `approved-with-notes` / `needs-work`). Delegue passando: Feature ID, fase(s) implementada(s) e paths dos arquivos alterados.
81
103
 
82
- ## Validação
104
+ ## config.json
83
105
 
84
- Após implementar features ou fases, delegue ao agente `hefesto-argos` para avaliação independente. O tester a spec, o código com olhar fresco (isolamento epistêmico), cria testes e retorna um veredicto estruturado (`approved` / `approved-with-notes` / `needs-work`). Se o projeto tiver `.hefesto/DESIGN.md`, Argos também executa auditoria visual dos 6 pilares (score /24) usando scripts automatizados. Delegue passando: Feature ID, fase(s) implementada(s) e paths dos arquivos alterados.
106
+ Metadados e contadores do projeto. Sempre leia `.hefesto/config.json` para valores atuais. Estrutura canônica em `.hefesto/templates/TPL-CONFIG.json`. Seções: `project`, `feature`, `research`, `design`, `verification`. O campo `project.language` define o idioma dos artefatos (default: `pt-BR`); `project.lang` define a linguagem de programação.
85
107
 
86
108
  ## Outputs
87
109
 
88
110
  Outputs reais (código, documentos, manifestos) vão para o projeto (src/, docs/, etc.). O `.hefesto/` apenas rastreia o que foi produzido e onde foi colocado.
89
111
 
112
+ ## Hooks
113
+
114
+ - **hefesto-statusline.cjs** (StatusLine) — Exibe `⚒ HEFESTO | modelo | dir | contexto%` na statusline
115
+ - **hefesto-check-update.cjs** (SessionStart) — Verifica versão nova no npm ao iniciar sessão
116
+ - **hefesto-workflow.cjs** (PreToolUse) — Avisa quando Write/Edit é usado sem feature ativa
117
+
90
118
  ## Skills disponíveis
91
119
 
92
120
  - `/hefesto-init` — Inicializa .hefesto/ no projeto
93
- - `/hefesto-new-feature` — Cria nova feature
94
- - `/hefesto-update` — Atualiza o Hefesto
95
- - `/hefesto-design` — Cria/atualiza contrato de design do projeto
121
+ - `/hefesto-new-feature` — Cria nova feature (com gate de validação)
122
+ - `/hefesto-execute` — Executa implementação de feature (decomposição, verificação, QA loop)
123
+ - `/hefesto-debug` — Debugging sistemático em 4 fases (causa raiz → padrão → hipótese → fix)
124
+ - `/hefesto-design` — Cria contrato visual do projeto (cores, tipografia, componentes, tokens CSS)
125
+ - `/hefesto-security` — Auditoria de segurança (OWASP, secrets, boundaries)
126
+ - `/hefesto-simplify` — Simplificação e reuso de código (pós-implementação)
96
127
  - `hefesto-athena` — Agente de pesquisa estruturada (delegação automática)
97
- - `hefesto-argos` — Agente de teste e validação (delegação após implementação)
128
+ - `hefesto-argos` — Agente de teste e validação (delegação após implementação, suporta QA loop)
98
129
  - `hefesto-hermes` — Agente batedor de codebase (reconhecimento antes de implementar)
130
+
131
+ > **Nota:** Skills com `/` são invocadas diretamente pelo usuário. Agents sem `/` (athena, argos, hermes) são delegados automaticamente via subagent dispatch durante a execução — não são slash commands.
@@ -0,0 +1,54 @@
1
+ ---
2
+ name: hefesto-debug
3
+ description: >
4
+ Debugging sistemático: investigar causa raiz antes de corrigir. 4 fases, máximo 3 tentativas.
5
+ ATIVAR quando: "bug", "erro", "quebrou", "não funciona", "debugar", "regressão",
6
+ "parou de funcionar", "tá dando erro", ou quando um comando/teste falha repetidamente
7
+ durante execução de outra tarefa.
8
+ user-invocable: true
9
+ disable-model-invocation: false
10
+ argument-hint: '[descrição do problema]'
11
+ ---
12
+
13
+ # Hefesto Debug
14
+
15
+ Debugging sistemático que impõe disciplina: investigar antes de corrigir. Sem investigação, cada "tentativa" empilha patches frágeis que mascaram a causa real. Este workflow força o caminho correto: entender primeiro, corrigir depois.
16
+
17
+ ## Fase 1 — Causa Raiz (OBRIGATÓRIA)
18
+
19
+ 1. **Reproduzir**: rodar o comando/teste que falha, ler output COMPLETO (não só última linha)
20
+ 2. **Contexto**: `git diff`, `git log -5`, arquivos no fluxo do erro, spec da feature ativa (se houver)
21
+ 3. **Cadeia de erro**: sintoma → função → input → origem do input (rastrear para trás)
22
+ 4. **Output**: "A causa provável é [X] porque [evidência Y]. Manifesta em [Z], origina em [W]."
23
+
24
+ Sinais de que está pulando investigação:
25
+
26
+ - Propor solução antes de traçar o fluxo de dados
27
+ - "Não entendo completamente mas..." — se não entende, não pode corrigir
28
+ - Cada fix revela problema novo em lugar diferente → sinal arquitetural, pare e reavalie
29
+
30
+ ## Fase 2 — Análise de Padrões
31
+
32
+ 1. **Recorrência**: git log por fixes similares. Bug recorrente = problema estrutural
33
+ 2. **Profundidade**: módulo isolado ou atravessa camadas? Fix cria problemas em outro lugar?
34
+ 3. **Impacto**: módulos/features afetados, testes existentes, consumidores
35
+
36
+ ## Fase 3 — Teste de Hipóteses
37
+
38
+ 1. Formular 1-3 hipóteses específicas e refutáveis: "Se [causa], quando [teste], deveria [resultado]"
39
+ 2. Testar com mínima intervenção: logging, teste focado, UMA variável por vez
40
+ 3. Confirmada → Fase 4. Refutada → reformular. Todas refutadas → voltar à Fase 1
41
+
42
+ ## Fase 4 — Fix
43
+
44
+ 1. **Implementar fix mínimo**: causa raiz, não sintoma. Uma mudança por vez
45
+ 2. **Verificar**: comando original, `verification_commands` do config.json, regressões
46
+ 3. **Se falhar**: voltar à Fase 3 com hipótese refinada. Reverter, não empilhar
47
+ 4. **Após 3 tentativas**: PARAR. Listar premissas e tentativas. Sugerir revisão da abordagem
48
+ 5. **Se funcionar**: atualizar STATE.md, considerar teste de regressão
49
+
50
+ ## Integração com Hefesto
51
+
52
+ - **Feature ativa**: ler spec para comportamento esperado, fix consistente com requisitos
53
+ - **Verification commands**: usar de config.json na Fase 4
54
+ - **Argos**: se bug durante `/hefesto-execute`, o debug é pausa no workflow — retomar após resolver
@@ -1,194 +1,184 @@
1
1
  ---
2
2
  name: hefesto-design
3
3
  description: >
4
- Cria ou atualiza o contrato de design do projeto (.hefesto/DESIGN.md).
5
- Define direção estética, paleta de cores (60/30/10), tipografia (max 4 sizes, 2 weights),
6
- espaçamento (mult. 4), copywriting e tokens de design. Pesquisa referências visuais
7
- do domínio e aplica regras UX consolidadas. Inclui scripts Python para busca BM25
8
- em base de dados de estilos, cores, tipografia e regras UX, além de verificadores
9
- de contraste WCAG e scanner de violações no código.
10
-
11
- Usar quando: definir identidade visual do projeto, criar design system,
12
- escolher paleta/tipografia/espaçamento, antes de implementar features com UI,
13
- ou quando o design atual parece genérico.
4
+ Contrato visual do projeto (.hefesto/DESIGN.md) — criação e enforcement do design system.
5
+ ATIVAR quando: .hefesto/DESIGN.md existe E tarefa envolve CSS, cores, fontes, componentes UI,
6
+ layout, Tailwind, styled-components, tema, dark mode, shadcn components ou qualquer decisão visual.
7
+ Também: /hefesto-design, "criar design", "paleta de cores", "design system", "identidade visual",
8
+ "look and feel", prototipar UI, fazer landing page.
14
9
  user-invocable: true
15
- disable-model-invocation: true
10
+ disable-model-invocation: false
16
11
  ---
17
12
 
18
- ## O que faz
13
+ # Hefesto Design
19
14
 
20
- Cria ou atualiza `.hefesto/DESIGN.md` — contrato de design do **projeto inteiro**. Cada valor no DESIGN.md é um **contrato vinculante**: se está escrito `color: #3b82f6`, o executor usa `#3b82f6`. Sem interpretação, sem "adaptar".
15
+ Cria o contrato visual do projeto (`.hefesto/DESIGN.md`) ou aplica durante implementação.
21
16
 
22
- 3 níveis de profundidade:
23
- - **quick** — contrato básico (direção estética, cores, tipografia, espaçamento, copywriting, anti-padrões)
24
- - **standard** — + referências visuais pesquisadas + tokens de design (3 camadas)
25
- - **deep** — + specs de componentes (atomic design) + prompts para ferramentas AI (v0.dev/Lovable/Bolt)
17
+ ## Princípio
26
18
 
27
- ## Como usar
19
+ O contrato visual deve ter **ponto de vista**. Cada decisão — fonte, cor, radius, shadow — deve ser uma escolha intencional que reflete o projeto, não um default seguro. Se o resultado parece que qualquer AI geraria, está errado. O teste: alguém olhando o design consegue adivinhar que tipo de projeto é?
28
20
 
29
- ```
30
- /hefesto-design # standard (default)
31
- /hefesto-design --depth quick # apenas contrato básico
32
- /hefesto-design --depth deep # inclui componentes e prompts AI
33
- ```
21
+ ## Detecção de Modo
34
22
 
35
- ## Mentalidade: contrato, não sugestão
23
+ 1. Se invocado como `/hefesto-design` → **Modo Criação**
24
+ 2. Se `/hefesto-design update` → **Modo Atualização**
25
+ 3. Se ativado automaticamente durante tarefa visual → **Modo Enforcement**
36
26
 
37
- Decisão vaga é pior que nenhuma decisão. O executor precisa de valores exatos (HEX, px, font-family), não "algo assim". Uma paleta "60/30/10 com tons de azul" é inútil — o executor precisa de `#0f172a`, `#1e293b`, `#3b82f6` com cada uso especificado.
27
+ ---
38
28
 
39
- O executor que consome o DESIGN.md trabalha em contexto isolado, sem memória da exploração. Ele precisa de:
40
- - **Valores exatos** — HEX, px, font-family, font-weight, line-height, border-radius
41
- - **Regras de uso** — quando usar cada cor, cada tamanho, cada peso
42
- - **Hierarquia clara** — o que é primário, secundário, terciário
43
- - **Restrições** — o que NUNCA fazer, anti-padrões específicos do projeto
29
+ ## Modo Criação
44
30
 
45
- ## Pré-requisitos
31
+ ### Pré-requisitos
46
32
 
47
- - `.hefesto/` existe (senão, sugerir `/hefesto-init`)
48
- - `PROJECT.md` existe (lê contexto do projeto)
49
- - Python 3.8+ disponível (para scripts)
33
+ Verificar se `.hefesto/` existe. Se não, sugerir `/hefesto-init`.
50
34
 
51
- ## O que fazer
35
+ ### Fase 1 — Discovery
52
36
 
53
- ### 1. Verificar estado
37
+ Coletar informações com o usuário:
54
38
 
55
- 1. Verificar que `.hefesto/` e `PROJECT.md` existem
56
- 2. Ler `.hefesto/PROJECT.md` para entender contexto, público-alvo, tom e valores
57
- 3. Se `.hefesto/DESIGN.md` existe: perguntar ao usuário (atualizar / recriar / cancelar)
58
- 4. Parse `--depth` (default: `standard`)
39
+ 1. **"Descreve teu projeto em uma frase"** — input aberto
40
+ 2. **"Quem é o público-alvo?"** input aberto
41
+ 3. **"Em 3 palavras, que sentimento quer provocar?"** — input aberto (ex: confiança, energia, sofisticação)
42
+ 4. **Referência visual?** — seletor: URL de site / Imagem local (print/screenshot) / Descrição textual / Múltiplas fontes / Nenhuma
43
+ - Se URL: ler com WebFetch ou browser para extrair padrões visuais (cores, tipografia, layout)
44
+ - Se imagem: ler com Read tool para analisar padrões visuais (cores, tipografia, layout, componentes)
45
+ - Se descrição: usar como guia estético
46
+ - Se múltiplas fontes: aceitar combinação de URLs, imagens e descrições. Consolidar padrões visuais de todas as fontes numa síntese coerente, resolvendo conflitos pelo que melhor reflete o discovery
59
47
 
60
- ### 2. Carregar referências
48
+ **Antes de gerar**: com base nas respostas, comprometer-se com uma direção estética clara. Não buscar equilíbrio — buscar personalidade. Uma cor dominante com acentos afiados supera paletas distribuídas uniformemente. Uma fonte com caráter supera uma fonte "segura". Documentar a direção escolhida e o porquê em 1-2 frases antes de iniciar a geração.
61
49
 
62
- Localizar via Glob os recursos da skill:
50
+ ### Fase 2 Geração
63
51
 
64
- ```
65
- Glob: **/hefesto-design/references/*.md
66
- Glob: **/hefesto-design/scripts/*.py
67
- ```
52
+ 1. Ler `.hefesto/templates/TPL-DESIGN.md` como guia de estrutura
53
+ 2. Gerar contrato **completo** — todas seções, todos componentes
54
+ 3. Cada valor é **exato**: HEX, px, font-family, CSS value. Zero ambiguidade
55
+ 4. Validar contrastes WCAG AA (ver seção Validação WCAG AA)
56
+ 5. Do's/Don'ts específicos deste projeto — se servem para qualquer projeto, são genéricos demais
57
+ 6. Validar contra Checklist de Qualidade (ver seção abaixo)
58
+ 7. Apresentar resumo para aprovação:
59
+ - Nome e descrição do design
60
+ - Paleta (brand + semantic)
61
+ - Tipografia (fonts + scale resumido)
62
+ - Filosofia (radius, shadows, spacing)
63
+ - 3 Do's e 3 Don'ts mais importantes
64
+ 8. Seletor: **Aprovar** / **Ajustar** (especificar o quê) / **Refazer** (novo discovery)
68
65
 
69
- Ler OBRIGATORIAMENTE antes de decidir:
66
+ ### Fase 3 Gravação
70
67
 
71
- 1. `aesthetics.md` — catálogo de 25+ estilos visuais com tipografia, paleta, uso
72
- 2. `ux-rules.md` regras UX por prioridade (WCAG, Material, Apple HIG)
73
- 3. `anti-patterns.md` — o que NUNCA fazer (40 anti-padrões com alternativas)
68
+ 1. Salvar `.hefesto/DESIGN.md`
69
+ 2. Atualizar `.hefesto/config.json` `design.status: "active"`
70
+ 3. Atualizar `.hefesto/STATE.md` com decisão
74
71
 
75
- Consultar conforme necessário:
72
+ ---
76
73
 
77
- 4. `color-psychology.md` — significados de cores por indústria e cultura
78
- 5. `token-architecture.md` — sistema de 3 camadas de tokens (standard+)
79
- 6. `component-specs.md` — specs de componentes com estados e a11y (deep)
80
- 7. `accessibility.md` — guia WCAG AA prático
81
- 8. `checklist.md` — 33 verificações pre-delivery
82
- 9. `polish.md` — micro-polish de interface (border radius, animações, sombras, hit areas)
74
+ ## Modo Enforcement
83
75
 
84
- ### 3. Explorar com scripts
76
+ Ativado automaticamente quando o modelo detecta tarefa visual (criar componente, CSS, Tailwind, estilizar, layout, tema, cores, fontes).
85
77
 
86
- Localizar scripts via Glob (`**/hefesto-design/scripts/*.py`) e executar:
78
+ ### Protocolo
87
79
 
88
- ```bash
89
- # Recomendação completa de design system
90
- python3 {path}/design_system.py "{keywords do projeto}" -f json
80
+ 1. Ler `.hefesto/config.json` → `design.status`
81
+ - Se `"none"` sair silenciosamente, sem output
82
+ - Se `"active"` prosseguir
83
+ 2. Ler `.hefesto/DESIGN.md`
84
+ 3. **Todas** decisões visuais usam valores do contrato:
85
+ - Cores → paleta declarada
86
+ - Fontes → font stack declarado
87
+ - Tamanhos → type scale declarado
88
+ - Espaçamento → scale declarado
89
+ - Componentes → specs declaradas (estados, variantes, dimensões)
90
+ - Radius, shadows → filosofia declarada
91
+ - Animações → motion tokens declarados (durations, easings)
92
+ 4. Se o contrato **não cobre** algo necessário → **propor extensão** ao usuário, não inventar
93
+ 5. Se o contrato é ambíguo em algum ponto → perguntar ao usuário
91
94
 
92
- # Busca por domínio específico
93
- python3 {path}/search.py "{query}" --domain {domain} -f json
95
+ ---
94
96
 
95
- # Verificar contraste WCAG
96
- python3 {path}/contrast.py "{fg}" "{bg}"
97
+ ## Modo Atualização
97
98
 
98
- # Listar domínios disponíveis
99
- python3 {path}/search.py --list-domains
100
- ```
99
+ Invocado com `/hefesto-design update`.
101
100
 
102
- ### 4. Pesquisar referências visuais (standard+)
101
+ 1. Ler `.hefesto/DESIGN.md` existente
102
+ 2. Perguntar o que quer ajustar (seletor: Cores / Tipografia / Componentes / Do's-Don'ts / Outro)
103
+ 3. Propor mudanças mantendo coerência com o restante do contrato
104
+ 4. Validar WCAG AA e checklist de qualidade
105
+ 5. Salvar com diff claro do que mudou
103
106
 
104
- Formular queries em **inglês** para maximizar cobertura:
105
- - `"{domain} website design {year}"` (ex: "fintech dashboard design 2026")
106
- - `"{aesthetic} UI examples"` (ex: "brutalist SaaS UI examples")
107
+ ---
107
108
 
108
- | Profundidade | Buscas web | Referências visuais |
109
- |--------------|------------|---------------------|
110
- | `quick` | 1-2 | 0-1 |
111
- | `standard` | 3-5 | 3-5 |
112
- | `deep` | 6-10 | 6+ |
109
+ ## Validação WCAG AA
113
110
 
114
- Para cada referência, registrar: URL, o que funciona, o que NÃO copiar.
111
+ Fórmula para verificar contraste de cores inline, sem dependências externas:
115
112
 
116
- ### 5. Derivar decisões do contexto
113
+ ```
114
+ Converter HEX para sRGB (0-1):
115
+ R = parseInt(hex.slice(1,3), 16) / 255
116
+ G = parseInt(hex.slice(3,5), 16) / 255
117
+ B = parseInt(hex.slice(5,7), 16) / 255
118
+
119
+ Linearizar cada canal:
120
+ Se C <= 0.03928 → C / 12.92
121
+ Senão → ((C + 0.055) / 1.055) ^ 2.4
122
+
123
+ Luminância relativa:
124
+ L = 0.2126 * R + 0.7152 * G + 0.0722 * B
125
+
126
+ Contrast ratio:
127
+ (L_lighter + 0.05) / (L_darker + 0.05)
117
128
 
118
- Cada decisão de design deve ser justificável:
119
- - **Público-alvo** nível de sofisticação visual
120
- - **Domínio** convenções do setor (fintech = confiança, saúde = calma, gaming = energia)
121
- - **Tom do projeto** → formal, casual, técnico, acessível
122
- - **Plataforma** → web, mobile, desktop, CLI
129
+ Thresholds WCAG AA:
130
+ >= 4.5:1 texto normal (< 18px regular, < 14px bold)
131
+ >= 3.0:1 texto grande (>= 18px regular, >= 14px bold)
132
+ ```
123
133
 
124
- #### Overrides por Contexto (standard+)
134
+ Verificar obrigatoriamente:
125
135
 
126
- Se o projeto tem áreas com necessidades visuais distintas:
136
+ - Text Primary sobre Background
137
+ - Text Primary sobre Surface
138
+ - Text Secondary sobre Background
139
+ - Text Secondary sobre Surface
140
+ - Semantic colors (Success, Warning, Error) sobre Background
127
141
 
128
- 1. Definir design system master para o contexto principal (>70% das telas)
129
- 2. Para cada contexto secundário, definir **apenas** o que difere
130
- 3. Cada override DEVE ter justificativa concreta
131
- 4. Max 3 contextos — mais que isso = sistema mal definido
132
- 5. Override não pode contradizer Anti-Padrões Bloqueados
142
+ ---
133
143
 
134
- ### 6. Validar com dados
144
+ ## Anti-patterns
135
145
 
136
- - Contraste AA: verificar todos os pares fg/bg com `contrast.py`
137
- - Legibilidade: font-size mínimo 14px body, 12px labels
138
- - Touch targets: mínimo 44x44px mobile
139
- - Espaçamento: todos os valores em múltiplos de 4
146
+ Erros comuns que o modelo comete ao gerar design systems. Detectar e corrigir antes de apresentar o contrato:
140
147
 
141
- ### 7. Gerar DESIGN.md
148
+ - **Contrato genérico** — Inter + blue primary + rounded 8px + subtle shadows = output padrão de qualquer modelo. Se o contrato parece genérico, refazer com mais personalidade baseada no discovery
149
+ - **Inconsistência interna** — cores declaradas na paleta mas não usadas nos componentes, ou cores nos componentes que não existem na paleta
150
+ - **Valores órfãos** — tokens mencionados em uma seção que não aparecem em outra
151
+ - **Filosofia ausente** — listar valores sem explicar o "porquê". O Overview existe para dar contexto narrativo a cada decisão
152
+ - **Componentes incompletos** — definir apenas default state, esquecendo hover, focus, active, disabled, error
153
+ - **Do's/Don'ts genéricos** — "Use cores consistentes" ou "Mantenha espaçamento uniforme" servem para qualquer projeto. Cada regra deve ser consequência direta da filosofia deste design específico
154
+ - **Spacing desalinhado** — base unit 8px mas usando valores como 10px, 15px, 22px que quebram o grid
155
+ - **Contrastes não verificados** — declarar paleta sem rodar WCAG AA nas combinações text-on-surface
156
+ - **Dark mode esquecido** — se o projeto suporta dark mode, todas surfaces e content colors precisam de variantes declaradas
157
+ - **Default seguro** — escolher a fonte, cor ou layout "que funciona para tudo" é escolher nada. Cada valor deve ser consequência da direção estética, não uma aposta conservadora
158
+ - **Convergência** — se o contrato resultante é indistinguível de outro projeto, falta personalidade. O discovery existe para diferenciar
142
159
 
143
- Usar o template de `.hefesto/templates/DESIGN.md`. Preencher os `{{PLACEHOLDER}}` com valores reais.
160
+ ---
144
161
 
145
- **Seções por profundidade:**
146
- - **quick**: §1-5 (Direção Estética, Cores, Tipografia, Espaçamento, Copywriting) + §10 (Anti-Padrões)
147
- - **standard**: quick + §6-8 (Referências Visuais, Tokens, Overrides por Contexto)
148
- - **deep**: standard + §9-10 (Specs de Componentes, Prompts AI)
162
+ ## Checklist de Qualidade
149
163
 
150
- Salvar em `.hefesto/DESIGN.md`. Atualizar `.hefesto/STATE.md` com referência ao design.
164
+ Validar antes de apresentar o contrato ao usuário:
151
165
 
152
- ## Princípio anti-genérico
166
+ - [ ] **Completude** — todas seções do TPL-DESIGN.md preenchidas com valores reais?
167
+ - [ ] **Coerência narrativa** — Overview reflete as decisões visuais? Do's/Don'ts derivam da filosofia?
168
+ - [ ] **Especificidade** — todos valores são copy-paste ready (HEX, px, font-family, CSS value)? Nenhum "algo como" ou "variação de"?
169
+ - [ ] **Consistência interna** — tokens usados nos componentes batem com a paleta? Font specs batem com o type scale?
170
+ - [ ] **WCAG AA** — todas combinações text-on-surface verificadas com a fórmula?
171
+ - [ ] **Componentes completos** — todos estados definidos (default, hover, active, focus, disabled)?
172
+ - [ ] **Anti-patterns** — nenhum item da lista acima presente no contrato?
173
+ - [ ] **Personalidade** — o contrato reflete o projeto, não um template genérico?
174
+ - [ ] **Memorabilidade** — alguém vendo apenas a paleta + tipografia consegue intuir o tipo de projeto?
153
175
 
154
- NUNCA convergir em escolhas comuns entre projetos. Inter/Roboto/Arial estão **BLOQUEADOS** como choices padrão. Purple gradients on white estão **BLOQUEADOS**. Cada design deve parecer genuinamente projetado para o contexto. Maximalist bold e minimalist refinado ambos funcionam — o ponto é intencionalidade, não intensidade.
176
+ ---
155
177
 
156
178
  ## Regras
157
179
 
158
- - Todos os textos no DESIGN.md em Português BR
159
- - Valores sempre exatos (HEX, px, font-family) nunca "tons de azul" ou "espaçamento generoso"
160
- - Contraste AA verificado para todos os pares de cores
161
- - Max 4 tamanhos de fonte, max 2 pesos
162
- - Espaçamento em múltiplos de 4
163
- - CTAs com verbos específicos, nunca genéricos ("Criar conta" não "Clique aqui")
164
- - Inter/Roboto/Arial bloqueados — justifique qualquer fonte genérica
165
- - Nunca invente URLs de referência
166
-
167
- ## Scripts disponíveis
168
-
169
- | Script | Comando | Quando usar |
170
- |--------|---------|-------------|
171
- | Design System | `design_system.py "keywords"` | Recomendação completa |
172
- | Busca | `search.py "query" --domain style` | Buscar estilos, cores, tipografia, etc. |
173
- | Contraste | `contrast.py "#hex1" "#hex2"` | Validar pares de cores (WCAG AA) |
174
- | Auditoria | `audit.py --design .hefesto/DESIGN.md --src src/` | Scan violações contra contrato |
175
- | Tokens | `validate_tokens.py --design .hefesto/DESIGN.md --src src/` | Verificar uso de tokens |
176
- | Domínios | `search.py --list-domains` | Ver domínios de busca |
177
-
178
- ## Domínios de busca
179
-
180
- | Domínio | CSV | Descrição |
181
- |---------|-----|-----------|
182
- | `style` | `styles.csv` | Direções estéticas e atributos visuais |
183
- | `color` | `colors.csv` | Paletas por indústria e mood |
184
- | `typography` | `typography.csv` | Font pairings e hierarquia |
185
- | `component` | `components.csv` | Specs de componentes e variantes |
186
- | `ux` | `ux-rules.csv` | Regras UX por prioridade |
187
- | `anti-pattern` | `anti-patterns.csv` | Anti-padrões com alternativas |
188
- | `spacing` | `spacing.csv` | Escalas de espaçamento |
189
- | `animation` | `animations.csv` | Presets de animação |
190
- | `product` | `products.csv` | Tipos de produto e recomendações de design |
191
- | `chart` | `charts.csv` | Gráficos e visualização de dados |
192
- | `landing` | `landing-pages.csv` | Seções de landing page |
193
- | `icon` | `icons.csv` | Icon sets por estilo e contexto |
194
- | `font` | `google-fonts.csv` | Google Fonts com metadata e pairings |
180
+ - **DESIGN.md em Inglês** — o contrato é consumido por agentes e código
181
+ - **Zero dependências**validação WCAG AA inline, sem scripts
182
+ - **Valores exatos** nunca gerar "algo entre X e Y" ou "variação de"
183
+ - **Font stack com fallbacks** sempre incluir fallback CSS completo (system fonts)
184
+ - **Filosofia explícita** border radius, shadows e spacing devem ter justificativa, não apenas valores