Revisão de Design de UI

Quando Usar

Use esta habilidade quando precisar revisar o código de UI para conformidade com o sistema de design, acessibilidade e melhores práticas.

Quando NÃO Usar

• Para problemas apenas de acessibilidade → use /ss-a11y
• Para heurísticas de UX de Nielsen → use /ss-audit
• Para uma verificação automatizada rápida → use /ss-lint
• Para código que não é de UI (busca de dados, regras de negócio)

Revise o arquivo: $ARGUMENTS

Checklist

1. Conformidade com Tokens de Design

• Sem cores hexadecimais codificadas (use tokens semânticos: text-foreground, bg-brand, etc.)
• Sem espaçamento px codificado no Tailwind (use p-6 em vez de p-[24px])
• Sombras usam variáveis CSS (shadow-[var(--shadow-card)])
• Raio da borda segue a escala (rounded-md, rounded-lg, rounded-2xl)

2. Convenções de Componentes

• Usa o atributo data-slot
• Usa cn() para mesclagem de className
• Props tipadas com React.ComponentProps<>
• Suporta sobrescrita da prop className
• Exportação nomeada (não exportação padrão para componentes)
• Sem componentes de wrapper que apenas adicionam um className

3. Acessibilidade (a11y)

• Alvos de toque >= 44x44px para elementos interativos
• Estilos focus-visible em todos os elementos interativos
• Atributos aria-* adequados onde necessário
• Contraste de cor atende ao WCAG AA (4.5:1 para texto, 3:1 para texto grande)
• Animações respeitam prefers-reduced-motion
• Imagens têm texto alt
• Campos de formulário têm rótulos associados

4. Melhores Práticas para Mobile

• Sem overflow horizontal
• Espaçamento amigável ao toque entre elementos interativos
• Margens de área segura tratadas para dispositivos com notch
• Tamanhos de texto >= 12px para legibilidade
• Contêineres roláveis têm -webkit-overflow-scrolling: touch

5. Performance

• Sem re-renderizações desnecessárias (referências estáveis, memoização onde necessário)
• Imagens são carregadas de forma preguiçosa (lazy-loaded)
• Componentes pesados são divididos em código (code-split)

6. Tipografia

• Usa a pilha de fontes Pretendard/Inter
• Tamanhos de fonte da escala de 14 passos (10-48px, veja CLAUDE.md)
• Pesos de fonte adequados (400, 500, 600, 700)
• Texto de exibição (36-48px): leading-none + tracking-[-0.02em]
• Texto de título (18-24px): leading-snug + tracking-[-0.01em]
• Texto do corpo (14-17px): leading-normal (sem kerning personalizado)
• Legenda em maiúsculas (10-13px): tracking-[0.05em] ou tracking-wide
• Sem line-height: 1.5 em texto de exibição/título (muito espaçado)

7. Consistência de Espaçamento

• Todos os valores de espaçamento são múltiplos de 6px (p-1.5, p-3, p-6, etc.)
• Sem espaçamento arbitrário (p-5=20px, gap-3.5=14px são violações)
• Usa o atalho size-* em vez de w-* h-*
• Usa ms-*/me-* em vez de ml-*/mr-* (propriedades lógicas)
• Transições de movimento usam tokens de design (duration-[var(--duration-fast)])

8. Coerência (VISUAL-CRAFT.md §C0 — as leis de "uma escolha por eixo")

A maior razão pela qual uma UI parece "gerada por IA" não são partes feias — são partes misturadas. Verifique se cada eixo abaixo usa UM valor em todo o sistema; sinalize uma mistura como um problema real, não um detalhe.

• Uma personalidade de raio — afiado (0-4px) OU suave (8-12px) OU "pill", aplicado a cada card/botão/input/modal. Sem misturas (por exemplo, um painel rounded-none com botões rounded-full).
• Uma cor de destaque para ênfase interativa (+ apenas vermelho/verde/âmbar semântico) — não duas ou mais cores de destaque competindo.
• Sem emojis como ícones de UI (🚗🧺⭐ como marcadores de lista/navegação/status/categoria) — eles injetam muitas matizes não controladas; use um conjunto de ícones de linha em currentColor.
• Cor de status = gravidade, não decoração — um estado normal/OK/"보통" é cinza neutro (não colorido); a cor marca apenas a minoria das linhas que precisam de atenção; mesmo valor → mesma cor.
• Sem matizes decorativas — estrelas favoritas, pontos de categoria, avatares usam o destaque ou cinza, não uma nova cor a cada vez.
• Uma linguagem de sombra — mesma direção de luz, mesma escala/matiz; não algumas pretas + algumas matizadas, algumas iluminadas por cima + algumas por baixo.
• Uma família de ícones / modo de preenchimento / peso de traço em todo o arquivo.
• Lei de raio aninhado — um elemento dentro de um contêiner arredondado usa inner = outer − padding, não o mesmo raio (que salta).
• Alturas de controle consistentes — botões, inputs, selects compartilham um conjunto de altura (por exemplo, 40px).
• Erros/estados nunca dependem apenas da cor (ícone + texto também).

Formato de Saída

Forneça:

1. Pontuação: Aprovado / Precisa de Melhoria / Reprovado
2. Problemas: Liste cada violação com referência de arquivo:linha
3. Correções: Mudanças concretas de código para cada problema

Exemplo

Solicitação do usuário:

…