syncfusion-react-rich-text-editor — Claude Code skill
Configures the Syncfusion React Rich Text Editor for HTML or Markdown editing. Useful for setting up toolbars, media uploads, and document export in React apps.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a claude-codeWhat syncfusion-react-rich-text-editor does
This skill guides the integration of RichTextEditorComponent from @syncfusion/ej2-react-richtexteditor. It covers switching between WYSIWYG and Markdown modes, inserting media files, and enabling smart inputs like slash commands, mentions, and emoji pickers.
Syncfusion uses modular injection via the <Inject /> element. If you load unused services, the bundle size grows needlessly. You choose only what is required, such as Toolbar, PasteCleanup, QuickToolbar, or AIAssistant.
Styling depends on external CSS, such as @syncfusion/ej2-tailwind3-theme. The skill also details two-way data binding, auto-saving with saveInterval, paste sanitation, and exporting editor contents to Word or PDF formats.
What it helps with
- set up HTML and Markdown editing modes in React
- insert images, videos, audio, and file links
- configure slash commands, mentions, and emoji pickers
- export editor content to PDF or Word documents
Example prompts for the agent
- Add a RichTextEditorComponent with Markdown mode, character counter, and a floating toolbar.
- Configure paste cleanup and slash commands for the Syncfusion React editor.
- Show how to inject AIAssistant and setup auto-save with saveInterval.
How to install syncfusion-react-rich-text-editor
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-rich-text-editor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-rich-text-editor/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-rich-text-editor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-rich-text-editor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-rich-text-editor2Manually: put the files in place
.github/skills/syncfusion-react-rich-text-editor/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-rich-text-editorManually: put the files in place
.devin/skills/syncfusion-react-rich-text-editor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -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-rich-text-editor
How do I install syncfusion-react-rich-text-editor in Claude Code?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a claude-code.
What does syncfusion-react-rich-text-editor do?
It guides developers through implementing the Syncfusion React editor component, configuring modular services, toolbar actions, and media inserts.
What dependencies are needed in the React project?
You need the @syncfusion/ej2-react-richtexteditor package and a theme stylesheet, such as @syncfusion/ej2-tailwind3-theme.
