TRDR Design — skill /trdr-design

Skill do Claude Code para criar, iterar e padronizar interfaces com o Design System TRDR. É um fork TRDR do impeccable (Apache-2.0, Paul Bakaus) — veja NOTICE.md.

O que ela faz

Três capacidades, uma skill:

1. Craft — gera UI production-grade já dentro da identidade TRDR (dark-first, brand cyan #00D4FF), com ~25 comandos de design (craft, shape, critique, audit, polish, bolder, quieter, animate, colorize, layout, …).
2. Live mode — seleção de elementos no browser e geração de variantes hot-swapped via dev server (HMR), com a barra de UI na marca TRDR.
3. Normalize — aplica o DS TRDR a projetos existentes via motor determinístico (detector de violações + codemod css-tree/Babel), com o LLM tratando só os casos ambíguos. Substitui e supera a antiga /trdr-ds, que degradava em projetos grandes.

Instalação

Uma vez por desenvolvedor, no Claude Code:

npx trdr-design-install@latest

Instala a skill em ~/.claude/skills/trdr-design/ (escopo de usuário). Para instalar só no projeto atual (.claude/skills/), use:

npx trdr-design-install@latest --project

O instalador copia a skill e roda npm install --omit=optional no destino para resolver as dependências core (css-tree, htmlparser2, …). O Live mode (iteração no browser) precisa do puppeteer, que é opcional — instale sob demanda:

cd ~/.claude/skills/trdr-design && npm install puppeteer

Reinicie o Claude Code após instalar. Depois, use /trdr-design para criar/iterar UI ou /trdr-design normalize para aplicar o DS TRDR a um projeto existente.

Estrutura

trdr-design/
├── skills/trdr-design/      # a skill (SKILL.md, reference/, scripts/, data/, references/, templates/)
├── tools/rebrand.mjs        # rebrand determinístico impeccable → trdr-design (auditável)
├── tests/                   # fixtures e E2E
├── LICENSE                  # Apache-2.0
└── NOTICE.md                # cadeia de atribuição

Identidade TRDR

Brand cyan #00D4FF · verde alta #00FF60 · vermelho baixa · superfície #141519 · neutros dark. Fonte de verdade: Design Hub.

Status

Em desenvolvimento. Veja STATUS.md.