impeccable

Visión general de impeccable skill

Para qué sirve impeccable

La impeccable skill es una skill de diseño de interfaces y de implementación frontend pensada para crear interfaces distintivas, listas para producción y que no parezcan la salida genérica de una IA. Encaja especialmente bien para quienes construyen componentes web, páginas, superficies de producto, pósteres o flujos de funcionalidades donde la calidad visual, el detalle en la interacción y la consistencia del sistema importan tanto como que el código funcione.

Quién debería instalar impeccable

Instala impeccable si ya entregas código frontend y quieres incorporar mejor criterio de diseño al flujo de generación. Es especialmente útil para diseñadores de producto que programan, ingenieros frontend y usuarios de agentes que necesitan impeccable para UI Design y no solo un andamiaje rápido. Si lo único que buscas es un layout provisional y rápido, esta skill probablemente sea más pesada de lo necesario.

Qué diferencia a esta skill

Su principal diferencia es la estructura. impeccable no se limita a decir “hazlo bonito”; organiza el trabajo en tres modos: craft para definir la forma antes de construir, teach para preparar el contexto de diseño y extract para convertir patrones de UI repetidos en componentes y tokens reutilizables. El repositorio también incluye referencias de diseño específicas sobre color, espaciado, tipografía, motion, interacción, comportamiento responsive y UX writing, algo mucho más accionable que un único prompt largo.

Qué les importa a los usuarios antes de adoptarla

La necesidad real que resuelve es reducir la improvisación: qué diseñar primero, qué referencias cargar, cuándo dejar de abstraer y cómo evitar los hábitos típicos de una UI débil generada por IA. La contrapartida es que impeccable funciona mejor cuando aportas contexto del proyecto, patrones existentes y un objetivo de funcionalidad concreto. No sustituye mágicamente la dirección de marca ni las decisiones de producto.

Cómo usar impeccable skill

Contexto de instalación y comprobaciones iniciales

Una ruta de instalación habitual es:
npx skills add pbakaus/impeccable --skill impeccable

Después de instalarla, abre primero .claude/skills/impeccable/SKILL.md. Este repositorio incluye además un paso de mantenimiento puntual tras las actualizaciones:
node .claude/skills/impeccable/scripts/cleanup-deprecated.mjs

Si quieres orientarte rápido, lee estos archivos en este orden:

1. SKILL.md
2. reference/craft.md
3. reference/extract.md
4. reference/spatial-design.md
5. reference/typography.md

Añade reference/color-and-contrast.md, reference/interaction-design.md, reference/motion-design.md, reference/responsive-design.md y reference/ux-writing.md solo cuando la tarea realmente los necesite.

Elige el modo adecuado: craft, teach o extract

Usa impeccable craft cuando necesites construir una funcionalidad o una página. Suele ser la mejor opción por defecto para trabajo nuevo de UI porque impone un orden útil: definir el diseño, cargar las referencias relevantes y luego construir estructura, layout, tipografía, color y acabado.

Usa impeccable teach cuando el equipo o el agente necesiten contexto de diseño antes de implementar. Usa impeccable extract cuando tu repositorio ya tenga componentes repetidos, valores hardcodeados o variantes inconsistentes y quieras consolidarlos en un sistema de diseño.

Dale a impeccable los inputs que realmente necesita

El uso de impeccable mejora mucho cuando tu prompt incluye:

• el objetivo de la funcionalidad
• usuarios objetivo
• capturas o rutas de componentes existentes
• restricciones de marca
• framework y stack de estilos
• expectativas responsive
• requisitos de accesibilidad
• si quieres una UI completamente nueva o extracción de sistema

Prompt débil:
“Make a dashboard look modern.”

