@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.
- package/agents/hefesto-argos.md +51 -237
- package/agents/hefesto-athena.md +59 -339
- package/agents/hefesto-hermes.md +39 -71
- package/bin/install.js +105 -69
- package/hooks/hefesto-check-update.cjs +32 -11
- package/hooks/hefesto-statusline.cjs +8 -17
- package/hooks/hefesto-workflow.cjs +68 -0
- package/package.json +12 -2
- package/skills/hefesto-context/SKILL.md +59 -26
- package/skills/hefesto-debug/SKILL.md +54 -0
- package/skills/hefesto-design/SKILL.md +133 -143
- package/skills/hefesto-execute/SKILL.md +133 -0
- package/skills/hefesto-init/SKILL.md +94 -59
- package/skills/hefesto-init/references/api.md +116 -0
- package/skills/hefesto-init/references/cli.md +91 -0
- package/skills/hefesto-init/references/mobile.md +69 -0
- package/skills/hefesto-init/references/web.md +246 -0
- package/skills/hefesto-new-feature/SKILL.md +75 -41
- package/skills/hefesto-security/SKILL.md +89 -0
- package/skills/hefesto-security/references/boundaries-and-bypasses.md +152 -0
- package/skills/hefesto-security/references/secrets-detection.md +121 -0
- package/skills/hefesto-security/references/severity-and-judgment.md +176 -0
- package/skills/hefesto-simplify/SKILL.md +82 -0
- package/templates/TPL-CLAUDE.md +54 -0
- package/templates/TPL-CONFIG.json +19 -0
- package/templates/TPL-DESIGN.md +305 -0
- package/templates/{FEATURE.md → TPL-FEATURE.md} +13 -6
- package/templates/TPL-PROJECT.md +50 -0
- package/templates/{RECON.md → TPL-RECON.md} +10 -4
- package/templates/{RESEARCH.md → TPL-RESEARCH.md} +15 -15
- package/templates/TPL-SECURITY.md +42 -0
- package/templates/TPL-SIMPLIFY.md +40 -0
- package/templates/{STATE.md → TPL-STATE.md} +0 -6
- package/templates/TPL-VERDICT.md +34 -0
- package/skills/hefesto-design/data/animations.csv +0 -21
- package/skills/hefesto-design/data/anti-patterns.csv +0 -41
- package/skills/hefesto-design/data/charts.csv +0 -26
- package/skills/hefesto-design/data/colors.csv +0 -108
- package/skills/hefesto-design/data/components.csv +0 -31
- package/skills/hefesto-design/data/google-fonts.csv +0 -56
- package/skills/hefesto-design/data/icons.csv +0 -23
- package/skills/hefesto-design/data/landing-pages.csv +0 -28
- package/skills/hefesto-design/data/products.csv +0 -46
- package/skills/hefesto-design/data/spacing.csv +0 -16
- package/skills/hefesto-design/data/styles.csv +0 -53
- package/skills/hefesto-design/data/typography.csv +0 -41
- package/skills/hefesto-design/data/ux-rules.csv +0 -61
- package/skills/hefesto-design/references/accessibility.md +0 -335
- package/skills/hefesto-design/references/aesthetics.md +0 -343
- package/skills/hefesto-design/references/anti-patterns.md +0 -107
- package/skills/hefesto-design/references/checklist.md +0 -66
- package/skills/hefesto-design/references/color-psychology.md +0 -203
- package/skills/hefesto-design/references/component-specs.md +0 -318
- package/skills/hefesto-design/references/polish.md +0 -339
- package/skills/hefesto-design/references/token-architecture.md +0 -394
- package/skills/hefesto-design/references/ux-rules.md +0 -349
- package/skills/hefesto-design/scripts/__pycache__/audit.cpython-314.pyc +0 -0
- package/skills/hefesto-design/scripts/__pycache__/contrast.cpython-314.pyc +0 -0
- package/skills/hefesto-design/scripts/__pycache__/core.cpython-314.pyc +0 -0
- package/skills/hefesto-design/scripts/__pycache__/design_system.cpython-314.pyc +0 -0
- package/skills/hefesto-design/scripts/__pycache__/search.cpython-314.pyc +0 -0
- package/skills/hefesto-design/scripts/__pycache__/validate_tokens.cpython-314.pyc +0 -0
- package/skills/hefesto-design/scripts/audit.py +0 -450
- package/skills/hefesto-design/scripts/contrast.py +0 -195
- package/skills/hefesto-design/scripts/core.py +0 -155
- package/skills/hefesto-design/scripts/design_system.py +0 -311
- package/skills/hefesto-design/scripts/search.py +0 -235
- package/skills/hefesto-design/scripts/validate_tokens.py +0 -274
- package/skills/hefesto-update/SKILL.md +0 -34
- package/templates/DESIGN.md +0 -137
- package/templates/PROJECT.md +0 -28
- package/templates/ROADMAP.md +0 -23
- package/templates/VERDICT.md +0 -52
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: hefesto-context
|
|
3
|
-
description:
|
|
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
|
|
15
|
-
├──
|
|
16
|
-
├──
|
|
17
|
-
├──
|
|
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
|
-
|
|
21
|
-
|
|
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
|
|
55
|
-
|
|
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
|
-
-
|
|
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
|
-
##
|
|
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
|
-
-
|
|
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
|
-
##
|
|
104
|
+
## config.json
|
|
83
105
|
|
|
84
|
-
|
|
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-
|
|
95
|
-
- `/hefesto-
|
|
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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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:
|
|
10
|
+
disable-model-invocation: false
|
|
16
11
|
---
|
|
17
12
|
|
|
18
|
-
|
|
13
|
+
# Hefesto Design
|
|
19
14
|
|
|
20
|
-
Cria
|
|
15
|
+
Cria o contrato visual do projeto (`.hefesto/DESIGN.md`) ou aplica durante implementação.
|
|
21
16
|
|
|
22
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
27
|
+
---
|
|
38
28
|
|
|
39
|
-
|
|
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
|
-
|
|
31
|
+
### Pré-requisitos
|
|
46
32
|
|
|
47
|
-
|
|
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
|
-
|
|
35
|
+
### Fase 1 — Discovery
|
|
52
36
|
|
|
53
|
-
|
|
37
|
+
Coletar informações com o usuário:
|
|
54
38
|
|
|
55
|
-
1.
|
|
56
|
-
2.
|
|
57
|
-
3.
|
|
58
|
-
4.
|
|
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
|
-
|
|
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
|
-
|
|
50
|
+
### Fase 2 — Geração
|
|
63
51
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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
|
-
|
|
66
|
+
### Fase 3 — Gravação
|
|
70
67
|
|
|
71
|
-
1.
|
|
72
|
-
2.
|
|
73
|
-
3.
|
|
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
|
-
|
|
72
|
+
---
|
|
76
73
|
|
|
77
|
-
|
|
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
|
-
|
|
76
|
+
Ativado automaticamente quando o modelo detecta tarefa visual (criar componente, CSS, Tailwind, estilizar, layout, tema, cores, fontes).
|
|
85
77
|
|
|
86
|
-
|
|
78
|
+
### Protocolo
|
|
87
79
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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
|
-
|
|
93
|
-
python3 {path}/search.py "{query}" --domain {domain} -f json
|
|
95
|
+
---
|
|
94
96
|
|
|
95
|
-
|
|
96
|
-
python3 {path}/contrast.py "{fg}" "{bg}"
|
|
97
|
+
## Modo Atualização
|
|
97
98
|
|
|
98
|
-
|
|
99
|
-
python3 {path}/search.py --list-domains
|
|
100
|
-
```
|
|
99
|
+
Invocado com `/hefesto-design update`.
|
|
101
100
|
|
|
102
|
-
|
|
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
|
-
|
|
105
|
-
- `"{domain} website design {year}"` (ex: "fintech dashboard design 2026")
|
|
106
|
-
- `"{aesthetic} UI examples"` (ex: "brutalist SaaS UI examples")
|
|
107
|
+
---
|
|
107
108
|
|
|
108
|
-
|
|
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
|
-
|
|
111
|
+
Fórmula para verificar contraste de cores inline, sem dependências externas:
|
|
115
112
|
|
|
116
|
-
|
|
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
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
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
|
-
|
|
134
|
+
Verificar obrigatoriamente:
|
|
125
135
|
|
|
126
|
-
|
|
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
|
-
|
|
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
|
-
|
|
144
|
+
## Anti-patterns
|
|
135
145
|
|
|
136
|
-
|
|
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
|
-
|
|
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
|
-
|
|
160
|
+
---
|
|
144
161
|
|
|
145
|
-
|
|
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
|
-
|
|
164
|
+
Validar antes de apresentar o contrato ao usuário:
|
|
151
165
|
|
|
152
|
-
|
|
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
|
-
|
|
176
|
+
---
|
|
155
177
|
|
|
156
178
|
## Regras
|
|
157
179
|
|
|
158
|
-
-
|
|
159
|
-
-
|
|
160
|
-
-
|
|
161
|
-
-
|
|
162
|
-
-
|
|
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
|