syncfusion-react-treeview — скилл для Claude Code: дерево на React
Скилл для ИИ-агента, который помогает собрать иерархический TreeView из @syncfusion/ej2-react-navigations: выбор узлов, чекбоксы, drag-drop, инлайн-редактирование.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-codeЧто делает syncfusion-react-treeview
Скилл описывает компонент TreeViewComponent из пакета @syncfusion/ej2-react-navigations и разбирает его по частям: привязка данных (вложенные массивы, модель с parentID, удалённые OData и Web API, ленивая подгрузка), операции с узлами, шаблоны, выбор и чекбоксы, перетаскивание, редактирование на месте, фильтрация, сортировка, клавиатура и доступность.
Внутри — набор справочных файлов, на которые скилл ссылается по темам: references/getting-started.md, data-binding.md, templates-and-rendering.md, node-operations.md, selection-and-checking.md, drag-drop-and-reordering.md, inline-editing.md, filtering-and-searching.md, sorting-and-ordering.md, customization-styling.md, keyboard-and-accessibility.md, advanced-features.md, context-menu-integration.md. Агент открывает нужный файл под задачу, а не читает всё подряд.
Отдельно разобрана производительность: statelessTemplates отключает перерисовку шаблона при обновлении состояния, loadOnDemand подтягивает ветки по мере раскрытия. Компонент из пакета Syncfusion, поэтому в проекте уже должен стоять @syncfusion/ej2-react-navigations — скилл сам его не приносит. Если дерево большое и с кастомными шаблонами, начните с раздела про stateless-шаблоны, иначе просадка по кадрам обеспечена.
Какие задачи решает
- показать дерево подразделений с раскрытием веток
- сделать файловый навигатор с чекбоксами и трёхпозиционным выбором
- разрешить перетаскивание узлов между родителями
- включить редактирование названия узла по двойному клику
- отфильтровать дерево с сохранением родительской цепочки
Примеры запросов агенту
- Собери дерево каталога на TreeViewComponent из @syncfusion/ej2-react-navigations с чекбоксами и автосинхронизацией родителей
- Добавь drag-drop узлов между ветками и запрети переносить узлы типа root
- Включи statelessTemplates для nodeTemplate и ленивую подгрузку веток
Как установить syncfusion-react-treeview
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-treeview/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-treeview/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-treeview/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-treeview/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-treeview2Вручную: положить файлы
.github/skills/syncfusion-react-treeview/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-treeviewВручную: положить файлы
.devin/skills/syncfusion-react-treeview/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Вопросы о syncfusion-react-treeview
Как установить syncfusion-react-treeview в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/syncfusion-react-treeview/SKILL.md.
Что делает syncfusion-react-treeview?
Помогает агенту писать код для иерархического дерева на React: привязка данных, выбор узлов, чекбоксы, перетаскивание, инлайн-редактирование, фильтрация, сортировка, клавиатурная навигация и доступность.
Нужен ли установленный пакет Syncfusion?
Да, компонент берётся из @syncfusion/ej2-react-navigations, и этот пакет должен быть в проекте. Скилл добавляет только справочные материалы для агента.