Design Lint (Verificação Rápida)

Quando Usar

Use esta habilidade quando precisar de uma verificação rápida e automatizada — detecta violações comuns do sistema de design em segundos.

Quando NÃO Usar

• Para uma revisão mais profunda do julgamento de design (composição, hierarquia, ritmo) → use /ss-review
• Especificamente para acessibilidade → use /ss-a11y
• Para as heurísticas de UX de Nielsen → use /ss-audit
• Para aplicar refatorações — isso apenas sinaliza violações; use /ss-review para corrigir

Alvo: $ARGUMENTS

O Que Isso Faz

Análise rápida baseada em grep para violações comuns de design. Executa em segundos (ao contrário de /ss-review, que é uma auditoria manual profunda). Execute isso após cada alteração de arquivo.

Verificações

1. Cores Codificadas

Procura por cores hexadecimais em strings className que deveriam ser tokens semânticos:

grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'

Violação: text-[#3C3C3C], bg-[#721FE5] Correção: text-text-primary, bg-brand

2. Valores Brutos de Pixel no Tailwind

grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]

Violação: p-[24px], gap-[12px] Correção: p-6, gap-3

3. Sintaxe Antiga de Largura/Altura

grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]

Violação: w-4 h-4 Correção: size-4

4. Propriedades Físicas (Apenas LTR)

grep -n ' ml-\| mr-\| pl-\| pr-' [file]

Violação: ml-2, mr-4 Correção: ms-2, me-4

5. Cores Proibidas

grep -n 'text-black\|bg-black\|#000000\|#000"' [file]

Violação: Qualquer preto puro Correção: Use o token text-primary da skin

6. data-slot Ausente

grep -n 'function [A-Z]' [file] # find components
grep -n 'data-slot' [file]       # check if present

Violação: Componente sem data-slot Correção: Adicione data-slot="component-name"

7. Variáveis CSS de Tamanho de Fonte (CRÍTICO — Conflito com Tailwind v4)

grep -n 'text-\[var(--' [file]
grep -n '\-\-text-.*px\|--fs-.*px' [file]

Violação: text-[var(--text-sm)] ou --text-sm: 13px em theme.css Correção: Use text-[13px] explícito. Tamanhos de fonte com variáveis CSS entram em conflito com o namespace --text-* do Tailwind v4 — o Tailwind os lê como cor, não como tamanho de fonte.

8. className Sem cn()

grep -n 'className={`' [file]

Violação: className de literal de template Correção: Use cn() para toda a composição de className

Formato da Saída

🔴 FAIL  [file:line] Hardcoded hex: text-[#3C3C3C] → use text-text-primary
🔴 FAIL  [file:line] Raw px: p-[24px] → use p-6
🟡 WARN  [file:line] Physical prop: ml-2 → use ms-2
🟡 WARN  [file:line] Missing data-slot on MyComponent
🟢 PASS  No violations found

Total: X errors, Y warnings

Se errors > 0, liste correções específicas para cada violação.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem principal e ao contexto do projeto local.
• Verifique comandos, código gerado, dependências, credenciais e comportamento de serviços externos antes de aplicar alterações.
• Não trate exemplos como substitutos para testes específicos do ambiente, revisão de segurança ou aprovação do usuário para ações destrutivas ou custosas.