Minha Marca

# Kit de design · Minha Marca

Padrão **Simples**, paleta **Âmbar & Petróleo**, acabamento **Nenhum**, tipografia **Inter**, neutros
**Tinta azulada**. Gerado em 26/10/2026 pelo brand design kit.

## O que tem aqui

| Caminho | Para que serve |
| ------- | -------------- |
| `README.md` | Como instalar e usar o kit |
| `.claude/skills/brand-design/SKILL.md` | Skill da marca: identidade, tokens, estilo, tipografia e proibições |
| `.claude/skills/ux-laws/SKILL.md` | Skill das leis de UX como regras do projeto |
| `.claude/commands/design-da-marca.md` | Atalho /design-da-marca para a skill brand-design |
| `.claude/commands/leis-de-ux.md` | Atalho /leis-de-ux para a skill ux-laws |
| `.claude/settings.json` | Liga os hooks SessionStart e PostToolUse |
| `.claude/hooks/design/design.config.json` | Limites e leis ligadas (lido pelo verificador) |
| `.claude/hooks/design/design-rules.mjs` | As regras de design (JavaScript puro, sem dependência) |
| `.claude/hooks/design/check-design.mjs` | Verificador: varredura, hook e resumo para o agente |
| `.claude/hooks/design/design-rules.test.mjs` | Testes das regras (node --test) |
| `.claude/hooks/design/check-design.test.mjs` | Testes do verificador: hook, varredura e resumo (node --test) |
| `design/tokens.css` | Tokens em CSS puro, claro e escuro |
| `design/tailwind.css` | Tokens + tema do Tailwind v4 (bg-primary, text-foreground…) |
| `design/reference.css` | Referência do padrão Simples e do acabamento Nenhum |

## Como instalar num projeto

1. **Copie a pasta `.claude/` para a raiz do projeto.** Se o projeto já tiver um
   `.claude/settings.json`, junte o bloco `hooks` deste com o de lá em vez de sobrescrever.
2. **Copie os tokens**:
   - Tailwind v4: `design/tailwind.css` para `src/`, importado logo depois de `@import 'tailwindcss';`.
   - CSS puro: `design/tokens.css`.
3. **Confira o Node**: os hooks são JavaScript puro (`.mjs`), sem dependência; basta o Node
   **22 ou mais novo** (`node --version`). Não há nada para instalar.
4. **Ajuste o escopo** em `.claude/hooks/design/design.config.json`: `scan.dirs` (padrão `src`)
   e `scan.tokenFiles` (onde cor crua é permitida).

## Como funciona

- **Skills** (`.claude/skills/`, nomes em inglês): `brand-design` ensina a marca ao agente;
  `ux-laws` ensina as leis de UX como regras concretas.
- **Atalhos em português** (`.claude/commands/`): chame pelo nome em inglês (`/brand-design`,
  `/ux-laws`) ou em português (`/design-da-marca`, `/leis-de-ux`); os dois fazem o mesmo.
- **Hook `SessionStart`**: no início de toda sessão, o resumo das regras entra no contexto.
- **Hook `PostToolUse`**: depois de cada `Edit`/`Write`, o arquivo é conferido. Violação de nível
  erro volta para o agente com linha e dica, e ele corrige antes de seguir.

Rodar à mão ou no CI:

```bash
node .claude/hooks/design/check-design.mjs         # sai com código 1 se houver erro
node --test ".claude/hooks/design/*.test.mjs"     # testes das regras e do verificador
```

Sugestão de script no `package.json`:

```json
"check:design": "node .claude/hooks/design/check-design.mjs"
```

## Regras ativas

- `brand/no-pure-black-white` (erro) — Preto puro e branco puro são proibidos pela marca.
- `brand/tokens-only` (erro) — Cor só por token. Cor crua (hex, rgb, hsl, oklch) ou paleta padrão do Tailwind fica fora da marca.
- `brand/no-arbitrary-values` (aviso) — Valor arbitrário de cor, raio, sombra ou fonte foge da escala do design.
- `hick/nav-items` (aviso) — Menu com opções demais aumenta o tempo de decisão.
- `hick/select-options` (aviso) — Select com opções demais obriga a ler a lista inteira.
- `fitts/target-size` (erro) — Alvo de clique ou toque pequeno demais.
- `jakob/clickable-non-interactive` (erro) — Elemento não interativo com clique: não recebe foco, não responde a teclado e não parece clicável.
- `jakob/anchor-without-href` (erro) — Link sem destino: não abre em nova aba, não aparece para leitor de tela como link.
- `jakob/placeholder-as-label` (aviso) — Campo só com placeholder: o rótulo some ao digitar.
- `miller/ungrouped-fields` (aviso) — Formulário longo sem grupos sobrecarrega a memória de trabalho.
- `von-restorff/single-primary` (aviso) — Ação primária demais na mesma tela: quando tudo se destaca, nada se destaca.
- `uniform-connectedness/choice-group` (aviso) — Opções do mesmo grupo soltas, sem contorno comum.
- `tesler/autocomplete` (aviso) — Campo comum sem autocomplete: a pessoa digita o que o navegador já sabe.
- `tesler/input-type` (aviso) — Tipo de campo genérico: no celular abre o teclado errado e não valida.