syncfusion-react-themes — скилл для Claude Code: темы и установка
Скилл помогает настраивать темы Syncfusion React, тёмный режим, CSS-переменные, иконки и размеры компонентов. Нужен при работе с визуальным стилем интерфейса.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a claude-codeЧто делает syncfusion-react-themes
Скилл объясняет, как подключать встроенные темы Syncfusion React через npm-пакеты или CDN, переносить стили в theme packages и использовать lite-версии CSS. Он также показывает настройку иконок через e-icons, выбор размеров и подключение Theme Studio для создания своей темы.
Для тёмного режима описан глобальный класс e-dark-mode, переключение во время работы приложения и настройка отдельных компонентов. CSS-переменные позволяют менять основные цвета; формат значений зависит от темы, например Material 3 использует RGB. При подключении CDN его версия должна совпадать с установленной версией npm-пакета, иначе возможны проблемы со стилями и рендерингом.
Какие задачи решает
- подключить тему Syncfusion React через npm или CDN
- переключать тёмный режим во время работы приложения
- изменить основные цвета через CSS-переменные
- настроить иконки и их размеры
- включить увеличенный режим для сенсорных интерфейсов
Примеры запросов агенту
- Подключи тему
tailwind3для кнопок Syncfusion React и добавь нужный импорт CSS. - Сделай переключатель тёмного режима через класс
e-dark-modeнаdocument.body. - Настрой основной цвет темы через CSS-переменную и добавь иконку
e-cut.
Как установить syncfusion-react-themes
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-themes/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-themes/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-themes/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-themes/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-themes2Вручную: положить файлы
.github/skills/syncfusion-react-themes/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-themesВручную: положить файлы
.devin/skills/syncfusion-react-themes/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-themes
Как установить syncfusion-react-themes в Claude Code?
Выполни npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a claude-code, затем проверь файл ~/.claude/skills/syncfusion-react-themes/SKILL.md.
Что делает syncfusion-react-themes?
Скилл подсказывает, как применять и менять темы Syncfusion React, включать тёмный и увеличенный режимы, настраивать CSS-переменные и иконки.
Что нужно учесть при подключении темы через CDN?
Версия CDN должна совпадать с версией установленного npm-пакета. Иначе возможны проблемы со стилями и рендерингом.
