/impeccable extract
Extract
Wiederverwendbare Komponenten, Tokens und Muster in das Design-System ziehen.
Der Skill extrahiert nur, was drei oder mehr Mal mit derselben Absicht verwendet wird. Zwei Verwendungen sind kein Muster, und die Migration erfolgt immer im selben Durchgang.
Wann man es verwendet
/impeccable extract ist für den Moment, in dem Ihre Codebasis versehentlich zu einem Design-System geworden ist. Wiederholte Button-Stile an 12 Stellen. Drei Varianten derselben Karte. Hex-Farben überall verstreut. Selbstgebaute Abstände, die versehentlich einer Skala entsprechen. Greifen Sie zu ihm, wenn Sie diese Abdrift in wiederverwendbare Primitive konsolidieren möchten.
Verwenden Sie es, nachdem ein Produkt genug Features veröffentlicht hat, um die Muster zu offenbaren. Vorzeitige Extraktion erzeugt Abstraktionen, die nicht zur Realität passen.
Wie es funktioniert
Der Skill entdeckt zuerst die Design-System-Struktur und identifiziert dann Extraktionsmöglichkeiten:
- Tokens: wiederholte Literal-Werte finden (Farben, Abstände, Radien, Schatten, Schriftgrößen). Token-Namen vorschlagen, zum Token-System hinzufügen, Verwendungen ersetzen.
- Komponenten: UI-Muster finden, die sich mit geringer Variation wiederholen (Buttons, Karten, Inputs, Modals). In eine einzelne Komponente mit Varianten extrahieren, Aufrufer migrieren.
- Kompositionsmuster: Layout- oder Interaktionsmuster finden, die sich wiederholen (Formularzeilen, Toolbar-Gruppen, Empty States). In Kompositions-Primitive extrahieren.
- Textstile: wiederholte Font-Size- + Weight- + Line-Height-Kombinationen finden. In Textstile extrahieren.
- Animationsmuster: wiederholte Easing-, Duration- oder Keyframe-Kombinationen finden. In Motion-Tokens extrahieren.
Der Skill ist vorsichtig. Er extrahiert nur Dinge, die drei oder mehr Mal mit derselben Absicht verwendet werden. Er extrahiert niemals „weil es später vielleicht wiederverwendet wird”. Vorzeitige Abstraktion ist schlimmer als Duplikation.
Ausprobieren
/impeccable extract the button stylesErwartete Ausgabe:
- 14 Button-Instanzen in 8 Dateien gefunden
- 4 unterschiedliche Varianten: primary (gefüllter Akzent), secondary (umrandet), ghost (nur Text), destructive (gefüllt rot)
- Alle 4 Varianten verwenden dieselbe Größenskala (small, default, large)
- Extrahiert zu
<Button variant="primary" size="default">mit token-gesteuerten Stilen - 14 Aufrufstellen migriert, ~180 Zeilen dupliziertes CSS entfernt
- 3 fehlende Tokens hinzugefügt:
--button-radius,--button-padding-y,--button-padding-x
Fallstricke
- Zu früh extrahieren. Zwei Verwendungen sind kein Muster. Drei könnten es sein. Warten Sie, bis das Muster offensichtlich ist.
- Über-generalisieren. Die extrahierte Komponente sollte den aktuellen Anwendungsfällen nahe entsprechen, nicht jedes mögliche zukünftige Szenario vorwegnehmen. Sie können jederzeit später Varianten hinzufügen.
- Die Migration vergessen. Extraktion ohne Migration lässt den alten duplizierten Code bestehen und erzeugt einen dritten Weg, dieselbe Sache zu tun. Immer im selben Durchgang migrieren.
- Dinge extrahieren, die sich in der Absicht unterscheiden. Zwei Buttons, die ähnlich aussehen, aber unterschiedlichen Zwecken dienen (primäre Aktion vs. als Button gestalteter Link), sollten wahrscheinlich getrennt bleiben.