tailwind-design-system
Создание дизайн-систем на Tailwind
Дизайн-системы часто расходятся без чётких токенов и паттернов. Этот навык предоставляет структуры Tailwind для стандартизации компонентов, тем и адаптивных макетов в вашей кодовой базе.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «tailwind-design-system». Настроить дизайн-систему Tailwind с токенами и паттерном кнопки
Ожидаемый результат:
- Определены семантические цветовые токены и переменные радиуса для светлой и тёмной тем
- Описана кнопка CVA с вариантами, размерами и поведением фокус-кольца
- Включены заметки о доступности для навигации с клавиатуры и состояний ошибки
Использование «tailwind-design-system». Создать реализацию тёмного режима для React-приложения
Ожидаемый результат:
- Предоставлен ThemeProvider с использованием CSS-переменных и localStorage
- Показан компонент переключения темы с переключением иконок
- Включено определение системных предпочтений с matchMedia
Использование «tailwind-design-system». Создать доступные компоненты форм с состояниями ошибки
Ожидаемый результат:
- Создан компонент Input с aria-invalid и сообщениями об ошибке
- Добавлен компонент Label с правильной ассоциацией htmlFor
- Включены утилиты фокус-кольца для навигации с клавиатуры
Аудит безопасности
БезопасноPure documentation skill with no executable code. Contains only markdown guidance and code examples for Tailwind CSS design systems. The static analyzer's 100/100 risk score is a false positive caused by misinterpreting Tailwind CSS opacity syntax (e.g., bg-primary/90) as cryptographic algorithms, and TypeScript template literals as shell backticks. The skill-report.json already contains a completed security audit confirming this skill is safe.
Факторы риска
🌐 Доступ к сети (5)
⚙️ Внешние команды (25)
Оценка качества
Что вы можете построить
Стандартизация командных компонентов
Создайте общие токены Tailwind и базовые компоненты для согласования нескольких команд разработки продукта.
Построение архитектуры токенов
Сопоставьте цвета бренда с семантическими токенами и подключите их к конфигурации темы Tailwind.
Адаптивные макеты
Используйте паттерны сетки и контейнера для масштабирования макетов согласованно между контрольными точками.
Попробуйте эти промпты
Создайте настройку токенов Tailwind с семантическими цветами и переменными радиуса для светлой и тёмной тем.
Разработайте варианты кнопок CVA с размерами, состояниями и заметками о доступности для общей библиотеки компонентов.
Предоставьте паттерны компонентов ввода и меток с обработкой ошибок и руководством по ARIA.
Определите паттерн адаптивной сетки и контейнерной утилиты для карточек продуктов между контрольными точками.
Лучшие практики
- Используйте семантические токены и сопоставьте их с CSS-переменными для рантаймовой темизации
- Документируйте варианты компонентов и состояния по умолчанию чётко для команды
- Тестируйте состояния фокуса и навигацию с клавиатуры на всех интерактивных компонентах
Избегать
- Жёсткое кодирование цветов бренда напрямую в классах компонентов вместо использования токенов
- Пропуск определения токенов тёмного режима и их тестирования
- Использование произвольных значений типа bg-[#123456] вместо расширения темы