web-design-guidelines: revisión de interfaz con las reglas de Vercel
Un botón sin aria-label, un foco invisible o una animación que ignora prefers-reduced-motion se cuelan fácilmente en una revisión. Antes de cada pasada, esta skill descarga la versión actual de las Web Interface Guidelines del repositorio de Vercel, lee los archivos que le indicas y devuelve los hallazgos en formato file:line.
Descarga las Web Interface Guidelines vigentes desde GitHub antes de cada revisión, así la lista se actualiza sin reinstalar
Revisa la accesibilidad: aria-label, HTML semántico, manejadores de teclado y estados de foco visibles con focus-visible
Mira formularios e imágenes: autocomplete, validación y mensajes de error, dimensiones, carga diferida y texto alternativo
Cubre animación, tipografía y temas: prefers-reduced-motion, transformaciones en el compositor, tabular-nums, color-scheme y theme-color
Entrega cada hallazgo como file:line y, si no indicas archivos, te pregunta cuáles revisar
Cuándo usarla
Antes de publicar quieres comprobar la accesibilidad y el uso con teclado de un formulario o página nuevos
Las revisiones de diseño acaban en discusiones de gusto y el equipo necesita reglas comunes
Quieres confirmar que el estado de la interfaz está en la URL y cada pantalla se abre con un enlace directo
Pídale al agente
Revisa la accesibilidad de components/Checkout con web-design-guidelines
Audita el formulario de registro: autocomplete, mensajes de error y foco
Comprueba mi web según las buenas prácticas de UX y lista los fallos como file:line
Preguntas
¿Cómo se instala web-design-guidelines?
Ejecuta npx skills add vercel-labs/agent-skills@web-design-guidelines; el instalador te pedirá el agente y el alcance.
¿De dónde salen las reglas?
Del archivo command.md del repositorio vercel-labs/web-interface-guidelines, que se descarga de nuevo antes de cada revisión.
¿En qué se diferencia de React Best Practices?
React Best Practices trata la velocidad de React y Next.js; esta skill revisa la interfaz: accesibilidad, formularios, foco, animación, tipografía e i18n.
