/impeccable extract
Extract
Extrae componentes, tokens y patrones reutilizables hacia el sistema de diseño.
La habilidad solo extrae lo que se usa tres o más veces con la misma intención. Dos usos no son un patrón, y la migración siempre ocurre en la misma pasada.
Cuándo usarlo
/impeccable extract es para el momento en que tu código se ha convertido accidentalmente en un sistema de diseño. Estilos de botones repetidos en 12 lugares. Tres variantes de la misma tarjeta. Colores hex esparcidos por todas partes. Espaciado hecho a mano que casualmente coincide con una escala. Úsalo cuando quieras consolidar esta deriva en primitivas reutilizables.
Úsalo después de que un producto haya lanzado suficientes funcionalidades como para revelar los patrones. La extracción prematura crea abstracciones que no coinciden con la realidad.
Cómo funciona
La habilidad primero descubre la estructura del sistema de diseño, luego identifica oportunidades de extracción:
- Tokens: encuentra valores literales repetidos (colores, espaciado, radios, sombras, tamaños de fuente). Propone nombres de tokens, los añade al sistema de tokens, reemplaza los usos.
- Componentes: encuentra patrones de UI que se repiten con variaciones menores (botones, tarjetas, inputs, modales). Extrae en un único componente con variantes, migra los usos.
- Patrones de composición: encuentra patrones de layout o interacción que se repiten (filas de formularios, grupos de barras de herramientas, estados vacíos). Extrae en primitivas de composición.
- Estilos de texto: encuentra combinaciones repetidas de font-size + weight + line-height. Extrae en estilos de texto.
- Patrones de animación: encuentra combinaciones repetidas de easing, duración o keyframes. Extrae en tokens de movimiento.
La habilidad es cautelosa. Solo extrae cosas usadas tres o más veces, con la misma intención. Nunca extrae “porque podría reutilizarse más adelante”. La abstracción prematura es peor que la duplicación.
Pruébalo
/impeccable extract the button stylesResultado esperado:
- 14 instancias de botones encontradas en 8 archivos
- 4 variantes distintas: primary (relleno acento), secondary (con borde), ghost (solo texto), destructive (relleno rojo)
- Las 4 variantes usan la misma escala de tamaño (small, default, large)
- Extraídas en
<Button variant="primary" size="default">con estilos basados en tokens - 14 puntos de uso migrados, eliminadas ~180 líneas de CSS duplicado
- Añadidos 3 tokens faltantes:
--button-radius,--button-padding-y,--button-padding-x
Errores comunes
- Extraer demasiado pronto. Dos usos no son un patrón. Tres podrían serlo. Espera hasta que el patrón sea obvio.
- Sobregeneralizar. El componente extraído debería coincidir estrechamente con los casos de uso actuales, no anticipar todos los futuros posibles. Siempre puedes añadir variantes después.
- Olvidar la migración. La extracción sin migración deja el código duplicado antiguo y crea una tercera forma de hacer lo mismo. Siempre migra en la misma pasada.
- Extraer cosas que difieren en intención. Dos botones que parecen similares pero sirven propósitos diferentes (acción principal vs enlace estilizado como botón) probablemente deberían permanecer separados.