theming-system — скилл для Claude Code: что делает и как установить
Скилл проектирует трёхуровневую архитектуру дизайн-токенов для поддержки тем оформления, плотности интерфейса и тёмного режима в единой библиотеке компонентов.
npx skills add Owl-Listener/designer-skills --skill theming-system -a claude-codeЧто делает theming-system
Скилл организует токены в три слоя. Первый уровень хранит глобальные значения базовой палитры. Второй слой задаёт семантические токены по назначению элементов, где и происходит переопределение тем. Третий уровень отвечает за параметры конкретных компонентов.
Архитектура охватывает светлую и тёмную темы, варианты высокой контрастности, сезонные стили и параметры плотности интерфейса. Для тёмного режима скилл предписывает уменьшать общую яркость без грубой инверсии, применять светлые поверхности для слоёв и снижать насыщенность фоновых цветов.
Если проекту нужна только одна фиксированная палитра, этот скилл будет избыточным: автор советует взять color-system. Реализация опирается на пользовательские свойства CSS, отдельные файлы токенов для каждой темы и переменные Figma.
Какие задачи решает
- Разделить глобальные, семантические и компонентные токены
- Спроектировать тёмный режим без слепого инвертирования цветов
- Настроить темы для нескольких брендов или white-label продуктов
- Добавить переключение плотности интерфейса между компактным и просторным видами
Примеры запросов агенту
- Спроектируй структуру токенов для темы с поддержкой dark mode и high contrast через CSS custom properties.
- Распиши семантические токены для white-label приложения с тремя брендами.
- Настрой правила возвышения поверхностей и насыщенности цветов для тёмного режима.
Как установить theming-system
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill theming-system -a claude-code2Вручную: положить файлы
~/.claude/skills/theming-system/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/theming-system/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill theming-system -a codex2Вручную: положить файлы
.agents/skills/theming-system/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill theming-system -a cursor2Вручную: положить файлы
.cursor/skills/theming-system/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills theming-system2Вручную: положить файлы
.github/skills/theming-system/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill theming-system -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/theming-systemВручную: положить файлы
.devin/skills/theming-system/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill theming-system -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о theming-system
Как установить theming-system в Claude Code?
Выполните команду npx skills add Owl-Listener/designer-skills --skill theming-system -a claude-code в терминале.
Что делает скилл theming-system?
Он выстраивает трёхуровневую структуру дизайн-токенов, позволяя одной библиотеке компонентов переключаться между разными брендами, режимами контрастности и плотностью интерфейса.
В чём отличие theming-system от color-system и dark-mode-design?
Скилл theming-system проектирует общую архитектуру для одновременной поддержки нескольких тем. Для единой палитры автор рекомендует использовать color-system, а для детальной проработки тёмного оформления — dark-mode-design.
Исходный текст
SKILL.md · MIT
--- name: theming-system description: Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use `color-system` (ui-design); for dark mode craft use `dark-mode-design` (ui-design). --- # Theming System You are an expert in flexible theming architectures for multi-brand, multi-mode design systems. ## What You Do You design theming systems allowing one component library to support multiple visual themes through token mapping. ## Architecture - **Layer 1**: Global tokens (raw palette) - **Layer 2**: Semantic tokens (purpose-driven aliases) — themes override here - **Layer 3**: Component tokens (scoped) ## Theme Types - Color modes: light, dark, high contrast, dimmed - Brand themes: primary, sub-brands, white-label, seasonal - Density: comfortable, compact, spacious ## Dark Mode Considerations - Don't just invert — reduce brightness thoughtfully - Use lighter surfaces for elevation (not shadows) - Desaturate colors for dark backgrounds - Test text legibility carefully - Provide image/illustration variants ## Implementation CSS custom properties, token files per theme, Figma variable modes, runtime switching. ## Best Practices - Tokens-first: themes emerge from overrides - Test every component in every theme - Respect OS theme preferences - Document themeable vs fixed tokens
© Owl-Listener · MIT · Owl-Listener/designer-skills
