web-design-guidelines: como usar no seu projeto

Revise uma interface existente quando o visitante não consegue navegar ou entender os controles. O foco é conferir a interface contra diretrizes de experiência e acessibilidade.

Categoria: Frontend & UI · Repositório: vercel-labs/agent-skills

Antes de começar

Abra o projeto no seu agente de programação e tenha uma tarefa delimitada. Leia o SKILL.md da fonte e confira dependências, scripts e acessos pedidos. Uma skill fornece instruções; o agente e suas ferramentas executam o trabalho.

Como instalar

Com Node.js e npm disponíveis, execute no terminal do projeto:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Confira a skill e o agente na seleção do instalador. Se o nome não aparecer, consulte a fonte abaixo para verificar a organização atual do repositório. Passo a passo no Codex · Passo a passo no Cursor.

Exemplo de pedido

Adapte este exemplo ao seu projeto. É uma sugestão de uso, não um resultado de teste realizado pela TopSkills.

Revise o formulário de reserva com teclado: rótulos, foco visível, mensagens de erro e contraste. Liste problemas com arquivo e trecho.

Como avaliar e quais são os limites

Percorra o formulário sem mouse e em uma tela estreita. Uma revisão de código não substitui experimentar a interface nem uma avaliação de acessibilidade completa.

Fonte e manutenção

Consultar a skill e suas instruções na fonte ↗. Referência consultada em 4 de setembro de 2026. O conteúdo e a instalação podem mudar com novas versões.

Continue nesta categoria

• react-best-practices — Faz a IA criar as telas do seu site do jeito certo e rápido, seguindo o padrão de qualidade da Vercel (a empresa dona do Next.js).
• frontend-design — Cria telas de site bonitas e caprichadas, fugindo daquela cara "genérica de IA".