AIKraft/AI/Войти
AIKraft/Skills/tailwind-design-system

tailwind-design-system

Создавайте масштабируемые дизайн-системы на Tailwind CSS v4 с токенами и компонентами. Используйте при разработке UI-библиотек, миграции с v3 на v4 или стандартизации паттернов.

wshobson official Разработка ★ 40.2k

Что делает навык

Навык позволяет создавать масштабируемые дизайн-системы на базе Tailwind CSS v4, используя CSS-first конфигурацию, токены дизайна и нативные CSS-функции. Он решает задачи стандартизации UI-паттернов, миграции с версии 3 на 4 и обеспечения доступности компонентов.

Когда применять

  • Создание библиотеки компонентов с использованием Tailwind v4
  • Реализация темизации и токенов дизайна через CSS-first конфигурацию
  • Миграция существующего проекта с Tailwind v3 на v4
  • Настройка темной темы с использованием нативных CSS-функций
  • Стандартизация UI-паттернов во всем кодовом базе

Как работает

  1. Импортировать Tailwind в CSS-файл с помощью директивы @import "tailwindcss" вместо require() или @tailwind directives
  2. Определить тему и токены (цвета, радиусы, анимации) внутри блока @theme, используя CSS-переменные
  3. Настроить темную тему с помощью @custom-variant dark и переопределения токенов в блоке .dark
  4. Применить базовые стили для элементов и body через @layer base с использованием @apply
  5. Использовать OKLCH для определения цветов с лучшей перцептивной однородностью
  6. Определять ключевые кадры анимаций внутри @theme для их автоматического вывода при использовании переменных --animate-*

Примеры запросов агенту

Создай дизайн-систему на Tailwind CSS v4 с токенами цветов в OKLCH и поддержкой темной темы
Мигрируй конфигурацию Tailwind v3 в CSS-first формат v4, заменив tailwind.config.ts на @theme
Настрой базовые стили и токены радиусов для новой UI-библиотеки на Tailwind v4

Что понадобится

  • Tailwind CSS v4 (2024+)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «wshobson-tailwind-design-system» из репозитория: # https://github.com/wshobson/agents
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r wshobson-tailwind-design-system/ ~/.claude/skills/wshobson-tailwind-design-system/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.