Habilidades web-design-guidelines
📦

web-design-guidelines

Seguro 🌐 Acceso a red

Review UI against web design guidelines

También disponible en: ZhanlinCui,vercel-labs,antfu,sickn33,supercent-io

Developers often build interfaces without following established best practices, leading to accessibility issues and poor user experience. This skill fetches the latest web interface guidelines from Vercel and automatically reviews code against them, providing actionable feedback in a standard file:line format.

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "web-design-guidelines". Use web-design-guidelines to review src/components/Button.tsx

Resultado esperado:

  • src/components/Button.tsx:12: Missing focus visible styles
  • src/components/Button.tsx:15: Touch target should be at least 44x44px
  • src/components/Button.tsx:23: Insufficient color contrast (3.2:1, requires 4.5:1)

Usando "web-design-guidelines". Review my UI components against web design guidelines

Resultado esperado:

  • src/components/Modal.tsx:8: Ensure escape key closes modal
  • src/components/Modal.tsx:12: Add ARIA modal role
  • src/components/Navbar.tsx:5: Maintain consistent vertical rhythm
  • src/components/Card.tsx:18: Provide visible focus indicator

Auditoría de seguridad

Seguro
v1 • 1/31/2026

Static 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.

2
Archivos escaneados
46
Líneas analizadas
4
hallazgos
1
Auditorías totales
Problemas de riesgo bajo (3)
SKILL.md:19SKILL.md:25-27
Markdown Syntax Misidentified as Command Execution
The static analyzer detected backtick syntax at SKILL.md:19 and SKILL.md:25. These are markdown code formatting markers (inline `code` and code blocks ```), not shell backtick execution. This is a documentation file, not executable code.
SKILL.md:2-3SKILL.md:33SYNC.md:3
YAML Frontmatter Misidentified as Cryptographic Algorithm
The static analyzer flagged YAML frontmatter (---) at SKILL.md:2-3 and SKILL.md:33 as 'weak cryptographic algorithm'. This is false positive - YAML frontmatter is standard markdown metadata syntax, not encryption.
SKILL.md:26
Hardcoded URL for Guidelines Fetching
A hardcoded URL to GitHub raw content exists at SKILL.md:26. This is an intentional design choice for fetching the latest web interface guidelines. The URL points to a public GitHub repository maintained by Vercel Labs.

Factores de riesgo

🌐 Acceso a red (1)
SKILL.md:26
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
22
Comunidad
99
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Frontend Code Review

A frontend developer wants to audit their React or Vue components for accessibility and design compliance before shipping. They invoke the skill with their component files to get a checklist of issues to fix.

Design System Audit

A design systems engineer needs to ensure their component library follows established web interface patterns. They run the skill across the entire library to identify inconsistencies.

Learning Best Practices

A new developer wants to learn what makes good web interfaces. They use the skill on their own code to see specific examples of where their design choices deviate from guidelines.

Prueba estos prompts

Basic Review 
Use the web-design-guidelines skill to review the following files for web interface compliance: {file-pattern}
Full Project Audit 
Review all files matching {pattern} using web-design-guidelines for accessibility and design best practices.
Interactive File Selection 
I want to review my UI code for web design compliance. Please use web-design-guidelines to check my files.
Specific Component Check 
Check my {component-name} component against the web interface guidelines. Use web-design-guidelines to identify any issues.

Mejores prácticas

  • Always review UI code against established guidelines before committing
  • Use the skill during code review to catch accessibility issues early
  • Combine with manual testing to verify findings in actual browsers

Evitar

  • Don't ignore findings without understanding why they are flagged
  • Don't assume the skill can automatically fix issues for you
  • Don't skip accessibility testing in favor of relying solely on this skill

Preguntas frecuentes

How often are the guidelines updated?
The skill fetches the latest guidelines from GitHub each time it runs, ensuring you always use the most current version.
Can this skill fix the issues it finds?
No, the skill only identifies issues. You will need to manually apply the fixes based on the reported line numbers.
What file types can it review?
Any text-based file containing UI code. The skill checks the content against the guidelines regardless of file extension.
Does it work with any JavaScript framework?
Yes, the skill is framework-agnostic. It reviews the code content against general web interface principles.
How reliable are the findings?
The skill applies automated rules from established guidelines. It catches common issues but should be supplemented with manual accessibility testing.
Can I use this offline?
No, the skill requires network access to fetch the latest guidelines from GitHub before performing reviews.

Detalles del desarrollador

Autor

antfu

Licencia

MIT

Repositorio

https://github.com/antfu/skills/tree/main/skills/web-design-guidelines/

Ref.

main

Estructura de archivos

📄 SKILL.md

📄 SYNC.md