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

Подводные камни

• Слишком раннее извлечение. Два использования — не паттерн. Три — может быть. Подождите, пока паттерн станет очевидным.
• Чрезмерное обобщение. Извлечённый компонент должен близко соответствовать текущим случаям использования, а не предвосхищать каждый возможный будущий. Варианты можно добавить позже.
• Забывание о миграции. Извлечение без миграции оставляет старый дублированный код и создаёт третий способ делать то же самое. Всегда мигрируйте в том же проходе.
• Извлечение вещей, различающихся по назначению. Две кнопки, которые выглядят похоже, но служат разным целям (основное действие vs ссылка, стилизованная как кнопка), вероятно, должны оставаться раздельными.