ux-extract

name	ux-extract
description	Extrae tokens y componentes reusables desde HTML, URL o directorio para alimentar ux-design-system/ux-components y guarda en .ux/extract/<slug>/.

Extractor: dado un HTML mockup (de /ux-propose o externo), extrae tokens y propone componentes reusables para alimentar /ux-design-system y /ux-components. Cierra el ciclo entre exploracion (mockup) y sistema. Los argumentos del skill son path al HTML, URL, o directorio.

Skill interactivo.

Pre-flight

1. Detectar target

Casos:

• Path a archivo .html: extraer de ese archivo.
• Path a directorio (ej. .ux/proposals/<slug>/): extraer de todos los .html adentro y mergear.
• URL: WebFetch del HTML (sin screenshot — necesitamos el codigo).
• Vacio: pedir Pasame path a HTML mockup, directorio, o URL. y esperar.

2. Preguntar foco

Que querés extraer?
1) Tokens (colores, spacing, type, radii, shadows) — alimenta `/ux-design-system`
2) Componentes reusables (botones, inputs, cards repetidos) — alimenta `/ux-components`
3) Ambos (default)

Guardar FOCUS.

3. Preguntar destino

Donde mergeas el output?
1) Crear nuevo design system en `.ux/design-system/` (si no existe)
2) Mergear con design system existente (compara y reporta diffs)
3) Solo generar reporte, no escribir archivos

Guardar DEST.

4. Derivar slug

Derivar <slug> desde el target (filename, hostname, o directorio) en kebab-case, max 40 chars. Se usa para guardar en .ux/extract/<slug>/.

Fase 1 — Cargar HTML

Leer el archivo o concatenar todos los del directorio. Parsear inline styles, classes Tailwind, y <style> blocks.

Fase 2 — Extraer tokens

Colores

• Listar todos los colores que aparecen (color:, background:, border-color:, Tailwind classes text-*, bg-*, border-*).
• Agrupar por similitud perceptual (OKLCH (espacio de color perceptual) delta E < 10 → mismo color).
• Inferir paleta:
  • Color con mas usos en backgrounds primarios → candidato a primary.
  • Colores neutros (saturacion baja) → candidatos a gray scale.
  • Verdes/rojos/amarillos en banners → success / danger / warning.
• Detectar dark mode (si hay clases dark: en Tailwind o styles con clase .dark).

Spacing

• Listar todos los valores de padding, margin, gap (en px, rem, o Tailwind classes p-*, m-*, gap-*).
• Detectar escala dominante (¿multiplos de 4? de 8?).

Typography

• Fonts en font-family o Tailwind font-*.
• Sizes en font-size o Tailwind text-*.
• Weights en font-weight o Tailwind font-*.
• Detectar escala dominante.

Radii, shadows, motion

• Mismo proceso — listar, agrupar, inferir escala.

Fase 3 — Detectar componentes reusables

Buscar patrones HTML repetidos entre archivos (si son varios):

• Buttons: cualquier <button> o <a class="...inline-flex..."> con estilo consistente.
• Inputs: <input> / <textarea> / <select> con classes consistentes.
• Cards: <div> con rounded-* shadow-* p-* bg-* repetido.
• Headers, tables, modals, navs: detectar por estructura semantica.

Para cada componente detectado:

• Nombre propuesto.
• Numero de ocurrencias.
• Variantes detectadas (ej. button: primary, secondary, ghost).
• Snippet representativo.

Fase 4 — Estructurar reporte de componentes

Generar contenido para .ux/extract/<slug>/components.md:

## Extraccion: <target>

**Archivos procesados**: <N>
**Foco**: <FOCUS>

## Tokens extraidos (resumen)

### Color

**Paleta inferida**:
- primary: <hex base + escala inferida 50-900>
- gray: <escala inferida>
- success: <hex>
- warning: <hex>
- danger: <hex>

**Dark mode detectado**: <si | no>

**Notas**:
- <observaciones, ej. "3 azules muy similares — probablemente 1 token con states">

### Spacing

**Escala dominante**: multiplos de <4 | 8>
**Valores extraidos**: <0, 4, 8, 12, 16, 24, 32, 48, 64>
**Notas**: <ej. "valor 13px en un solo lugar —  ,     ">



: 
: 
: 
: 



(igual estructura)





:
 primary ( ocurrencias): 
 secondary (): 
 ghost (): 



(igual)



(igual)

...



(solo si DEST=2)

 : 
 : 
 : 
 : 



 
 
 

---

Fase 5 — Archivos a escribir (si DEST != 3)

Path base: .ux/extract/<slug>/

Si DEST=1 (nuevo design system)

Generar en .ux/extract/<slug>/:

• tokens.json (DTCG spec) con los tokens extraidos en formato primitivo + semantico.
• components.md con el reporte de componentes detectados + reescritura sugerida.
• README.md con instrucciones para adoptar el design system.

Adicionalmente, si el usuario confirma, copiar tokens.json a .ux/design-system/tokens/primitive.json + tokens/semantic.json y generar tailwind.config.js (mismo formato que /ux-design-system).

Si DEST=2 (merge)

NO sobreescribir el design system. Generar:

• .ux/extract/<slug>/diff.md con los diffs detectados.
• .ux/extract/<slug>/proposed-tokens.json con tokens nuevos a agregar.
• .ux/extract/<slug>/components.md con componentes a promover.

El usuario revisa y mergea manualmente (o pide que /ux-design-system haga el merge oficial despues).

Si DEST=3 (solo reporte)

No escribir archivos. Mostrar el reporte inline en la conversacion.

Fase 6 — Confirmar y guardar

Preguntar: Confirmás que guardo el output en .ux/extract/<slug>/? (si/no, default: si). Si acepta y DEST != 3, si la carpeta .ux/extract/<slug>/ no existe, crearla con mkdir -p .ux/extract/<slug>/ antes de escribir. Luego crear cada archivo con el tool de edicion seguro disponible. Si DEST=3, no escribir, solo mostrar el reporte inline.

Fase 7 — Reportar

Reportar skill, archivos procesados, foco, destino, tokens de color y spacing inferidos, componentes detectados, si hay dark mode, directorio resultante, archivos escritos y si se guardo.

Result

skill: /ux-extract
saved: <true | false>
directory: .ux/extract/<slug>/
files_processed: <N>
focus: <FOCUS>
dest: <DEST>
tokens_color_inferred: <N>
tokens_spacing_inferred: <N>
components_detected: <list>
dark_mode_detected: <true | false>

MUST DO

• Agrupar colores similares (OKLCH delta E < 10) — no listar 17 azules distintos.
• Detectar escala dominante en spacing/type (no asumir).
• Marcar componentes como reusables solo con count >= 3 (igual que patrones en /pm-feedback).
• Si DEST=1, generar output DTCG-compliant (igual estructura que /ux-design-system).
• Reportar diffs claros si DEST=2 (no sobreescribir).
• Guardar todo en .ux/extract/<slug>/.

MUST NOT DO

• No sobreescribir un design system existente sin que el usuario lo pida con DEST=1 sobre directorio vacio.
• No promover a componente algo que aparece 1-2 veces (eso es one-off, no patron).
• No inventar tokens — todo lo extraido viene del HTML.
• No usar gh ni depender de GitHub.
• No persistir nada en auto-memory.