Extract

Коли використовувати

/impeccable extract призначений для моменту, коли ваша кодова база випадково стала дизайн-системою. Повторювані стилі кнопок у 12 місцях. Три варіанти однієї картки. hex-кольори, розкидані повсюди. Ручні інтервали, що випадково збігаються зі шкалою. Зверніться до нього, коли хочете консолідувати цей розрив у повторно використовувані примітиви.

Використовуйте його після того, як продукт випустив достатньо функцій, щоб виявити патерни. Передчасне витягування створює абстракції, які не відповідають реальності.

Як це працює

Навичка спочатку виявляє структуру дизайн-системи, потім ідентифікує можливості для витягування:

1. Токени: знаходить повторювані літеральні значення (кольори, інтервали, радіуси, тіні, розміри шрифтів). Пропонує імена токенів, додає до системи токенів, замінює використання.
2. Компоненти: знаходить UI-патерни, що повторюються з незначними варіаціями (кнопки, картки, поля вводу, модальні вікна). Витягує в єдиний компонент з варіантами, мігрує виклики.
3. Патерни композиції: знаходить макетні або інтерактивні патерни, що повторюються (рядки форм, групи панелей інструментів, порожні стани). Витягує в примітиви композиції.
4. Стилі тексту: знаходить повторювані комбінації font-size + weight + line-height. Витягує в стилі тексту.
5. Патерни анімації: знаходить повторювані комбінації easing, duration або keyframe. Витягує в токени руху.

Навичка обережна. Вона витягує лише те, що використовується три або більше разів з однією метою. Вона ніколи не витягує “тому що це може знадобитися пізніше”. Передчасна абстракція гірша за дублювання.

Спробуйте

/impeccable extract the button styles

Очікуваний результат:

• Знайдено 14 екземплярів кнопок у 8 файлах
• 4 окремі варіанти: primary (заповнений акцентний), secondary (з рамкою), ghost (тільки текст), destructive (заповнений червоний)
• Усі 4 варіанти використовують одну шкалу розмірів (small, default, large)
• Витягнуто в <Button variant="primary" size="default"> зі стилями на основі токенів
• Міграція 14 місць виклику, видалено ~180 рядків дубльованого CSS
• Додано 3 відсутні токени: --button-radius, --button-padding-y, --button-padding-x

Підводні камені

• Витягування надто рано. Два використання — це не патерн. Три — можливо. Дочекайтеся, поки патерн стане очевидним.
• Надмірне узагальнення. Витягнутий компонент має точно відповідати поточним випадкам використання, а не передбачати кожен можливий майбутній. Ви завжди можете додати варіанти пізніше.
• Забування про міграцію. Витягування без міграції залишає старий дубльований код і створює третій спосіб робити те ж саме. Завжди мігруйте в тому ж проході.
• Витягування речей, що різняться за наміром. Дві кнопки, що виглядають схоже, але служать різним цілям (основна дія проти посилання, стилізованого як кнопка), мають, ймовірно, залишитися окремими.