Pulido de Interfaz
Usa este skill cuando el usuario quiera que una interfaz existente se sienta más terminada, o cuando implementes un componente donde los pequeños detalles visuales importan. Mejora la claridad, consistencia y retroalimentación sin cambiar la identidad visual del producto, su arquitectura de información o su modelo de interacción, a menos que se te pida.
Establecer el lenguaje visual local
Antes de editar, identifica el framework, el enfoque de estilo, la librería de componentes, los tokens de diseño y las convenciones de componentes cercanos. Sigue el sistema existente y reutiliza componentes y valores compartidos. Prefiere una reparación en la fuente compartida sobre muchos parches locales. No agregues una dependencia o un sistema de estilo solo por un detalle de pulido.
La consistencia visual es evidencia, pero el gusto personal no es un defecto. Preserva las convenciones deliberadas del proyecto, como superficies planas o movimiento contenido, cuando se apliquen de manera consistente.
Elegir el modo correcto
Implementación. Haz solo los cambios que solucionen un problema observado o completen un tratamiento solicitado explícitamente. Mantén el comportamiento accesible y la implementación idiomática para el proyecto.
Revisión. Permanece en modo solo lectura a menos que también se solicite implementación. Indica el ámbito inspeccionado, evalúa los estados relevantes y reporta solo los hallazgos respaldados por la interfaz renderizada o la evidencia del código fuente. No presentes comportamientos visuales no observados como hechos.
Para cualquier modo, lee references/polish-checklist.md para la guía de decisiones, cobertura de estados y formato de reporte. Para implementación, lee references/implementation-recipes.md solo para la pila real del proyecto: CSS, Tailwind, React Motion, GSAP o Three.js. Para trabajo con color, foco, movimiento, controles o tamaño de objetivo, lee references/wcag-accessibility.md; ejecuta scripts/check_contrast.py cuando los colores de primer plano y fondo se puedan resolver a valores hexadecimales.
Aplicar refinamientos de alto valor
- Texto: Elige la separación de líneas según la longitud del contenido y el viewport; estabiliza valores numéricos en vivo cuando su ancho cambiante desordena el contenido cercano.
- Superficies: Trata el radio anidado, la profundidad, los bordes de imágenes y la colocación de iconos como relaciones visuales. Corrígelas cuando se vean mal en su contexto renderizado.
- Retroalimentación: Haz que los estados de reposo, hover, foco, presionado, seleccionado, carga y deshabilitado sean fáciles de distinguir. No hagas que el movimiento sea la única señal de que algo ha cambiado.
- Movimiento: Usa transiciones reversibles para cambios de estado impulsados por el usuario. Reserva el movimiento escenificado para momentos poco frecuentes donde explique jerarquía o dirección. Respeta
prefers-reduced-motion. - Contextos de entrada: No dejes que los dispositivos táctiles hereden un tratamiento de hover persistente. Mantén el comportamiento de foco visible, la operación con teclado y los tamaños de objetivo prácticos intactos mientras pulas los controles.
Evita cambios decorativos sin beneficio visible para el usuario. No uses transiciones generales, sugerencias de rendimiento permanentes o movimientos que hagan las acciones rutinarias más lentas o difíciles de interpretar.