Módulo 1.2 — ✨ impeccable · Skill Design

🧩 Qué es / qué hace

Definición precisa y alcance real de la skill

"La skill que mejora lo que ya existe; nunca lo que empieza desde cero."

impeccable v3.1.1 es un skill de Claude Code con licencia Apache 2.0, derivado de frontend-design de Anthropic, especializado en rediseño, crítica, auditoría y pulido de interfaces frontend existentes. Organiza 24 comandos en 5 categorías (Build, Evaluate, Refine, Enhance, Fix) y actúa como reviewer de diseño e implementador al mismo tiempo.

✓ DENTRO DEL ALCANCE

✓ Rediseño y crítica de páginas existentes
✓ Revisión de UX con heurísticas y puntuación
✓ Auditoría técnica (a11y, rendimiento, diseño responsivo)
✓ Pulido final antes del deploy
✓ Animaciones y microinteracciones
✓ Sistemas de diseño y tokens reutilizables
✓ i18n, estados de error/vacío, casos límite

✗ FUERA DEL ALCANCE

✗ Backend — API, bases de datos, servidores
✗ Crear una interfaz desde cero (→ frontend-design)
✗ Identidad de marca y logo (→ brand-guidelines)
✗ Lógica de negocio pura sin UI
✗ Infraestructura y DevOps
✗ Tareas que no son de UI (pruebas unitarias, CI/CD)

comandos

v3.1.1

versión actual

categorías

Apache

licencia 2.0

🎣 Cuándo se activa

Disparadores exactos de la description — con qué solicitud se activa Claude

💡

Claude analiza cada pedido del usuario en función de la description de la skill. Si hay una coincidencia, la skill se invoca automáticamente, sin que el usuario escriba /impeccable.

Verbos que activan impeccable

diseño / rediseño — rehacer el diseño visual de una página existente

critique / audit — revisión de UX o auditoría técnica (a11y, perf, responsivo)

polish / harden / optimize — refinamiento y fortalecimiento de una interfaz existente

animate / colorize — agregar movimiento o color estratégico

bolder / quieter / distill — potenciar, suavizar o simplificar el diseño

clarify / adapt / typeset / layout — ajustes en el texto, diseño adaptable, tipografía y espaciado

dar forma / extraer / enseñar / documentar — planificación de UX, extracción de tokens, configuración del contexto

⚠️

No activa cuando el pedido es crear desde cero sin mencionar algo existente. En esos casos, Claude usa frontend-design. La distinción es: impeccable = "el después", frontend-design = "el inicio".

🎯

Coincidencia por verbo

🔄

Invocación automática

📝

O /impeccable

🧭

Routing interno

🚀 Cómo mejora tus páginas

Valor concreto para el resultado final

👁️ Visual y jerarquía

Escala tipográfica, peso, contraste y espaciado rítmico (≥1.25 de proporción entre pasos). Elimina las escalas planas y la banalidad visual.

♿ Accesibilidad

Auditoría WCAG, contraste, etiquetas ARIA, foco visible, navegación con teclado — lo que Lighthouse no detecta.

⚡ Rendimiento de la UI

Diagnostica y corrige la lentitud de renderizado, los reflows, las animaciones con CLS y las fuentes que bloquean la carga.

🎬 Movimiento y microinteracciones

Animaciones con propósito, transiciones suaves, feedback de estado, delight sin excesos — respetando prefers-reduced-motion.

📱 Responsivo & Adapt

Breakpoints, contenedores fluidos, tipografía escalable, áreas táctiles adecuadas, modo oscuro/claro.

🔩 Sistemas de diseño

Extrae tokens CSS/Tailwind, crea un DESIGN.md documentado, hace que los componentes sean reutilizables y coherentes.

💡

Leyes de diseño compartidas integradas: la skill bloquea automáticamente los bordes side-stripe, el texto con degradado, el glassmorphism decorativo, las métricas cliché en el hero y las cuadrículas de tarjetas idénticas, e impone estándares de calidad incluso antes de ejecutar cualquier comando.

Texto UX

etiquetas y errores

i18n

internacionalización

Casos límite

empty · error · loading

Tokens

sistema de diseño

⚙️ Cómo funciona por dentro

Stack, archivos, scripts y enfoque reales

📦 Estructura de la skill

Archivos principales

SKILL.md — manifest (name, description, commands, version)
reference/critique.md — revisión heurística de UX
reference/audit.md — accesibilidad + rendimiento + diseño adaptable
reference/polish.md — revisión de calidad antes del lanzamiento
reference/animate.md — movimiento con propósito
reference/extract.md — tokens y sistema de diseño
scripts/pin.mjs — crear atajos de comandos

Configuración (recopilación de contexto)

1. Lee PRODUCT.md y DESIGN.md del proyecto
2. Registra el contexto de diseño del codebase
3. Aplica las leyes de diseño compartidas (prohibiciones absolutas)
4. Enruta al comando correcto
5. Ejecuta el archivo de referencia del comando

Flujo de ejecución

Solicitud del usuario

Claude detecta un verbo de mejora → activa impeccable

Configuración y recopilación de contexto

Lee PRODUCT.md, DESIGN.md y registra el estado actual de la UI

Routing Rules

Primera palabra = comando → carga el archivo de referencia; sin argumento → menú; general → aplica setup + register

Ejecución + Entrega

