es-kimo/claude-skills

Revisão de Consistência de UI

Sem um designer, a "tela existente" é o padrão de design. Como agentes combinam classes Tailwind de forma diferente para cada tela, UIs com o mesmo papel podem variar sutilmente entre telas. Esta revisão captura essas inconsistências. Ela não julga se algo é bonito ou não.

0. Modos

Modo	Alvo	Itens bloqueantes
Autoavaliação	Minha própria tela alterada	Corrigir
Revisão de alteração	Arquivos e estilos alterados pelo PR	Apenas inconsistências introduzidas pela mudança
Inspeção	Todas as telas	Todas

1. Ler os critérios

1. Procure por docs/review/design.md. Se não existir, use o documento de design apontado por CLAUDE.md ou AGENTS.md.

2. Extraia do documento de referência: princípios, tokens (função da cor, espaçamento, largura, fontes), componentes compartilhados, representação de estados (loading, lista vazia, erro, sem permissão, sucesso), tom e termos.

3. Se não houver documento de referência, extraia das telas existentes.

   # Valores reais usados por função e sua frequência
   git grep -hoE "text-(red|amber|green|zinc|gray|slate)-[0-9]+" -- 'src/**/*.tsx' | sort | uniq -c | sort -rn
   git grep -hoE "max-w-[a-z0-9]+|gap-[0-9]+|px-[0-9]+|py-[0-9]+" -- 'src/**/*.tsx' | sort | uniq -c | sort -rn
   

   Use o valor mais frequente como referência e escreva na primeira linha: "Sem documento de referência → extraído das telas existentes". Se não houver documento de referência, apenas inconsistências internas são consideradas bloqueantes.

2. O que verificar

• Tokens: O mesmo papel usa valores diferentes (ex: cor de erro red-600 vs red-500, largura de página max-w-2xl vs max-w-3xl)? Novos valores não definidos nos critérios foram introduzidos?
• Componentes: UIs com o mesmo papel (botão principal, link, mensagem de erro, estado vazio, indicador de loading) foram recriadas copiando strings de classe em vez de usar o componente compartilhado?
• Estrutura de layout: Largura da página, margens, posição do título e posição do botão "voltar" são iguais às outras telas?
• Representação de estados: Loading, lista vazia, erro, sem permissão e salvamento bem-sucedido são exibidos da mesma forma (posição, cor, estrutura da frase) que nas telas existentes?
• Tom e texto: O tom (formal, informal etc.) é consistente? O mesmo objeto é chamado por nomes diferentes? A mensagem de erro segue a estrutura "o que falhou + o que fazer"?
• Informações de desenvolvimento: Valores de medição, IDs internos, hashes aparecem na interface do usuário? Se o documento de referência não permitir, aponte.
• Acessibilidade mínima: Inputs têm label? Estados são distinguidos apenas por cor? Botões são acessíveis por teclado? O idioma do documento (lang) corresponde ao idioma da tela?

3. Verificar com a tela

Se for possível executar, gere capturas de tela antes e depois da alteração com os mesmos dados e compare (skill compare-output). Se não for possível por necessidade de login ou credenciais externas, informe que a análise foi feita apenas pelo código. Não finja ter visto telas que não foram executadas.

4. Classificação

Bloqueante

• Viola uma regra do documento de referência.
• Introduz nova representação (valor, estrutura de frase, posição) para uma UI com o mesmo papel.
• Existe componente compartilhado, mas a UI foi recriada copiando strings de classe.

Sugestão

• Novo padrão em área não coberta pelo documento de referência. Escreva como "proposta de critério" para que uma pessoa decida se adiciona ao documento.
• Inconsistência que já existia antes.

Não reportar: preferências pessoais ("esta cor é mais bonita"), sugestões de design não relacionadas aos critérios.

5. Relatório

Primeira linha: escopo analisado, existência de documento de referência, se as telas foram realmente visualizadas e número de ocorrências.

Para cada item:

• Título: Escreva o desvio como resultado. ("A tela de postagem tem largura de página diferente, fazendo a posição do conteúdo mudar ao navegar")
• Localização: arquivo:linha e arquivo:linha de referência.
• Critério: qual regra ou tela existente foi violada.
• Direção: qual valor ou componente deve ser usado para alinhar.
• Classificação. Se for "proposta de critério", uma linha sobre o que adicionar ao documento de referência.