Словами самого skill
Создаёт готовые к продакшену дизайн-системы на Tailwind CSS v4 (2024+). Он проводит через CSS-first конфигурацию, где @theme в app.css заменяет tailwind.config.ts, семантические цветовые токены записаны в OKLCH, токены радиуса и анимации, чьи keyframes находятся внутри @theme, тёмный режим на основе классов, объявленный через @custom-variant, и базовые стили, применённые в @layer base.
Он также описывает иерархию токенов от бренда к семантике и токенам компонентов, архитектуру компонентов, охватывающую базовые стили, варианты, размеры, состояния и переопределения, а также адаптивные и доступные паттерны компонентов. Написан для команд, создающих библиотеку компонентов, стандартизирующих UI-паттерны в кодовой базе или переходящих с Tailwind v3.
Как это работает
- 01Импорт Tailwind в точке входа CSS
app.css начинается с одного @import вместо директив v3 @tailwind base/components/utilities.
- 02Объявление набора семантических токенов под @theme
Background, foreground, primary, secondary, muted, accent, destructive, border, ring и card — все объявлены как цветовые токены в OKLCH.
- 03Добавление токенов анимации с их keyframes
--animate-fade-in и --animate-fade-out выполняются за 0.2s, --animate-slide-in и --animate-slide-out — за 0.3s, каждый с соответствующим блоком @keyframes, объявленным внутри @theme.
- 04Переопределение тех же имён токенов под .dark
Блок dark переопределяет каждый токен, а не вводит новые имена, отражая background, foreground, primary, secondary, muted, accent, destructive, border, ring, card и ring-offset.
- 05Настройка значений по умолчанию базового слоя
@layer base применяет border-border к каждому элементу и задаёт body тематический фон, цвет текста и сглаживание шрифтов.
- 06Построение компонентов в порядке слоёв
Компоненты проходят через базовые стили, варианты, размеры, состояния и переопределения именно в такой последовательности.