| name | branding-react |
| description | Aplica identidade visual do projeto em interfaces React/Next.js. Le configuracoes de toolkit.config.md e .github/brand/guide.txt. Use quando: criar telas, componentes, layouts ou qualquer UI que use a marca do projeto. |
| user-invocable | true |
Branding em React
Quando Usar
- Antes de criar qualquer tela com elementos visuais da marca
- Ao revisar componentes existentes para alinhamento de identidade
- Quando houver duvida sobre qual variacao de logo, simbolo ou icone usar
Passo 1 — Ler a Configuracao do Projeto
Antes de qualquer implementacao, leia:
toolkit.config.md — secao brand: para cores, tipografia e nome
.github/brand/guide.txt — regras de uso, dimensoes minimas e proibicoes
.github/brand/logos/ — verifique quais variacoes de logo existem
Se toolkit.config.md nao existir, pergunte ao usuario os valores de cor primaria, tipografia e assets antes de continuar.
Regras de Identidade (Lidas do Config)
- Estilo visual: definido em
brand.style do toolkit.config.md
- Cor primaria: definida em
brand.primary_color (usar como destaque; evitar como fundo dominante)
- Cor secundaria: definida em
brand.secondary_color
- Tipografia: definida em
brand.font_family
Tipografia
Use a fonte definida em brand.font_family do toolkit.config.md.
- Titulos: Bold/ExtraBold (peso 700-800)
- Subtitulos: SemiBold/Bold (peso 600-700)
- Corpo: Regular (peso 400)
- Alinhamento: sempre a esquerda (configuravel em guide.txt)
- Proibido: texto justificado ou alinhado a direita (salvo override em guide.txt)
- Texto pequeno: preferir Bold para legibilidade
Regras de Aplicacao
- Nunca rotacionar a marca
- Nunca distorcer proporcoes
- Nunca aplicar sombra ou degrade no logo/simbolo
- Nunca trocar cores fora da paleta definida em toolkit.config.md
- Garantir contraste minimo WCAG AA no fundo
Dimensoes Minimas
Consulte .github/brand/guide.txt para os valores definidos pelo projeto.
Valores padrao se nao configurados:
- Logo horizontal:
120px
- Logo vertical:
40px
- Favicon:
32px
Fluxo Recomendado
- Ler
toolkit.config.md — secao brand:
- Ler
.github/brand/guide.txt — regras e proibicoes
- Definir tema da tela (claro/escuro)
- Escolher variacao correta de logo/simbolo da pasta
brand/
- Aplicar tokens de cor e tipografia via CSS variables ou Tailwind
- Validar tamanho minimo e contraste
Output Esperado
- Interface React alinhada a identidade do projeto
- Todas as cores e fontes via tokens (sem hardcode nos componentes)
- Variacoes de logo corretas para cada contexto (fundo claro/escuro)
- Nenhuma violacao das proibicoes definidas em guide.txt