Implementa cambios en el codebase, aplica shared design laws, entrega código o análisis

🔧 Crear atajo de comando (pin)

node .claude/skills/impeccable/scripts/pin.mjs pin polish

Crear atajo /polish que invoca directamente /impeccable polish. Válido para cualquiera de los 24 comandos.

SKILL.md

manifiesto

reference/

24 archivos

pin.mjs

atajos

allowed-tools

npx impeccable *

💬 Ejemplo práctico + PROMPT listo

Copia y pega directamente en Claude Code

Escenario

Tienes un dashboard de React/Tailwind funcional, pero visualmente aburrido: tipografía plana, tarjetas idénticas, cero animación, formulario sin estados de error y sin adaptación a móviles. Aquí es donde entra impeccable.

PROMPT — Pégalo en Claude Code Prompt 1 — Auditoría completa

/impeccable critique src/components/Dashboard.tsx

Quero um UX review completo com heuristic scoring.
Foque em: hierarquia visual, carga cognitiva,
estados de erro e empty state, acessibilidade,
e responsividade mobile. Me entregue um relatório
priorizado com as 5 issues mais críticas primeiro.

PROMPT — Pégalo en Claude Code Prompt 2 — Pulido previo al deploy

/impeccable polish src/pages/Landing.tsx

Final quality pass antes de ir para produção.
Verifique: contraste WCAG AA, focus visible,
tipografia (65-75ch body), touch targets ≥44px,
i18n hardcoded strings, e aplique animate com
prefers-reduced-motion.

PROMPT — Pégalo en Claude Code Prompt 3 — Extraer el sistema de diseño

/impeccable extract src/

Extraia todos os tokens de design existentes
(cores, espaçamento, tipografia, shadows) e
crie um DESIGN.md documentado + tokens.css
com custom properties. Identifique componentes
duplicados que podem virar um único reutilizável.

✓ USAR CUANDO

✓ La interfaz funciona, pero se ve fea/insípida
✓ Necesitas QA de UX antes del deploy
✓ Quieres animar sin saber por dónde empezar
✓ Sistema de diseño inconsistente
✓ Formulario sin manejo de casos límite

✗ NO USAR CUANDO

✗ Todavía no existe ninguna interfaz
✗ Necesitas crear una API o un backend
✗ Quieres crear una identidad visual desde cero
✗ La tarea es CI/CD, pruebas, infraestructura

🔍

critique

✨

polish

📦

extract

🎬

animate

🧬 Combina con / límites

Ecosistema de skills y cuándo no usar impeccable

⚛️ frontend-design ↔ ✨ impeccable — la dupla fundamental

frontend-design (Módulo 1.1)

Crear interfaz desde cero. Decide la arquitectura, el stack (React/Tailwind/shadcn), la estructura de componentes y el flujo inicial de UX. Es el "antes".

impeccable (este módulo)

Toma la interfaz existente y la convierte en impecable. No decide el stack: mejora lo que hay. Es el "después". Flujo natural: frontend-design → impeccable polish.

Combina con otros skills del curso

⚛️

frontend-design (1.1)

Crea el scaffold; impeccable lo refina. Úsalos en secuencia: 1.1 → 1.2.

🧱

web-artifacts-builder (1.3)

Genera artefactos HTML independientes; impeccable los mejora después de crearlos.

🏷️

brand-guidelines (2.2)

Define la identidad y los tokens de marca; impeccable apply colorize usa esos tokens en la interfaz.

🎬

animation-designer (3.1)

Para animaciones complejas y cinematográficas; impeccable animate cubre el motion de UI/UX del día a día.

🕹️

agent-browser (4.3)

Valida en el navegador real, mediante Playwright, el resultado de impeccable; comprueba si las mejoras se renderizan correctamente.

⚠️ Límites que debes conocer

→ No crea desde cero. Si todavía no hay una interfaz, empieza con frontend-design (1.1).
→ No decide la arquitectura ni el stack: trabaja con lo que encuentra en el proyecto.
→ No es para branding o logos (usa brand-guidelines T2.2).
→ Para animaciones 3D complejas o video, usa las skills de Medios (Ruta 3).

⚛️→✨

crear→refinar

🏷️+✨

brand+polish

🕹️✓✨

validar en el browser

🎬≠✨

3D→Trilha 3

📋 Resumen del Módulo 1.2

En este módulo aprendiste qué hace único a impeccable en el ecosistema de skills: es la skill del "después" — entra en juego cuando ya existe una interfaz y la lleva al máximo.

✓ Qué aprendiste

✓ Definición precisa y alcance de impeccable v3.1.1
✓ Los 24 comandos distribuidos en 5 categorías
✓ Verbos que activan la skill automáticamente
✓ Cómo protegen la calidad las Shared Design Laws
✓ Configuración, reglas de enrutamiento y flujo de ejecución interno
✓ Diferencia clave: impeccable frente a frontend-design
✓ 3 prompts listos para usar ahora
✓ Cómo se combina con brand-guidelines y agent-browser

Próximo módulo

🧱

Módulo 1.3 — web-artifacts-builder

Generar artefactos HTML/SVG/Mermaid independientes directamente desde Claude Code.

Mientras impeccable perfecciona interfaces existentes, web-artifacts-builder genera nuevos artefactos visuales reutilizables.

← Volver a la ruta Próximo módulo: 1.3 🧱 →