Lei de Ferro
BUSQUE AS DIRETRIZES ATUALIZADAS ANTES DE REVISAR QUALQUER ARQUIVO. Nunca aplique regras lembradas ou assumidas — sempre busque as regras mais recentes da URL de origem. Se o WebFetch falhar, reporte a falha e não prossiga com regras inventadas.
Diretrizes de Interface Web — Revisão
Audita código de UI com base nas Diretrizes de Interface Web da Vercel. Gera descobertas estruturadas no formato
arquivo:linha.
Quando Usar Esta Skill
Carregue esta skill quando o usuário pedir para:
- "Revisar minha UI"
- "Verificar acessibilidade"
- "Auditar design"
- "Revisar UX"
- "Verificar meu site/componente contra as diretrizes"
- Executar uma verificação de conformidade de design antes de um PR
Como Funciona
- Buscar diretrizes — obtém as regras mais recentes da URL de origem usando WebFetch
- Ler arquivos — lê os arquivos especificados (ou pergunta ao usuário quais arquivos/padrão revisar)
- Aplicar regras — verifica todos os arquivos contra cada regra das diretrizes obtidas
- Gerar descobertas — reporta violações no formato
arquivo:linha: [regra violada]
Fonte das Diretrizes
Busque diretrizes atualizadas antes de cada sessão de revisão:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch para obter as regras mais recentes. O conteúdo obtido contém todas as regras e instruções de formato de saída. Não armazene em cache nem lembre regras entre sessões — sempre busque as regras mais recentes.
Uso
Quando o usuário fornece arquivos ou um padrão de caminho:
- Buscar diretrizes da URL de origem
- Ler os arquivos especificados
- Aplicar todas as regras das diretrizes obtidas
- Gerar descobertas usando o formato especificado nas diretrizes
Quando nenhum arquivo é especificado:
Pergunte ao usuário: "Quais arquivos ou diretórios devo revisar? (ex.: src/app/features/dashboard/ ou *.component.html)"
Formato de saída
Siga exatamente o formato especificado nas diretrizes obtidas. Estrutura padrão:
arquivo:linha — [Nome da Regra]: [Descrição da violação]
Exemplo:
dashboard.component.html:34 — Estado Vazio: Nenhum estado vazio definido para condição de dados zerados
dashboard.component.html:67 — Gerenciamento de Foco: Elemento interativo carece de indicador de foco visível
order-list.component.ts:89 — Estado de Carregamento: Operação assíncrona não tem feedback de carregamento
Tratamento de Falhas
Se WebFetch falhar ao obter a URL das diretrizes:
- Reporte: "Não foi possível obter as Diretrizes de Interface Web da URL de origem. Falha na busca: [erro]"
- NÃO prossiga com regras inventadas ou lembradas
- Sugira: "Tente novamente ou verifique o acesso de rede a raw.githubusercontent.com"
Nunca invente descobertas de regras se a busca falhar.
Como Isso Se Encaixa na Pilha de Revisão
Esta skill é a terceira camada de revisão de UI — execute todas as três para cobertura completa:
| Camada | Ferramenta | O Que Ela Captura |
|---|---|---|
| Camada 1 — Tokens de design | /lint-design-system | Cores fixas, espaçamentos sem token, tipografia inline, violações de alvo de toque |
| Camada 2 — Acessibilidade WCAG | accessibility-auditor (agente) | Taxas de contraste, rótulos ARIA, navegação por teclado, HTML semântico |
| Camada 3 — Padrões de interface web | web-design-guidelines (esta skill) | Estados de carregamento, estados vazios, tratamento de erros, padrões de interação, gerenciamento de foco |
Skills Relacionadas
frontend-design— execute ANTES desta skill para estabelecer direção estética e pontuação DFIIdesign-system— verificação de conformidade de tokens (Angular + Flutter)angular-ui-patterns— doutrina específica do Angular para estados de carregamento/erro/vazioaccessibility-audit— auditor de conformidade WCAG 2.1 AA