Web Design Guidelines skill

O que ela faz

A cada revisão, a skill baixa a versão mais nova das Web Interface Guidelines, o guia de interface que a Vercel mantém no GitHub. Depois lê os arquivos que você indicou e confere regra por regra. Se você não disser quais arquivos, ela pergunta.

As regras cobrem acessibilidade (botão só com ícone sem aria-label, imagem sem alt), foco visível, formulário (campo sem autocomplete, colar bloqueado), animação que ignora quem pediu menos movimento, tipografia, imagem sem largura e altura, modo escuro, data e número no formato de cada país e mais.

O resultado sai agrupado por arquivo, no formato arquivo:linha, que abre direto no VS Code. É uma lista curta e seca, feita pra você ou o Claude corrigir em seguida.

Nas palavras de quem fez

Quando usar

• Revisar uma landing page antes de colocar no ar
• Checar a acessibilidade de um site feito com IA
• Conferir o formulário de cadastro ou de checkout antes de rodar anúncio
• Auditar um componente novo antes de juntar ao projeto

Depois de instalar, é só pedir assim

• Revisa a minha interface: confere o app/page.tsx com a web-design-guidelines.
• Checa a acessibilidade de todos os componentes da pasta components e me dá a lista de problemas.
• Audita o formulário de checkout pelas boas práticas de UX e depois corrige o que aparecer.

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketAlerta
• SnykPassou

Perguntas