Habilidades web-design-guidelines
🎨

web-design-guidelines

Seguro

Revisar código UI contra las pautas de diseño

También disponible en: antfu,antfu,vercel-labs

Esta habilidad audita automáticamente las interfaces web contra las Pautas de Interfaz Web de Vercel, identificando problemas de accesibilidad, problemas de UX y violaciones de cumplimiento de diseño en tu código UI.

Soporta: Claude Codex Code(CC)
🥉 74 Bronce
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/Header.tsx

Resultado esperado:

  • src/components/Header.tsx:15 - Falta etiqueta ARIA en elemento de navegación
  • src/components/Header.tsx:23 - Relación de contraste de color por debajo de 4.5:1 para texto de enlace
  • src/components/Header.tsx:31 - Usar <button> semántico en lugar de <div> para acciones

Usando "web-design-guidelines". Use web-design-guidelines to audit **/*.html

Resultado esperado:

  • index.html:42 - Las etiquetas de formulario deben asociarse con los inputs mediante el atributo for
  • index.html:58 - Las imágenes requieren texto alt para accesibilidad
  • about.html:12 - Los niveles de encabezado no deben saltarse (h1 -> h3)

Auditoría de seguridad

Seguro
v1 • 2/24/2026

Static analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.

1
Archivos escaneados
40
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

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

Lo que puedes crear

Auditoría de Accesibilidad

Revisar un componente React o archivo HTML para cumplimiento WCAG, uso de ARIA y problemas de contraste de color

Cumplimiento del Sistema de Diseño

Verificar si los componentes UI siguen patrones de diseño establecidos y las pautas de interfaz de Vercel

Revisión de Código Pre-lanzamiento

Ejecutar una auditoría final en todos los archivos UI antes del despliegue para detectar problemas de accesibilidad o UX

Prueba estos prompts

Revisión UI Básica 
Use the web-design-guidelines skill to review my UI code in src/components/Button.tsx for accessibility and design compliance.
Revisión Basada en Patrones 
Use web-design-guidelines to audit all files matching **/*.tsx in the components directory for interface guideline violations.
Auditoría Completa del Proyecto 
Run web-design-guidelines on the entire src directory to check all UI code against Vercel's Web Interface Guidelines.
Revisión Interactiva 
I want to review my UI code. Use web-design-guidelines and ask me which files to review.

Mejores prácticas

  • Especifica rutas de archivo exactas o patrones glob para enfocar la revisión en archivos relevantes
  • Revisa los hallazgos en formato archivo:línea y corrige problemas en orden de severidad
  • Obtén pautas nuevas antes de cada revisión para obtener las últimas reglas

Evitar

  • Ejecutar la habilidad sin especificar qué archivos revisar
  • Ignorar los hallazgos de accesibilidad - afectan a usuarios con discapacidades
  • Asumir que la habilidad detecta todos los problemas - es una ayuda, no un reemplazo de pruebas manuales

Preguntas frecuentes

¿Cómo obtiene esta habilidad las pautas?
Usa WebFetch para recuperar las últimas reglas desde el repositorio oficial de GitHub de Vercel antes de cada revisión.
¿Puede esta habilidad corregir los problemas que encuentra?
No, la habilidad solo identifica problemas. Necesitarás corregirlos manualmente en tu código.
¿Qué tipos de problemas verifica?
Verifica accesibilidad (WCAG, ARIA), patrones UX y cumplimiento general de diseño con las Pautas de Interfaz Web de Vercel.
¿Necesito una conexión a internet?
Sí, se requiere una conexión a internet para obtener las últimas pautas desde GitHub.
¿Puedo revisar cualquier tipo de archivo?
La habilidad funciona mejor con HTML, JSX, TSX y otros formatos de código web.
¿Con qué frecuencia se actualizan las pautas?
Las pautas se obtienen nuevas cada vez desde el repositorio de Vercel Labs, así que siempre obtienes las últimas reglas.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/vercel-web-design-guidelines

Ref.

main

Estructura de archivos

📄 SKILL.md