En los propios términos del Skill
Principios de ingeniería de diseño para lograr que las interfaces se perciban pulidas, escritos para cualquiera que construya componentes de UI o revise código frontend: estados hover, sombras, bordes, tipografía, iconos, microinteracciones y animaciones de entrada/salida.
Incluye diecinueve principios centrales numerados con valores predeterminados estrictos: radio de borde concéntrico, alineación óptica, sombras en capas (box-shadow) en lugar de bordes de falsa elevación, transiciones CSS interrumpibles, escalonado de alrededor de 100ms, texto suavizado (antialiased), números tabulares, contornos de imagen en negro o blanco puro, scale(0.96) al pulsar, áreas de contacto de 44×44px y grosor de trazo de icono equiparado al del texto. Dos modos de revisión, rápido y completo, producen una tabla de Severidad/Ubicación/Antes/Después/Por qué agrupada por principio, con un máximo de 5 o 15 hallazgos, que termina en Bloquear, Necesita cambios o Aprobar.
Qué produce
- Un informe de revisión que indica desde el principio qué se inspeccionó y que nunca da a entender que una superficie no inspeccionada fue cubierta.
- Hallazgos agrupados por principio dentro de una tabla de Severidad, Ubicación, Antes, Después, Por qué que enumera cada cambio realizado o propuesto en lugar de un subconjunto.
- Una tabla de Considerado pero Rechazado con 1–3 candidatos reales en modo rápido y 2–5 en modo completo, cada uno con el motivo por el que se descartó.
- Una sección de verificación que enumera los comandos o interacciones exactos ejecutados y sus resultados observados, seguida del veredicto.
Cómo funciona
- 01Expresar las correcciones en el propio sistema de estilos del proyecto
Antes de proponer o escribir cualquier corrección, identifique cómo el proyecto ya aplica estilos y formule el cambio dentro de ese sistema: Tailwind en un proyecto Tailwind, CSS plano en un proyecto CSS, o el enfoque de CSS-in-JS ya establecido.
- 02Ralentice la interfaz
Al revisar, reproduzca el movimiento al 10% de velocidad en el panel Animations del navegador, porque lo que se ve mal al 10% de velocidad es lo que está sutilmente mal a velocidad normal.
- 03Por defecto, modo completo
El modo full se usa siempre que no se indique un modo de revisión; el modo quick debe solicitarse explícitamente.
- 04Escriba los hallazgos en un formato de tabla fijo
Agrupe los hallazgos por principio en una tabla markdown con las columnas Severity, Location, Before, After y Why; la ubicación cita path/to/file:line.
- 05Tenga en cuenta las cinco categorías
La tabla de alcance debe incluir las cinco categorías del Quick Reference, y nunca debe darse a entender que una superficie no inspeccionada fue revisada.
- 06Cierre con verificación y un veredicto
El veredicto es Block cuando queda un hallazgo HIGH, Needs changes cuando solo quedan hallazgos MEDIUM o LOW, y Approve solo cuando no queda nada procesable.