syncfusion-react-treeview — Claude Code skill for React trees
An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-codeWhat syncfusion-react-treeview does
The skill covers TreeViewComponent from @syncfusion/ej2-react-navigations and splits it by topic: data binding (nested arrays, a parentID model, remote OData and Web API, lazy loading), node operations, templates, selection and checkboxes, drag-drop, inline editing, filtering, sorting, keyboard navigation and accessibility.
It ships as a set of reference files the agent opens on demand: 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. So it pulls in the one page your task needs instead of the whole guide.
Performance gets its own section. statelessTemplates stops the template from re-rendering on state updates, and loadOnDemand fetches branches as they expand. The component itself comes from a Syncfusion package, so @syncfusion/ej2-react-navigations has to be in your project already — the skill does not install it. With a large tree and custom templates, start from the stateless templates page; skipping it is how you end up with dropped frames.
What it helps with
- render an org chart with expandable branches
- build a file browser with three-state checkboxes
- let users drag nodes between parents
- edit a node label on double-click
- filter a tree while keeping parent chains
Example prompts for the agent
- Build a catalog tree with TreeViewComponent from @syncfusion/ej2-react-navigations, checkboxes and autoCheck on
- Add drag-drop between branches and block nodes of type root from moving
- Turn on statelessTemplates for nodeTemplate and enable load-on-demand
How to install syncfusion-react-treeview
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-treeview/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-treeview/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-treeview/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-treeview/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-treeview2Manually: put the files in place
.github/skills/syncfusion-react-treeview/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-treeviewManually: put the files in place
.devin/skills/syncfusion-react-treeview/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about syncfusion-react-treeview
How do I install syncfusion-react-treeview in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treeview -a claude-code. The skill file then lands at ~/.claude/skills/syncfusion-react-treeview/SKILL.md.
What does syncfusion-react-treeview do?
It guides the agent through writing React code for a hierarchical tree: data binding, node selection, checkboxes, drag-drop, inline editing, filtering, sorting, keyboard navigation and accessibility.
Do I need the Syncfusion package installed?
Yes. The component comes from @syncfusion/ej2-react-navigations, and that package must already be in your project. The skill only adds reference material for the agent.
