design-system-patterns
Набор архитектурных паттернов и готовых фрагментов кода для построения масштабируемых дизайн‑систем, токенов и темизации.
Суть
Что это за skill и зачем он нужен
Skill «design-system-patterns» предоставляет полное руководство по созданию и поддержке дизайн‑систем: от определения примитивных, семантических и компонентных токенов до реализации инфраструктуры тем (light/dark, multi‑brand) в React, конфигурации Style Dictionary для генерации токенов на разных платформах и шаблонов компонентов (variant system, headless UI). Включены лучшие практики, рекомендации по именованию и версии токенов, а также готовые примеры кода и CI/CD‑pipeline для синхронизации с Figma.
Установка
Как установить
npx skills add https://github.com/wshobson/agents --skill design-system-patternsСценарии
Когда использовать
Подходит
- Создание новой дизайн‑системы с токенами и темами
- Внедрение переключения светлой/тёмной темы в веб‑приложениях на React
- Поддержка мульти‑брендовых тем и масштабируемых компонентных библиотек
- Автоматизация генерации токенов для Web, iOS и Android через Style Dictionary
- Организация токенов по иерархии (примитив → семантика → компонент)
- Настройка CI/CD‑процесса для синхронизации токенов с Figma
Не подходит
- Для небольших прототипов, где полноценная дизайн‑система избыточна
- Если проект не использует React или аналогичные фреймворки
- Когда уже существует устоявшаяся система токенов без необходимости её переосмысления
- Если требуется только простая стилизация без темизации и токенов
- Для приложений, где ограничения по размеру кода не позволяют добавлять дополнительные зависимости
- Когда требуется полностью кастомный подход, не совместимый с предложенными паттернами
Доверие
Проверки безопасности
Проверка не нашла критичных проблем.
Проверка не нашла критичных проблем.
Низкий риск · проблем не найдено.
Предупреждений нет.
Оценка 93/100 · проанализировано 2 раздела.
Похожие