К основному содержанию
скилл CX Codex

syncfusion-react-treeview — скилл для Claude Code: дерево на React

Скилл для ИИ-агента, который помогает собрать иерархический TreeView из @syncfusion/ej2-react-navigations: выбор узлов, чекбоксы, drag-drop, инлайн-редактирование.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/syncfusion-react-treeview/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-treeview/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора15

syncfusion-react-barcode Скилл для генерации штрихкодов, QR-кодов и Data Matrix в React через компоненты Syncfusion. Пригодится, когда нужно встроить коды в форму, отчёт или этикетку. CX Codex +1 706установок syncfusion-react-dashboard-layout Скилл для ИИ-агента: подсказывает, как собрать дашборд на React с перетаскиваемыми панелями Syncfusion. CX Codex +1 703установок syncfusion-react-maps Помогает агенту собрать географическую карту на React: GeoJSON, маркеры, пузыри, легенда, хороплет. Пригодится, когда данные нужно показать по регионам. CX Codex +1 702установок syncfusion-react-blockeditor Скилл помогает агенту подключить Syncfusion React BlockEditor: блочный редактор контента с меню, drag-and-drop и совместной работой. CX Codex +1 701установок syncfusion-react-popups Скилл для ИИ-агентов, который подсказывает, как собирать модальные окна, тултипы и поповеры на компонентах Syncfusion для React. CX Codex +1 658установок syncfusion-react-3d-chart Скилл помогает агенту собрать объёмные столбчатые и линейчатые диаграммы Syncfusion в React-проекте. Пригодится, когда нужен график с осями, легендой и экспортом. CX Codex +1 656установок syncfusion-react-notifications Скилл по компонентам уведомлений Syncfusion для React: тосты, бейджи, сообщения, скелетоны и спиннеры. Пригодится, когда нужно быстро собрать статус-индикаторы. CX Codex +1 654установок syncfusion-react-timeline Подсказывает агенту, как собрать хронологию событий на компоненте Timeline из Syncfusion для React. Пригодится для роадмапов, трекинга доставки и лент активности. CX Codex +1 650установок

Похожие

react-joyride gilbarbara Учит агента создавать пошаговые туры и онбординг-подсказки в React-приложениях через библиотеку React Joyride v3. CX Codex +1 686установок react vercel-labs Скилл помогает собирать React-интерфейсы из JSON-спецификаций через json-render. Нужен для каталогов компонентов и UI, который создаёт ИИ. CX Codex +1 16 300установок react-expert https://github.com/Jeffallan Скилл для разработки на React 18+, Next.js App Router и create-react-app. Генерирует компоненты, хуки, чинит рендер и переводит классовые компоненты на функциональные. CX Codex +1 5 500установок react-mcp assistant-ui Скилл для работы с @assistant-ui/react-mcp: подключает MCP-серверы, выбранные пользователем, прямо в браузере и регистрирует их инструменты в чате. CX Codex +1 4 000установок typescript-react-patterns agent-skills Скилл с 33 правилами типизации React на TypeScript: пропсы, хуки, события, refs, дженерики и контекст. Пригодится, когда агент пишет компоненты и лезет в типы. CX Codex +1 1 100установок react-flow framara Скилл для работы с React Flow (@xyflow/react): кастомные узлы и рёбра, состояние, лейаут, типизация и отладка графов. CX Codex +1 821установок

Вопросы о 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, и этот пакет должен быть в проекте. Скилл добавляет только справочные материалы для агента.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой