Habilidades web-design-guidelines
🎨

web-design-guidelines

Seguro

Review UI for Design Guidelines

Também disponível em: ZhanlinCui,antfu,vercel-labs,antfu

This skill automatically reviews UI code against web interface guidelines to ensure accessibility, usability, and design consistency. It fetches the latest guidelines and provides actionable feedback.

Suporta: Claude Codex Code(CC)
🥉 74 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "web-design-guidelines". Use web-design-guidelines to review src/components/Button.jsx

Resultado esperado:

Button component review complete:

✓ Passed: Button has proper semantic HTML structure
✓ Passed: Sufficient color contrast (4.5:1 ratio)
⚠ Warning: Missing aria-label for icon-only buttons at line 23
⚠ Warning: Focus states could be more visible at line 45

Recommendation: Add aria-label="Submit" to icon-only button elements for screen reader support.

A utilizar "web-design-guidelines". Check index.html for accessibility compliance using web-design-guidelines

Resultado esperado:

Accessibility audit for index.html:

✓ Passed: Valid document structure with semantic elements
✓ Passed: Lang attribute present
⚠ Warning: Image at line 15 missing alt attribute
⚠ Warning: Form labels missing at lines 30-35
⚠ Warning: Skip navigation link recommended

Action required: Add alt text to all images and associate labels with form inputs.

Auditoria de Segurança

Seguro
v1 • 2/25/2026

All static findings are false positives. The backticks flagged as 'Ruby/shell backtick execution' are markdown code formatting. The 'weak cryptographic algorithm' detections are scanner errors on random markdown text. The network URL is a legitimate public GitHub resource (vercel-labs/web-interface-guidelines) intentionally fetched to get current guidelines. This is a simple skill that fetches public guidelines and reviews UI code for compliance.

1
Arquivos analisados
42
Linhas analisadas
2
achados
1
Total de auditorias
Problemas de Risco Médio (1)
SKILL.md:18SKILL.md:24-26
Backtick Detection - False Positive
Scanner flagged markdown backticks as Ruby/shell execution. These are code formatting in markdown documentation.
Problemas de Baixo Risco (1)
SKILL.md:25
Hardcoded URL - Intentional Design
URL to fetch web interface guidelines from public GitHub repository
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
85
Conteúdo
50
Comunidade
98
Segurança
100
Conformidade com especificações

O Que Você Pode Construir

Web Developer Code Review

A web developer wants to ensure their UI components follow accessibility and design best practices before deployment.

Accessibility Audit

A UX designer needs to verify that all pages meet accessibility standards and WCAG guidelines.

Design System Compliance

A team lead wants to ensure all team members follow consistent design patterns in their implementations.

Tente Estes Prompts

Basic UI Review 
Use the web-design-guidelines skill to review my UI code in [filename] for compliance with web interface guidelines.
Accessibility Check 
Use web-design-guidelines to check [file or pattern] for accessibility compliance and suggest improvements.
Full Design Audit 
Use web-design-guidelines to perform a comprehensive review of [directory or pattern]. Check all files for web interface guidelines compliance, accessibility, and UX best practices.
Pattern-Based Review 
Use web-design-guidelines skill to review all [*.jsx or specific pattern] files in [directory] for web interface guidelines compliance.

Melhores Práticas

  • Fetch the latest guidelines before each review to ensure current best practices
  • Review complete files rather than snippets for accurate context
  • Address accessibility warnings first as they impact the widest audience

Evitar

  • Do not use this skill for backend logic or API code review
  • Avoid reviewing generated or minified code - the skill needs readable source
  • Do not expect visual rendering - this is code analysis only

Perguntas Frequentes

What guidelines does this skill check against?
It fetches the latest web interface guidelines from vercel-labs web-interface-guidelines repository on GitHub.
Can this skill check my live website?
No, this skill reviews source code files only. It cannot access live websites or render pages.
Does it check for specific frameworks like React or Vue?
Yes, it reviews the code structure and applies generic web guidelines. Framework-specific checks depend on the fetched guidelines content.
How do I provide files for review?
Pass a file path, directory, or glob pattern as an argument to the skill.
What if no files are specified?
The skill will ask you to provide which files or patterns you want reviewed.
Does this skill modify my code?
No, this skill only reads and analyzes your code. It provides recommendations but does not make changes.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

Repositório

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-design-guidelines

Referência

main

Estrutura de arquivos

📄 SKILL.md