web-design-guidelines
Ajuda seu agente a verificar se os arquivos seguem as diretrizes de interface web. Isso garante que o design seja consistente e fácil de usar.
O que ela faz
Esta ferramenta verifica se seus arquivos de design seguem as regras oficiais de interface web. Ela garante que seu site ou aplicativo tenha uma aparência consistente e profissional.
Quando usar
- ✓Ao criar um novo site ou aplicativo.
- ✓Ao atualizar o design de um projeto existente.
- ✓Para garantir a qualidade do código de interface.
Exemplo do que pedir para a IA
“Verifique meus arquivos de código em busca de problemas de design.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta busca as regras de design mais recentes na internet e as compara com os arquivos que você indicar. Ela aponta onde estão os problemas, se houver.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill web-design-guidelinesOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/web-design-guidelines/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Diretrizes da Interface Web
Revise arquivos para conformidade com as Diretrizes da Interface Web.
Como Funciona
- Obtenha as diretrizes mais recentes do URL de origem abaixo
- Leia os arquivos especificados (ou solicite ao usuário arquivos/padrão)
- Verifique contra todas as regras nas diretrizes obtidas
- Apresente os achados no formato conciso
file:line
Origem das Diretrizes
Obtenha diretrizes atualizadas antes de cada revisão:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch para recuperar as regras mais recentes. O conteúdo obtido contém todas as regras e instruções de formato de saída.
Uso
Quando um usuário fornece um argumento de arquivo ou padrão:
- Obtenha as diretrizes do URL de origem acima
- Leia os arquivos especificados
- Aplique todas as regras das diretrizes obtidas
- Apresente os achados usando o formato especificado nas diretrizes
Se nenhum arquivo for especificado, pergunte ao usuário quais arquivos revisar.
Quando Usar
Esta habilidade é aplicável para executar o fluxo de trabalho ou as ações descritas na visão geral.
Limitações
- Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
- Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão especializada.
- Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.
Perguntas frequentes
O que são 'Web Interface Guidelines'?
São um conjunto de regras e melhores práticas para criar interfaces de usuário na web, garantindo consistência e usabilidade.
O que significa 'terse `file:line` format'?
É um formato de relatório simples que indica o nome do arquivo e o número da linha onde um problema foi encontrado.
Posso usar isso para testar meu site inteiro?
Esta ferramenta é para verificar arquivos específicos de acordo com as regras. Ela não substitui testes completos ou revisão de especialistas.
Detalhes
Descrição original do autor
Review files for compliance with Web Interface Guidelines.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #4539
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC