O que implementar / refatorar) faz?
A fonte da verdade é o repositório upstream https://github.com/Caho1/open-claude-ui (MIT): AGENTS.md (tokens, presets, componentes), code-examples/ e docs/v2/ (Claude Desktop 2.0, v2.37337.1). Os caminhos abaixo são relativos a esse repositório; clone ou abra-o junto ao seu projeto, ou leia-os no GitHub. Esta skill é o fluxo de trabalho; ela não duplica os valores. Leia references/v2-delta.md quando a tarefa envolver comportamento v2 (densidade, sidebar, esforço, movimento do compositor, fila offline).
0. Escolha a linha de base primeiro
- CDS 1.x (padrão em
code-examples/): acento clay quente, composer de 20px, raio de 8px, molas Framer Motion. - CDS 2.0 (docs/v2): canvas frio
#FCFCFB, composer de 12/14px, raio de 6/8px, controles de 24/32px, movimento CSS-compositor. Pergunte ou deduza qual usar; não os misture dentro de uma mesma superfície. Muitos tokens v2 (--cds-h-control,data-density) estão documentados em docs mas ainda não definidos emcode-examples/cds-theme.css: defina-os antes de usar.
1. Fluxo de trabalho
- Classifique a tarefa: novo componente / reformulação / refatoração / auditoria.
- Reutilize antes de escrever: verifique
code-examples/(30 módulos, índice em AGENTS.md §3) esrc/index.ts. Componha ou estenda; não redescubra. - Tokens: toda cor, raio, duração e suavização vem de uma variável
--cds-*ou alias Tailwind. Sem hex bruto, semmsad-hoc. - Movimento: escolha conforme a tabela abaixo.
- Guardas de borda (seção 3) para qualquer código de entrada, scroll ou iframe.
- Verifique (seção 4). Relate falhas literalmente.
2. Regras de decisão
Escolha de movimento
| Situação | Use |
|---|---|
| Hover/press/fade/skeleton/entrada, qualquer coisa que execute durante streaming | CSS puro + --cds-dur-* + --cds-ease-* (apenas compositor: transform, opacity, filter) |
| Liberação de drag, largura/altura que depende de velocidade ou layout | Framer Motion com um dos SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP |
| Movimento reduzido | Snap, nunca remova mudança de estado. Respeite prefers-reduced-motion |
Nunca transition: all, nunca linear, nunca números de mola codificados. Uma abreviação transition usando var(--cds-dur-*) morre silenciosamente se o token não estiver definido, então defina todos os cinco (60ms/120/200/300/450). |
Superfície e bordas: camadas com surface-0..3 + linha fina border-subtle (0.5px no v2). Apenas um traço: controles dentro de um contêiner com borda recebem border-none. Derive sombras com color-mix() a partir da superfície, não com preto alfa fixo. Nunca #000/#fff puro (exceto bloco de código #0d0d0c).
Densidade: dimensione controles a partir de --cds-h-control / --cds-radius / --cds-icon, nunca px fixo, para que Compacto e Confortável funcionem. Linhas compactas que ficam abaixo de 44px de área de toque usam o crescimento de toque com margem negativa (--cmp-chin-touch-grow).
Números: qualquer temporizador, contador, medidor de token, número de linha recebe tabular-nums.
Design de informação (postura v2): uma estação de trabalho, não um brinquedo de chat. Prefira linhas de status densas (28px, branch, PR, batimento cardíaco de execução) em vez de cartões espaçosos; exiba custo/risco explicitamente (níveis de esforço com aviso de Máximo, medidor de uso); trate a entrada do usuário como preciosa.
3. Guardas não negociáveis
- IME:
if (e.nativeEvent.isComposing || e.keyCode === 229) return;antes de qualquer Enter-para-enviar. - Scroll de streaming: não fixe automaticamente se
Date.now() - lastUserScroll < 150; fixe apenas a menos de 40px do final. - Iframes para HTML gerado por modelo: sandbox sem
allow-same-origin, postMessage verificado por origem, protegido pornavigator.userActivation. - Entrada sem perda: envios com falha/offline persistem (fila IndexedDB) e restauram ao recarregar.
- Imutabilidade do ambiente: janela de contexto / worktree / configuração MCP são congelados uma vez que uma sessão é criada; não construa UI que os edite durante a sessão.
- Sem assets binários (
.ttf/.otf/.mp3/.wav); apenas fontes do sistema e síntese Web Audio. - Tanto claro (
:root) quanto escuro (.dark) devem ser verificados. Sem gradientes roxos frios/neon (1.x). - Teclado: listas/grades usam foco rotativo (
useClaudeRovingFocus); diálogos prendem o foco.
4. Checklist de refatoração / auditoria
Grep pelo alvo em busca de: literais hex, rounded-[…px], transition-all, ease-linear, duration-[…], stiffness: fora dos presets, onKeyDown com Enter sem guarda IME, scrollTo/scrollTop = em código de streaming, allow-same-origin, bordas de 1px aninhadas em pais com borda. Substitua cada um pelo token/preset/guarda. Mantenha o comportamento; mude apenas a apresentação, a menos que solicitado.
Em seguida, execute, todos devem sair com 0:
npm run typecheck && npm run check:tokens && npm run build
Se você adicionou uma referência --cds-* ao AGENTS.md, check:tokens exige que ela exista em cds-theme.css.
5. Contrato de saída
Informe qual linha de base (1.x/2.0), quais módulos existentes foram reutilizados, quais tokens/presets foram escolhidos e porquê, e o resultado da verificação. Marque qualquer coisa não verificada (ex.: verificação visual de modo escuro) como não verificado.