O que design-pass faz?
Alvo: $ARGUMENTS
Kit de ferramentas: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · Checklist: ${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. Linha de base (antes de tocar no código)
Certifique-se de que o servidor de desenvolvimento está rodando (inicie-o em segundo plano, se necessário; nunca execute uma build de produção) e então:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<porta> --pages <caminho> --widths 375,768,1440 --dark --out /tmp/design-pass/antes
2. Auditoria antes da correção
- Encontre cada componente que o alvo renderiza e todos os outros lugares que renderizam o mesmo padrão (use
grepem strings de classe e nomes de componentes). - Reutilize um componente primitivo existente (botão, cartão, modal, título de seção) antes de criar um novo. Se a mesma marcação aparecer 2+ vezes, extraia-a e reestilize uma vez.
- Construa exatamente o que foi solicitado. Nada de novas seções, badges, toggles ou animações, a menos que tenha sido pedido.
- Use apenas tokens do projeto. Se um valor não estiver na escala, use o passo mais próximo ou proponha um token (veja
design-ref).
3. Aplicar
Percorra o checklist: hierarquia, uma ação primária por visualização, escala de espaçamento, escala tipográfica, estados vazio/carregando/erro e inputs com ≥ 16 px no mobile.
4. Verificar
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<porta> --pages <caminho> --widths 375,768,1440 --dark --out /tmp/design-pass/depois
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/antes /tmp/design-pass/depois
- Leia as planilhas "depois" para cada largura nos modos claro e escuro. Observe os PNGs de diff para mudanças não intencionais fora do alvo.
- Verificação de escala de cinza: execute novamente uma largura com
--inject "document.documentElement.style.filter='grayscale(1)'". - Em seguida, execute o conjunto completo de larguras do
ui-audituma vez, e typecheck + lint (sem build). - Se o projeto mantiver um arquivo Figma sincronizado com o código, atualize os frames correspondentes na mesma tarefa.
Critérios de saída
- Sem rolagem lateral, sem novos problemas de contraste ou axe em comparação com o antes.
- O diff mostra mudanças apenas onde pretendido.
- Nenhum novo componente que duplique um existente, e nenhuma UI não solicitada.
- Modo escuro verificado, ou confirmado que o projeto não tem modo escuro.
- Typecheck e lint passam.
- Um resumo curto para o usuário, mais os caminhos das 1–2 planilhas que valem a pena analisar.