kumaran-is/claude-code-onboarding

Ley de Hierro

OBTÉN LAS PAUTAS EN VIVO ANTES DE REVISAR CUALQUIER ARCHIVO. Nunca apliques reglas recordadas o supuestas — siempre obtén las pautas frescas desde la URL de origen. Si WebFetch falla, reporta el fallo y no continúes con reglas adivinadas.

Pautas de Revisión de Interfaz Web

Audita el código de UI contra las Pautas de Interfaz Web de Vercel. Genera hallazgos estructurados en formato archivo:línea.

Cuándo Usar Esta Skill

Carga esta skill cuando el usuario pida:

• "Revisa mi UI"
• "Comprueba la accesibilidad"
• "Audita el diseño"
• "Revisa la UX"
• "Revisa mi sitio/componente contra las pautas"
• Realizar una verificación de cumplimiento de diseño antes de un PR

Cómo Funciona

1. Obtener pautas — recupera las reglas más recientes desde la URL de origen usando WebFetch
2. Leer archivos — lee los archivos especificados (o pregunta al usuario qué archivos/patrón revisar)
3. Aplicar reglas — revisa todos los archivos contra cada regla de las pautas obtenidas
4. Generar hallazgos — reporta violaciones en formato archivo:línea: [regla violada]

Fuente de Pautas

Obtén pautas frescas antes de cada sesión de revisión:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Usa WebFetch para recuperar las reglas más recientes. El contenido obtenido contiene todas las reglas e instrucciones de formato de salida. No guardes en caché ni recuerdes reglas entre sesiones — siempre obtén pautas frescas.

Uso

Cuando el usuario proporciona archivos o un patrón de ruta:

1. Obtén las pautas desde la URL de origen
2. Lee los archivos especificados
3. Aplica todas las reglas de las pautas obtenidas
4. Genera hallazgos usando el formato especificado en las pautas

Cuando no se especifican archivos:

Pregunta al usuario: "¿Qué archivos o directorios debería revisar? (ej. src/app/features/dashboard/ o *.component.html)"

Formato de salida

Sigue exactamente el formato especificado en las pautas obtenidas. Estructura por defecto:

archivo:línea — [Nombre de la regla]: [Descripción de la violación]

Ejemplo:

dashboard.component.html:34 — Estado Vacío: No se definió estado vacío para condición sin datos
dashboard.component.html:67 — Gestión de Foco: El elemento interactivo carece de indicador de foco visible
order-list.component.ts:89 — Estado de Carga: La operación asíncrona no tiene retroalimentación de carga

Manejo de Fallos

Si WebFetch falla al recuperar la URL de pautas:

1. Reporta: "No se pudieron obtener las Pautas de Interfaz Web desde la URL de origen. Falló la obtención: [error]"
2. NO continúes con reglas adivinadas o recordadas
3. Sugiere: "Intenta de nuevo, o verifica el acceso de red a raw.githubusercontent.com"

Nunca fabriques hallazgos de reglas si la obtención falla.

Cómo Encaja en la Pila de Revisión

Esta skill es la tercera capa de revisión de UI — ejecuta las tres para una cobertura completa:

Capa	Herramienta	Qué Detecta
Capa 1 — Tokens de diseño	/lint-design-system	Colores hardcodeados, espaciado en bruto, tipografía en línea, violaciones de objetivo táctil
Capa 2 — Accesibilidad WCAG	agente accessibility-auditor	Relaciones de contraste, etiquetas ARIA, navegación por teclado, HTML semántico
Capa 3 — Patrones de interfaz web	web-design-guidelines (esta skill)	Estados de carga, estados vacíos, manejo de errores, patrones de interacción, gestión de foco

Skills Relacionadas

• frontend-design — ejecutar ANTES de esta skill para establecer la dirección estética y el puntaje DFII
• design-system — cumplimiento de tokens de diseño (Angular + Flutter)
• angular-ui-patterns — doctrina específica de Angular sobre estados de carga/error/vacío
• accessibility-audit — auditor de cumplimiento WCAG 2.1 AA