syncfusion-react-blockeditor — Claude Code skill: React block editor
A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -a claude-codeWhat syncfusion-react-blockeditor does
The skill covers BlockEditorComponent from the @syncfusion/ej2-react-blockeditor package. Content lives in discrete blocks: paragraphs, headings, lists, tables, code, quotes, callouts and collapsible sections. Blocks can be reordered by dragging, and the document exports to JSON, HTML or plain text.
It ships as a set of reference files the agent reads on demand: getting started, built-in block types, menus and slash commands, drag-and-drop, @mention and labels, methods and API, styling, advanced features. One file is dedicated to collaborative editing — Yjs setup, providers such as y-websocket, a WebSocket server on port 1234, remote cursors and version history with snapshots. Accessibility gets its own section, built around WCAG 2.1.
Collaboration needs a WebSocket server and Yjs dependencies, so skip that part if you only want a single-user editor. Install is one npx skills add command, and the skill runs on six platforms, Cursor and GitHub Copilot among them.
What it helps with
- build a block-based document editor in React
- customize slash and context menus in the editor
- add block drag-and-drop and nesting
- set up real-time collaboration with user cursors
- add document version history with snapshots
Example prompts for the agent
- Set up the Syncfusion React BlockEditor with initial blocks
- Customize the slash command and context menus in BlockEditorComponent
- Add Yjs collaborative editing with remote cursors
How to install syncfusion-react-blockeditor
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-blockeditor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-blockeditor/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-blockeditor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-blockeditor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-blockeditor2Manually: put the files in place
.github/skills/syncfusion-react-blockeditor/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-blockeditorManually: put the files in place
.devin/skills/syncfusion-react-blockeditor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -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-blockeditor
How do I install syncfusion-react-blockeditor in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-blockeditor -a claude-code. The skill file lands at ~/.claude/skills/syncfusion-react-blockeditor/SKILL.md.
What does syncfusion-react-blockeditor do?
It guides the agent through adding Syncfusion's block-based content editor to a React app: blocks, menus, drag-and-drop, export and collaboration.
What is required for collaborative editing?
You need Yjs dependencies and a WebSocket server, for example on port 1234. The skill includes a step-by-step setup with a config file and the Collaboration and VersionHistory modules.
