syncfusion-react-sidebar — скилл для Claude Code: установка
Скилл помогает собрать адаптивную боковую панель Syncfusion React для навигации. Нужен для drawer-меню, вложенных разделов и мобильных макетов.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a claude-codeЧто делает syncfusion-react-sidebar
Скилл описывает настройку SidebarComponent из @syncfusion/ej2-react-navigations: режимы Over, Push, Slide и Auto, положение слева или справа, ширину, сворачивание в dock-панель и переключение по медиазапросу. Он также показывает управление через show, hide и toggle.
Внутри есть материалы по интеграции с ListView и TreeView, анимациям, backdrop-оверлею, закрытию по клику вне панели или клавише Escape, RTL и клавиатурной навигации. Скилл рассчитан на React-проект с пакетами Syncfusion. Без импорта @syncfusion/ej2-react-navigations пример с SidebarComponent не соберётся.
Какие задачи решает
- собрать адаптивное меню навигации
- переключить Sidebar между режимами Over и Push
- связать панель с ListView или TreeView
- закрывать drawer по клику вне него и Escape
- добавить клавиатурную навигацию и ARIA-настройки
Примеры запросов агенту
- Собери адаптивную боковую панель Syncfusion React для мобильного и десктопного макета.
- Настрой
SidebarComponentв режимеAutoс backdrop и закрытием по клику вне панели. - Подключи боковую панель к
TreeView, добавь RTL и управление с клавиатуры.
Как установить syncfusion-react-sidebar
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-sidebar/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-sidebar/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-sidebar/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-sidebar/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-sidebar2Вручную: положить файлы
.github/skills/syncfusion-react-sidebar/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-sidebarВручную: положить файлы
.devin/skills/syncfusion-react-sidebar/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-sidebar
Как установить syncfusion-react-sidebar в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a claude-code, затем проверьте файл ~/.claude/skills/syncfusion-react-sidebar/SKILL.md.
Что делает syncfusion-react-sidebar?
Скилл помогает настроить адаптивный Syncfusion React Sidebar для drawer-меню и навигационных макетов: с режимами отображения, анимацией, backdrop и управлением состоянием.
С какими компонентами навигации он интегрируется?
Скилл показывает интеграцию Sidebar с ListView и TreeView, включая вложенные и многоуровневые меню.
