/impeccable extract
Extract
Extraire les composants réutilisables, tokens et patterns vers le système de design.
La compétence n’extrait que ce qui est utilisé trois fois ou plus avec la même intention. Deux utilisations ne font pas un pattern, et la migration se fait toujours dans la même passe.
Quand l’utiliser
/impeccable extract est pour le moment où votre codebase est accidentellement devenu un système de design. Des styles de boutons répétés à 12 endroits. Trois variantes de la même carte. Des couleurs hex éparpillées partout. De l’espacement fait main qui correspond accidentellement à une échelle. Utilisez-le quand vous voulez consolider cette dérive en primitives réutilisables.
Utilisez-le après qu’un produit a expédié suffisamment de fonctionnalités pour révéler les patterns. L’extraction prématurée crée des abstractions qui ne correspondent pas à la réalité.
Comment ça marche
La compétence découvre d’abord la structure du système de design, puis identifie les opportunités d’extraction :
- Tokens : trouver les valeurs littérales répétées (couleurs, espacement, rayons, ombres, tailles de police). Proposer des noms de tokens, ajouter au système de tokens, remplacer les utilisations.
- Composants : trouver les patterns UI qui se répètent avec des variations mineures (boutons, cartes, inputs, modales). Extraire en un seul composant avec des variantes, migrer les appelants.
- Patterns de composition : trouver des patterns de mise en page ou d’interaction qui se répètent (lignes de formulaire, groupes de barre d’outils, états vides). Extraire en primitives de composition.
- Styles de texte : trouver les combinaisons répétées de font-size + weight + line-height. Extraire en styles de texte.
- Patterns d’animation : trouver les combinaisons répétées d’easing, de durée ou de keyframes. Extraire en tokens de mouvement.
La compétence est prudente. Elle n’extrait que les choses utilisées trois fois ou plus, avec la même intention. Elle n’extrait jamais « parce que ça pourrait être réutilisé plus tard ». L’abstraction prématurée est pire que la duplication.
Essayez
/impeccable extract the button stylesRésultat attendu :
- 14 instances de boutons trouvées dans 8 fichiers
- 4 variantes distinctes : primary (filled accent), secondary (bordered), ghost (text-only), destructive (filled red)
- Les 4 variantes utilisent la même échelle de taille (small, default, large)
- Extraites en
<Button variant="primary" size="default">avec des styles pilotés par tokens - 14 sites d’appel migrés, ~180 lignes de CSS dupliqué supprimées
- 3 tokens manquants ajoutés :
--button-radius,--button-padding-y,--button-padding-x
Pièges courants
- Extraire trop tôt. Deux utilisations ne font pas un pattern. Trois, peut-être. Attendez que le pattern soit évident.
- Sur-généraliser. Le composant extrait doit correspondre étroitement aux cas d’usage actuels, pas anticiper chaque futur cas possible. Vous pouvez toujours ajouter des variantes plus tard.
- Oublier la migration. L’extraction sans migration laisse l’ancien code dupliqué en place et crée une troisième façon de faire la même chose. Migrez toujours dans la même passe.
- Extraire des choses qui diffèrent en intention. Deux boutons qui se ressemblent mais servent des objectifs différents (action principale vs lien stylisé en bouton) devraient probablement rester séparés.