Decompose to ui kit

Skill: decompose-to-ui-kit

Convierte una referencia visual (imagen, screenshot, descripción) en un inventario de componentes reutilizables alineados con el DESIGN.md del proyecto.

Cuándo usar

• Al iniciar el desarrollo frontend de un proyecto con diseño definido
• Cuando el usuario proporciona una imagen o referencia visual de UI
• Para auditar si los componentes existentes cubren las pantallas del spec

Pipeline

Input (imagen / descripción)
        ↓
  [product-designer] — Análisis visual
        ↓
  Inventario de componentes identificados
        ↓
  [desarrollador-frontend] — Verificación de implementabilidad
        ↓
  components-kit.md + tokens.css
        ↓
  [EvaluatorOptimizer] — Verificación RV-01 a RV-12

Paso 1 — Análisis visual (product-designer)

El agente product-designer analiza la referencia visual e identifica:

1.1 Átomos (elementos base)

Componentes que no se pueden descomponer más:

• Botones (variantes: primary, secondary, ghost, danger)
• Inputs (text, password, search, select, textarea)
• Badges y chips
• Iconos usados (nombre del set, tamaño, peso)
• Avatares y thumbnails
• Separadores y dividers

1.2 Moléculas (combinaciones simples)

• Form fields (label + input + error message)
• Search bar (input + botón + icono)
• Card de contenido (imagen + título + descripción + acción)
• Navigation item (icono + label + badge)
• Toast / notification (icono + mensaje + acción)

1.3 Organismos (secciones completas)

• Header / navbar
• Sidebar de navegación
• Tabla de datos con paginación
• Formulario multi-campo
• Lista de items con acciones

1.4 Plantillas (layouts)

• Layout de autenticación (centrado)
• Layout de dashboard (sidebar + contenido)
• Layout de detalle (header + contenido + sidebar)
• Layout de landing (full-width con secciones)

Paso 2 — Verificación de implementabilidad (desarrollador-frontend)

El agente desarrollador-frontend revisa el inventario y marca cada componente:

• ✅ Implementable — tiene todos los tokens necesarios en DESIGN.md
• ⚠️ Parcial — falta algún token (especificar cuál)
• ❌ Bloqueado — requiere librería o asset externo no definido

Paso 3 — Generación de artefactos

components-kit.md

Documento con la especificación de cada componente:

## Botón Primario

**Variantes:** default, hover, focus, disabled, loading

| Propiedad | Valor |
|---|---|
| background | `--color-primary` |
| color | `white` |
| padding | `--space-3` `--space-4` |
| border-radius | `--radius-md` |
| font-size | `--text-sm` |
| font-weight | `600` |

**Estados:**
- hover: `--color-primary-hover` + `--shadow-sm`
- focus: ring 2px `--color-primary` offset 2px
- disabled: opacity 40%, cursor not-allowed
- loading: spinner inline izquierda, texto "Cargando..."

tokens.css

Variables CSS generadas desde DESIGN.md:

:root {
  /* Colores */
  --color-primary: #000000;
  --color-primary-hover: #000000;
  /* ... todos los tokens de DESIGN.md ... */

  /* Tipografía */
  --text-xs: 11px;
  /* ... */

  /* Espaciado */
  --space-1: 4px;
  /* ... */

  /* Bordes */
  --radius-sm: 4px;
  /* ... */
}

Verificación de paridad visual

Al finalizar el kit, el EvaluatorOptimizer ejecuta la rubric de 12 checks (RUBRIC_VISUAL de core/evaluator-optimizer.ts) sobre una muestra de los componentes generados. Score mínimo para aprobación: 8.0/10.

Activación

/decompose-to-ui-kit imagen=<ruta_o_descripcion>

O dentro del pipeline SDD, tras /sdd.diseñar:

/sdd.diseñar → DESIGN.md generado → /decompose-to-ui-kit → components-kit.md + tokens.css

Salidas esperadas

Archivo	Ubicación	Descripción
components-kit.md	.sdd/design/components-kit.md	Especificación de todos los componentes
tokens.css	.sdd/design/tokens.css	Variables CSS listas para usar
DESIGN.md	raíz del proyecto	Actualizado con componentes identificados