syncfusion-react-splitter — скилл для Claude Code
Скилл помогает собрать в React гибкие панели с изменяемым размером, сворачиванием и вложенными раскладками.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a claude-codeЧто делает syncfusion-react-splitter
Скилл описывает работу с SplitterComponent и панелями через PaneDirective внутри PanesDirective. Агент может настроить горизонтальную, вертикальную или вложенную раскладку, задать размеры в пикселях или процентах, ограничения min и max, а также содержимое панели: HTML, React-компонент или CSS-селектор.
В руководстве есть сценарии для сворачивания и разворачивания панелей, изменения размеров через события, добавления и удаления панелей во время работы, настройки разделителей и тем. Также разобраны клавиатурная навигация, ARIA, RTL и локализация. Для сборки примеров нужен пакет @syncfusion/ej2-react-layouts, поэтому без него код компонента не запустится.
Какие задачи решает
- собрать интерфейс с двумя изменяемыми колонками
- настроить вертикальное разделение рабочей области
- добавить сворачивание боковой панели
- ограничить размер панели через
minиmax - связать изменение размера с событиями компонента
Примеры запросов агенту
- Собери в React двухпанельную раскладку через
SplitterComponent,PanesDirectiveиPaneDirective. - Настрой вертикальный
SplitterComponentс верхней сворачиваемой панелью и нижним содержимым. - Добавь обработчики
resizeStart,resizingиresizeStop, а размеры панелей задай в процентах.
Как установить syncfusion-react-splitter
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-splitter/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-splitter/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-splitter/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-splitter/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-splitter2Вручную: положить файлы
.github/skills/syncfusion-react-splitter/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-splitterВручную: положить файлы
.devin/skills/syncfusion-react-splitter/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-splitter
Как установить syncfusion-react-splitter в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter -a claude-code, затем используйте файл ~/.claude/skills/syncfusion-react-splitter/SKILL.md.
Что делает syncfusion-react-splitter?
Скилл помогает создавать в React многопанельные интерфейсы с изменяемыми размерами, сворачиванием, событиями и вложенными раскладками.
Что нужно для работы примеров?
В проекте нужен пакет @syncfusion/ej2-react-layouts. Скилл также описывает настройку CSS и темы.
