web-design-guidelines
Revisar a interface contra as diretrizes de design da web
Também disponível em: vercel-labs,ZhanlinCui,antfu
Os desenvolvedores frequentemente constroem interfaces sem seguir as melhores práticas estabelecidas, o que leva a problemas de acessibilidade e má experiência do usuário. Esta habilidade busca as diretrizes mais recentes de interface web do Vercel e revisa automaticamente o código contra elas, fornecendo feedback acionável em um formato de arquivo:linha padrão.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "web-design-guidelines". Use web-design-guidelines para revisar src/components/Button.tsx
Resultado esperado:
- src/components/Button.tsx:12: Estilos de foco visível ausentes
- src/components/Button.tsx:15: Alvo de toque deve ter pelo menos 44x44px
- src/components/Button.tsx:23: Contraste de cor insuficiente (3.2:1, requer 4.5:1)
A utilizar "web-design-guidelines". Revisar meus componentes de interface contra as diretrizes de design da web
Resultado esperado:
- src/components/Modal.tsx:8: Garantir que a tecla de escape feche o modal
- src/components/Modal.tsx:12: Adicionar papel modal ARIA
- src/components/Navbar.tsx:5: Manter ritmo vertical consistente
- src/components/Card.tsx:18: Fornecer indicador de foco visível
Auditoria de Segurança
SeguroStatic analyzer flagged markdown syntax as security patterns. All findings are false positives. The backticks (lines 19, 25) are markdown code formatting, not shell execution. The YAML frontmatter (---) was misinterpreted as cryptographic syntax. The hardcoded URL is a documented feature for fetching guidelines from GitHub. This is a read-only review skill with no command execution capability.
Problemas de Baixo Risco (3)
Fatores de risco
🌐 Acesso à rede (1)
Pontuação de qualidade
O Que Você Pode Construir
Revisão de código front-end
Um desenvolvedor front-end quer auditar seus componentes React ou Vue em relação à acessibilidade e conformidade de design antes de implementar. Eles invocam a habilidade com seus arquivos de componentes para obter uma lista de verificação de problemas a corrigir.
Auditoria do sistema de design
Um engenheiro de sistemas de design precisa garantir que sua biblioteca de componentes siga os padrões de interface web estabelecidos. Eles executam a habilidade em toda a biblioteca para identificar inconsistências.
Aprendendo melhores práticas
Um desenvolvedor novato quer aprender o que torna as interfaces web boas. Eles usam a habilidade em seu próprio código para ver exemplos específicos de onde suas escolhas de design desviam das diretrizes.
Tente Estes Prompts
Use a habilidade web-design-guidelines para revisar os arquivos a seguir para conformidade de interface web: {file-pattern}Revisar todos os arquivos correspondentes a {pattern} usando web-design-guidelines para melhores práticas de acessibilidade e design.Quero revisar meu código de interface para conformidade com as diretrizes de design da web. Por favor, use web-design-guidelines para verificar meus arquivos.
Verifique meu componente {component-name} contra as diretrizes de interface web. Use web-design-guidelines para identificar quaisquer problemas.Melhores Práticas
- Sempre revise o código da interface contra as diretrizes estabelecidas antes de fazer commit
- Use a habilidade durante a revisão de código para identificar problemas de acessibilidade precocemente
- Combine com testes manuais para verificar os resultados em navegadores reais
Evitar
- Não ignore os achados sem entender por que estão marcados
- Não assuma que a habilidade pode corrigir automaticamente os problemas para você
- Não pule os testes de acessibilidade em favor de depender exclusivamente desta habilidade