syncfusion-react-image-editor — Claude Code skill: image editor
A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-codeWhat syncfusion-react-image-editor does
The skill documents the Syncfusion React Image Editor component and how to bring it into a React project. The agent gets reference files on the API, setup, opening and saving images, selection and cropping, rotation, zoom, annotations, filters, layers and redaction.
Inside are references/*.md files: api.md, getting-started.md, opening-saving-images.md, selection-cropping.md, transform-rotate-flip.md, zooming-panning.md, text-annotations.md, freehand-drawing.md, shape-annotations.md, image-annotations.md, filters.md, finetune.md, undo-redo.md, toolbar-customization.md, quick-access-toolbar.md, resize-image.md, frame-decoration.md, z-order-layering.md, redact-sensitive-info.md and accessibility-localization.md. The agent reads the one file that matches the task instead of the whole set.
The component handles PNG, JPEG, SVG, WEBP and BMP, annotations as text, shapes, freehand strokes and images, plus filters and fine-tuning of brightness, contrast, saturation, hue, exposure, blur and opacity. There is a 16-step undo history, keyboard navigation, RTL support and more than 120 localization keys. This is a React skill: on Vue, Angular or server-side rendering without a client canvas it will not help.
What it helps with
- add image editing to a React app
- place text and shape annotations on an image
- crop an image to a fixed aspect ratio
- blur or pixelate sensitive areas
- trim the toolbar down to the tools you need
Example prompts for the agent
- set up Syncfusion React Image Editor and show me how to open an image from a file
- add a text annotation to the image and save the result as PNG
- configure filters and fine-tune brightness and contrast in the editor
How to install syncfusion-react-image-editor
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-image-editor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-image-editor/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-image-editor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-image-editor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-image-editor2Manually: put the files in place
.github/skills/syncfusion-react-image-editor/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-image-editorManually: put the files in place
.devin/skills/syncfusion-react-image-editor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-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-image-editor
How do I install syncfusion-react-image-editor in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-code. The skill lands in ~/.claude/skills/syncfusion-react-image-editor/SKILL.md.
What does syncfusion-react-image-editor do?
It gives the agent reference docs for the Syncfusion React Image Editor component: API, setup, opening and saving images, annotations, filters, layers and localization.
Which image formats are supported?
PNG, JPEG, SVG, WEBP and BMP. Results can be saved as PNG, JPEG, SVG or WEBP.
