web-design-guidelines

Panorama general de la skill web-design-guidelines

Para qué sirve esta skill

La skill web-design-guidelines es una guía práctica de diseño de plataforma web y accesibilidad para crear, revisar o corregir interfaces en la web. Es ideal para quienes necesitan algo más que un prompt genérico: ingenieros frontend, diseñadores que trabajan con código, revisores de accesibilidad y agentes que deben tomar decisiones defendibles sobre HTML/CSS/JS.

Qué te ayuda a decidir

Usa esta skill cuando la tarea sea elegir marcado semántico, cumplir con las expectativas de WCAG 2.2, mejorar el comportamiento responsive o evitar regresiones habituales en UI web. El valor principal de la skill web-design-guidelines es que convierte objetivos amplios como “haz que este formulario sea accesible” o “mejora este layout en móvil” en reglas concretas de plataforma.

Por qué es diferente

Este repositorio es agnóstico al framework y tiene una postura clara sobre los fundamentos: HTML semántico, acceso por teclado, estados de foco, contraste, diseño responsive y rendimiento. Para web-design-guidelines for UI Design, eso lo hace útil en React, Vue, HTML puro y trabajo con design systems, porque la guía está por debajo de la elección del framework.

Cómo usar la skill web-design-guidelines

Instala y carga los archivos correctos

Usa el comando web-design-guidelines install para el paquete de la skill:
npx skills add ehmo/platform-design-skills --skill web-design-guidelines

Después de instalar, carga SKILL.md para ver el conjunto completo de reglas. Si solo necesitas un aspecto concreto, revisa primero rules/_sections.md. AGENTS.md es la vía más rápida para entender la estructura de archivos, el alcance y los niveles de prioridad.

Convierte una petición vaga en un prompt útil

La skill funciona mejor cuando tu entrada nombra la superficie de la UI, la restricción objetivo y la decisión que quieres que se tome. Mejores prompts:

• “Audita este formulario de checkout por problemas de teclado y de etiquetas.”
• “Refactoriza esta cuadrícula de tarjetas para que siga siendo legible en móvil y cumpla las reglas de contraste.”
• “Revisa este modal para comprobar el focus trapping, el comportamiento con Escape y el nombre ARIA.”

Para web-design-guidelines usage, incluye el marcado real, la API del componente o las restricciones de layout. Si solo dices “mejora la accesibilidad”, el resultado suele ser demasiado amplio como para ser fiable.

Orden de lectura recomendado

Empieza por SKILL.md, luego AGENTS.md y después rules/_sections.md para una carga selectiva. Si estás depurando un problema concreto, lee primero solo la sección relevante: accesibilidad, formularios, diseño responsive, tipografía, rendimiento o navegación. Así mantienes el trabajo enfocado y reduces el ruido de consejos irrelevantes.

Flujo de trabajo que da mejores resultados

Sigue esta secuencia: identifica el problema del usuario, localiza la sección de reglas pertinente, aplica la corrección estructural mínima y vuelve a comprobar teclado, etiquetas, contraste y comportamiento en móvil. La skill funciona mejor cuando le pides una revisión o un parche, no solo que explique buenas prácticas en abstracto.

Preguntas frecuentes sobre la skill web-design-guidelines

¿Esto es solo para accesibilidad?

No. La accesibilidad es la sección más grande, pero la skill también cubre layouts responsive, formularios, tipografía, rendimiento, modo oscuro, navegación, interacción táctil, i18n, animación y aspectos relacionados con PWA. Si tu tarea es más amplia que WCAG, esta skill sigue encajando.

¿Necesito ser experto frontend para usarla?

No. La skill web-design-guidelines es apta para principiantes si puedes compartir el HTML, el código del componente o una descripción del problema respaldada por una captura. Eso sí, debes ser específico sobre la interfaz y el comportamiento que quieres cambiar.

¿Cuándo no debería usarla?

Evítala si tu tarea es puramente branding visual, redacción o estrategia de producto sin implementación de UI. Tampoco es la herramienta adecuada para preguntas de arquitectura del lado del servidor, salvo que la respuesta dependa del comportamiento de la interfaz web.

¿En qué mejora frente a un prompt normal?

Un prompt normal suele devolver consejos genéricos. Esta skill está anclada en reglas de plataforma, así que las peticiones de web-design-guidelines guide pueden producir decisiones más fiables sobre elementos semánticos, flujo de teclado, uso de ARIA y comportamiento responsive sin tener que adivinar.

Cómo mejorar la skill web-design-guidelines

Da el contexto mínimo completo de la UI

Las mejores entradas incluyen el nombre del componente, el código relevante y el modo de fallo. Por ejemplo: “Esto es un modal con un icono de cierre, dos campos y una acción principal; revísalo para gestionar el foco y el etiquetado.” Eso es mucho más sólido que “hazlo accesible”.

Indica la restricción que más importa

Si te preocupa sobre todo el móvil, menciona límites de viewport, breakpoints o tamaños de objetivo táctil. Si te preocupa la accesibilidad, nombra el problema exacto: acceso por teclado, contraste, etiquetas, reducción de movimiento o nombre para lector de pantalla. web-design-guidelines usage mejora cuando la skill sabe qué compensación importa.

Vigila los fallos habituales

Los errores más comunes son el abuso semántico de <div>, controles interactivos ocultos sin etiquetas, estados de foco débiles y layouts que se rompen cuando el texto se traduce o se hace zoom. Si la primera salida te parece genérica, pide una revisión basada en reglas del árbol de componentes exacto o del CSS.

Itera con un ciclo de revisión

Después de la primera pasada, pide una segunda comprobación centrada en la duda concreta que aún tengas: “vuelve a auditar el orden de teclado”, “verifica contraste y estilo del foco” o “identifica solo cambios de marcado”. Así mantienes la skill web-design-guidelines enfocada y normalmente obtienes una implementación final más precisa.