Interface Polish
Una rúbrica concreta y basada en lista de verificación para el pulido de UI: radio, sombras, áreas de clic, temporización de animaciones.
Probado · Funciona
Qué hace
Una lista de verificación de ingeniería de diseño para pulir interfaces — radio de borde concéntrico, alineación óptica, sombras en capas sobre bordes, animaciones de entrada divididas/escalonadas, números tabulares, áreas de clic mínimas de 40x40px y reglas de no-layout-shift — con un formato de salida de tabla markdown antes/después obligatorio. Úselo al construir UI, revisar código frontend o trabajar en cualquier detalle visual/de animación.
Informe de la prueba
Convirtió una revisión vaga de 'este botón se siente raro' en cuatro hallazgos medibles (área de clic de 32px por debajo del mínimo de 40px, border-radius anidado no coincidente, transition-all, falta de tabular-nums), cada uno mapeado a un principio numerado e insertado en la tabla antes/después obligatoria de la habilidad.
Probado el: 2026-07-14 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/wellwelwel/blue-spec cd blue-spec mkdir -p ~/.claude/skills cp -r .claude/skills/interface ~/.claude/skills/interface
Comandos y prompts de ejemplo
/interfaceUna rúbrica concreta y basada en lista de verificación para el pulido de UI: radio, sombras, áreas de clic, temporización de animaciones.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
This button feels off, can you polish the interaction?Review this component's CSS for spacing and animation issues.Add a nice enter animation to this modal component.