Словами самого skill
Генерирует трёхуровневые архитектуры design token (примитивный → семантический → компонентный), спецификации компонентов и слайды презентаций, соответствующие бренду. Примитивные token задают базовые значения, например --color-blue-600. Семантические token создают алиасы по назначению (--color-primary). Компонентные token определяют использование для конкретного компонента (--button-bg).
Skill предоставляет скрипты генерации и валидации для CSS-переменных, интеграции темы Tailwind и контекстную систему слайдов, использующую поиск BM25 по 15 структурам презентаций, 25 макетам и дуговым эмоциональным sparkline-паттернам Duarte. Все слайды должны импортировать design-tokens.css и использовать исключительно CSS-переменные. Для визуализации данных требуется Chart.js. Поддерживается получение изображений через Pexels и Unsplash.
Что он выдаёт
- Отчёт о валидации token, выявляющий жёстко заданные значения в исходном коде, которые должны ссылаться на token
Как это работает
- 01Загрузить справочник по архитектуре token
Skill загружает references/token-architecture.md, чтобы установить трёхуровневую структуру token перед генерацией или валидацией.
- 02Сгенерировать CSS из конфигурации JSON
Запустите generate-tokens.cjs с файлом конфигурации JSON, чтобы получить CSS-файл с трёхуровневой структурой token в виде CSS-переменных.
- 03Поиск слайд-стратегий по цели
Использовать BM25-поиск через search-slides.py для поиска подходящих структур презентаций, эмоциональных дуг и сюжетных ритмов (sparkline beats) из slide-strategies.csv с опциональной фильтрацией по домену (copy или chart) и контекстной позиции.
- 04Применить контекстный поток принятия решений
Разобрать цель, запросить slide-layout-logic.csv для флага layout и break_pattern, slide-typography.csv для масштаба типографики, slide-color-logic.csv для цветового решения и slide-backgrounds.csv для категории изображения.
- 05Сгенерировать HTML с design-токенами
Создать HTML слайда, который импортирует assets/design-tokens.css, использует var() для всего стилевого оформления, включает Chart.js для диаграмм и добавляет классы навигации и анимации из slide-animations.css.
- 06Проверить соответствие токенам
Запустить slide-token-validator.py, чтобы проверить, что сгенерированный HTML слайда использует исключительно CSS-переменные и не содержит захардкоженных значений цвета, шрифта или отступов.