es-kimo/claude-skills

Revisión de Coherencia de UI

Cuando no hay diseñador, "la pantalla existente" es el estándar de diseño. Como los agentes tienden a combinar clases de Tailwind de forma diferente en cada pantalla, una misma función de UI puede variar sutilmente. Esta revisión detecta esas desviaciones. No juzga si algo es "bonito".

0. Modos

Modo	Objetivo	Elementos bloqueantes
Autoverificación	Mis pantallas modificadas	Se corrigen
Revisión de cambios	Archivos de pantalla y estilo modificados en el PR	Solo las desviaciones introducidas
Inspección	Todas las pantallas	Todas

1. Leer la referencia

1. Busca docs/review/design.md. Si no existe, usa el documento de diseño al que apuntan CLAUDE.md o AGENTS.md.

2. Extrae del documento de referencia: principios, tokens (color por rol, espaciado, anchura, tipografía), componentes compartidos, representación de estados (carga, lista vacía, error, sin permisos, éxito), tono del texto y terminología.

3. Si no hay documento de referencia, extrae de las pantallas existentes.

   # Valores reales usados por rol y frecuencia
   git grep -hoE "text-(red|amber|green|zinc|gray|slate)-[0-9]+" -- 'src/**/*.tsx' | sort | uniq -c | sort -rn
   git grep -hoE "max-w-[a-z0-9]+|gap-[0-9]+|px-[0-9]+|py-[0-9]+" -- 'src/**/*.tsx' | sort | uniq -c | sort -rn
   

   Toma el valor más usado como referencia y escribe en la primera línea: "Sin documento de referencia → extraído de pantallas existentes". Si no hay documento de referencia, solo marca como blocking las incoherencias internas.

2. Qué revisar

• Tokens: ¿Se usan valores diferentes para el mismo rol? (color de error red-600 vs red-500, ancho de página max-w-2xl vs max-w-3xl). ¿Se introdujeron valores nuevos no presentes en la referencia?
• Componentes: ¿Se dibujó una UI con el mismo rol (botón principal, enlace, mensaje de error, estado vacío, indicador de carga) copiando una cadena de clases en lugar de usar el componente compartido?
• Estructura de layout: ¿El ancho de página, los márgenes, la posición del título y el botón de retroceso son iguales en otras pantallas?
• Representación de estados: ¿La carga, lista vacía, error, sin permisos y éxito se muestran de la misma manera (posición, color, estructura de la oración) que en las pantallas existentes?
• Texto: ¿El tono (formal, informal, etc.) es coherente? ¿No se usan palabras diferentes para referirse al mismo concepto? ¿Los mensajes de error siguen la estructura "qué falló + qué hacer"?
• Información de depuración: ¿Aparecen valores de medición, IDs internos o hashes en la interfaz de usuario? Si la referencia no lo permite, señálalo.
• Accesibilidad mínima: ¿Cada entrada tiene una etiqueta? ¿El estado se comunica solo con color? ¿Los botones son accesibles por teclado? ¿El idioma del documento (lang) coincide con el idioma de la pantalla?

3. Verificar con pantalla

Si se puede ejecutar, compara la pantalla antes y después con los mismos datos (usa la skill compare-output). Si no se puede ejecutar por necesidad de inicio de sesión o credenciales externas, indica que se juzgó solo con código. No escribas como si hubieras visto una pantalla que no ejecutaste.

4. Fallo

blocking

• Se incumple una regla del documento de referencia.
• Se introduce una representación diferente (valor, estructura de texto, posición) para una UI con el mismo rol.
• Existe un componente compartido, pero se dibuja la UI copiando una cadena de clases.

suggestion

• Nuevo patrón en un área sin referencia. Anótalo como "propuesta de referencia" para que una persona decida si añadirlo.
• Incoherencia preexistente.

No incluir: gustos personales ("este color es más bonito"), sugerencias de diseño nuevas no relacionadas con la referencia.

5. Informe

Primera línea: alcance revisado, si existía documento de referencia, si se vieron las pantallas realmente, número de incidencias.

Por cada incidencia:

• Título: Redacta la desviación como resultado ("La pantalla de artículos tiene un ancho de página mayor, lo que desplaza la posición del contenido al navegar").
• Ubicación: archivo:línea y destino de comparación archivo:línea.
• Referencia: ¿Qué regla o qué pantalla existente se incumple?
• Dirección: ¿Con qué valor o componente se debe alinear?
• Nivel. Si es "propuesta de referencia", indica qué añadir al documento de referencia en una línea.