Prompt sólido:
“Use impeccable craft to design and implement a billing dashboard in React + Tailwind. Match our existing admin shell. Primary tasks: invoice status, failed payment recovery, recent usage. Brand should feel calm and premium, not playful. Mobile and desktop required. Keep keyboard focus visible and avoid card-overload. Reuse patterns from src/components/admin/*.”

Ese nivel de detalle ayuda a la skill a elegir bien las referencias y a evitar estéticas por defecto.

Flujo práctico para obtener mejores resultados con impeccable

Una guía fiable de impeccable sería:

1. Empieza con craft y confirma el brief de diseño antes de escribir código.
2. Carga solo los documentos de referencia relevantes para ese brief.
3. Construye primero el estado principal con semántica correcta.
4. Añade espaciado y jerarquía antes de decorar.
5. Diseña explícitamente los estados interactivos: hover, focus, active, disabled, loading, error, success.
6. Si aparecen patrones repetidos 3 o más veces, cambia a extract.

Un consejo práctico extraído de las referencias: si el trabajo de color es importante, usa OKLCH en lugar de generar paletas HSL de forma automática. Si el responsive importa, utiliza breakpoints guiados por el contenido y media queries de pointer/hover, no solo suposiciones basadas en el ancho de pantalla.

Preguntas frecuentes sobre impeccable skill

¿Es impeccable mejor que un prompt normal de UI?

Por lo general sí, si la calidad importa. Un prompt simple puede generar marcado utilizable, pero impeccable añade reglas de decisión y estándares respaldados por referencias para espaciado, tipografía, estados de interacción, motion y extracción de tokens. Eso la hace más fiable para trabajo sensible al diseño, no solo más rápida generando código.

¿impeccable sirve para principiantes?

Sí, con matices. Los principiantes pueden usar impeccable skill como un flujo guiado, especialmente craft y teach. Pero da por hecho que puedes inspeccionar tu repositorio, evaluar si encaja y responder preguntas de aclaración. Si no puedes aportar patrones existentes o un brief claro, el resultado puede seguir sintiéndose genérico.

¿Cuándo no debería usar impeccable?

Evita impeccable para mocks desechables, placeholders ultrabásicos de landing pages o tareas en las que la calidad del diseño visual no sea importante. También encaja mal cuando no existe ninguna dirección de producto y esperas que la skill invente una estrategia de marca desde cero.

¿impeccable encaja con sistemas de diseño existentes?

Sí, especialmente a través de extract. De hecho, la skill suele ser más útil en repositorios reales que en demos vacías, porque puede identificar componentes repetidos, valores hardcodeados y variantes inconsistentes. Si no existe un sistema de diseño, la guía del repositorio sugiere aclarar primero la estructura preferida antes de inventar uno.

Cómo mejorar impeccable skill

Empieza con un brief mejor, no con uno más largo

La forma más rápida de mejorar la salida de impeccable es dar restricciones más precisas. Incluye audiencia, criterios de éxito, tono, referencias de UI existentes y qué debe permanecer sin cambios. “Premium pero cercano para responsables financieros” funciona mejor que “clean and modern”. Las buenas restricciones reducen los resultados planos por defecto.

Carga las referencias correctas, no todas

Un fallo habitual es sobrecargar la ejecución con todos los documentos. Para usar impeccable bien, carga el mínimo de referencias útiles: spatial-design.md y typography.md casi siempre, y añade color, motion, interacción, responsive o UX writing solo cuando la funcionalidad lo necesite. Así mantienes las decisiones más enfocadas.

Detecta los patrones típicos de salida floja

Si el resultado sigue viéndose normalito, revisa estos problemas:

• elecciones de paleta azul/naranja por defecto
• layouts cargados de tarjetas y con jerarquía débil
• estados hover sin estilos de foco para teclado
• texto de placeholder usado como etiqueta
• extracción prematura antes de que un patrón se repita
• suposiciones desktop-first en dispositivos táctiles

Estas son precisamente las áreas que las referencias de impeccable intentan corregir.

Itera después del primer borrador con feedback concreto

No pidas “hazlo mejor”. Pide mejoras específicas alineadas con la guía del repositorio, por ejemplo:

• “Increase hierarchy using spacing and weight, not more cards.”
• “Retune the palette in OKLCH with tinted neutrals.”
• “Add all interactive states for form controls.”
• “Extract tokens only where repeated 3+ times.”

Ese tipo de seguimiento hace que impeccable aporte más valor que un generador de una sola pasada y es la mejor vía para conseguir un resultado de UI Design listo para producción.