Para IA
O que um agente precisa saber para escrever interface na identidade da TRDR sem supervisao. A skill /trdr-design automatiza tudo isto, mas as regras valem para qualquer ferramenta.
A skill
A /trdr-design instala o TRDR UI no projeto, detecta violacao de design system por analise deterministica de codigo e corrige o que da para corrigir por codemod. O agente so entra onde a maquina nao tem certeza.
npx trdr-design-install@latest/trdr-design install # poe o TRDR UI no projeto, detectando a stack
/trdr-design normalize # encontra e corrige violacao de token
/trdr-design craft # cria interface nova ja na identidadeRegras absolutas
Nao reimplemente o que ja existe
Antes de escrever um botao, um campo ou um modal, procure no catalogo. Reimplementar um primitivo e a causa numero um de drift visual entre projetos.
Nunca use a paleta padrao do Tailwind
bg-slate-900, text-gray-400 e parentes nao existem neste design system. So valem as chaves declaradas no tema do @trdr/tokens.
Semantico, nunca primitivo
Use bg-card, text-muted-foreground, border-border. Um primitivo como --color-neutral-800 na interface e violacao: ele nao acompanha a troca de tema nem a evolucao da marca.
O cyan nao e fundo de botao
O ciano #00D4FF e a cor de acao da marca e e o que o alias bg-primary resolve. Foco, selecao, link e icone usam content-brand e ring-ring.
Verde e vermelho sao de trading
Alta e baixa de preco usam context-trading-up e context-trading-down. Sucesso e erro de interface usam content-success e content-error. Trocar os dois confunde o operador.
Numero e mono
Preco, quantidade, percentual e horario usam font-mono. Numero em fonte proporcional muda de largura a cada tick e a tabela inteira treme.
Sem travessao, sem emoji
Em qualquer texto do produto ou de codigo. Icone e Material Symbols, nunca emoji.
Contexto para o agente
Cole isto no CLAUDE.md ou no arquivo de contexto do projeto. Os endpoints sao publicos e tem CORS aberto, entao a ferramenta pode busca-los direto.
# Design system
Este projeto usa o TRDR UI. Antes de criar qualquer componente de interface,
consulte o catalogo: ha 57 componentes prontos.
- Catalogo: https://trdr.mrocontent.com.br/v2/components.json
- Tokens: https://trdr.mrocontent.com.br/tokens.json
- Tema: https://trdr.mrocontent.com.br/theme.css
Import: import { Button } from "@trdr/ui/button"
Regras:
1. Nao reimplemente componente que ja existe no catalogo.
2. Nunca use a paleta padrao do Tailwind (bg-slate-*, text-gray-*).
3. Use token semantico (bg-card, text-muted-foreground), nunca primitivo.
4. bg-primary e o cyan da marca. Foco e link usam ring-ring e text-content-brand.
5. context-trading-up e down sao preco. content-success e error sao interface.
6. Numero usa font-mono.
7. Sem travessao e sem emoji. Icone e Material Symbols.