/impeccable extract
Extract
Haal herbruikbare componenten, tokens en patronen in het ontwerpsysteem.
De skill extraheert alleen wat drie of meer keer wordt gebruikt met dezelfde intentie. Twee gebruiken zijn geen patroon, en migratie gebeurt altijd in dezelfde passage.
Wanneer te gebruiken
/impeccable extract is voor het moment waarop je codebase per ongeluk een ontwerpsysteem is geworden. Herhaalde knopstijlen op 12 plekken. Drie varianten van dezelfde kaart. Hex-kleuren verspreid overal. Handgemaakte spatiëring die per ongeluk een schaal matcht. Gebruik het wanneer je deze drift wilt consolideren in herbruikbare primitieven.
Gebruik het nadat een product genoeg functies heeft geleverd om de patronen te onthullen. Vroegtijdige extractie creëert abstracties die niet overeenkomen met de realiteit.
Hoe het werkt
De skill ontdekt eerst de structuur van het ontwerpsysteem en identificeert vervolgens extractiemogelijkheden:
- Tokens: herhaalde letterlijke waarden vinden (kleuren, spatiëring, radii, schaduwen, lettergroottes). Token-namen voorstellen, toevoegen aan het tokensysteem, gebruik vervangen.
- Componenten: UI-patronen vinden die herhalen met kleine variatie (knoppen, kaarten, invoervelden, modals). Extraheren naar een enkel component met varianten, aanroepers migreren.
- Compositiepatronen: lay-out of interactiepatronen vinden die herhalen (formulierrijen, werkbalkgroepen, lege statussen). Extraheren naar compositieprimitieven.
- Tekststijlen: herhaalde font-size + weight + line-height combinaties vinden. Extraheren naar tekststijlen.
- Animatiepatronen: herhaalde easing, duration of keyframe combinaties vinden. Extraheren naar bewegingstokens.
De skill is voorzichtig. Het extraheert alleen dingen die drie of meer keer worden gebruikt, met dezelfde intentie. Het extraheert nooit “omdat het later hergebruikt zou kunnen worden”. Vroegtijdige abstractie is erger dan duplicatie.
Probeer het
/impeccable extract the button stylesVerwachte output:
- 14 knop-instanties gevonden over 8 bestanden
- 4 verschillende varianten: primary (gevuld accent), secondary (omrand), ghost (alleen-tekst), destructive (gevuld rood)
- Alle 4 varianten gebruiken dezelfde grootenschaal (small, default, large)
- Geextraheerd naar
<Button variant="primary" size="default">met token-gedreven stijlen - 14 aanroeppunten gemigreerd, ~180 regels gedupliceerde CSS verwijderd
- 3 ontbrekende tokens toegevoegd:
--button-radius,--button-padding-y,--button-padding-x
Valkuilen
- Te vroeg extraheren. Twee gebruiken zijn geen patroon. Drie kan het zijn. Wacht tot het patroon voor de hand liggend is.
- Over-generaliseren. De geextraheerde component moet nauw aansluiten bij de huidige gebruikssituaties, niet anticiperen op elke mogelijke toekomstige. Je kunt altijd later varianten toevoegen.
- De migratie vergeten. Extractie zonder migratie laat de oude gedupliceerde code bestaan en creëert een derde manier om hetzelfde te doen. Migreer altijd in dezelfde passage.
- Dingen extraheren die verschillen in intentie. Twee knoppen die er hetzelfde uitzien maar verschillende doeleinden dienen (primaire actie vs link gestileerd als knop) moeten waarschijnlijk gescheiden blijven.