Affordance Auditor: uma skill de Claude que julga clicabilidade

Brief

Empacotar uma disciplina recorrente de design review como uma skill reutilizável de Claude: dado código, screenshot ou ambos, auditar se cada elemento interativo comunica sua ação antes da interação — e dizer isso sem rodeios.

Ideia inicial

Revisões de affordance são a parte mais mecânica de uma crítica de UI: inventariar o que parece interativo, comparar o percebido com o comportamento real, checar estados, checar acessibilidade. Isso é um checklist — e checklists são exatamente o que uma skill codifica bem. O julgamento fica onde deve ficar — na correção — mas a varredura vira algo repetível e brutalmente consistente.

Decisões

1. 01Cada elemento recebe uma nota de clareza de affordance de 1 a 5 com âncoras rígidas: 1 é enganoso ou invisível, 5 é óbvio à primeira vista. Uma div com onClick estilizada como texto comum é nota 1, não importa o quão bonita a tela seja.
2. 02A auditoria roda um pipeline fixo de 7 passos: inventário → classificação do tipo de affordance → nota → cruzamento com o design system → verificação de estados → passe de acessibilidade → avaliação de risco. Nenhum passo é opcional.
3. 03Brutalmente honesta, não educada — está escrito nas regras de comportamento da skill. Educação é inimiga da clareza em uma revisão.
4. 04Feedback genérico é proibido: cada problema precisa nomear o token, o valor em pixels ou a prop do componente. 'Aumentar o contraste' sem uma razão-alvo é barrado pela régua de qualidade.
5. 05Acessibilidade é piso, não seção: contraste WCAG AA, focus rings visíveis, HTML semântico em vez de role=button, ARIA em controles só de ícone, alvos de toque de 44×44px.
6. 06Aceita código, screenshot ou ambos — e quando recebe os dois, cruza as análises para verificar se o resultado renderizado bate com a intenção da implementação.
7. 07A saída é um contrato: resumo com nota geral, análise por elemento em formato fixo, problemas críticos e, por fim, quick wins entregáveis em menos de uma hora.

Conclusão

A skill transforma os reflexos de revisão de um designer sênior em algo que um time inteiro pode rodar em qualquer tela, qualquer dia. Ela não substitui a decisão de design — garante que a parte mecânica da crítica nunca seja pulada, e que o feedback sempre chegue com uma correção concreta anexada.