# syncfusion-react-image-editor

A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 713 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-image-editor/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-image-editor

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-image-editor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-image-editor/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-image-editor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-image-editor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-image-editor
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-image-editor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-image-editor
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-image-editor/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-image-editor/SKILL.md

## When to use it
- 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
- 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

## Similar
- [typescript-react-patterns](https://affpapa.org/en/nevibecode/skills/typescript-react-patterns.md) — skill · 1100 installs
- [react-component-architecture](https://affpapa.org/en/nevibecode/skills/react-component-architecture.md) — skill · 674 installs
- [react-router-v7](https://affpapa.org/en/nevibecode/skills/react-router-v7.md) — skill · 572 installs
- [react-performance-optimization](https://affpapa.org/en/nevibecode/agents/react-performance-optimization.md) — subagent · 3935 installs
- [react-patterns](https://affpapa.org/en/nevibecode/skills/affaan-m-react-patterns.md) — skill · 4900 installs
- [react-spring-physics](https://affpapa.org/en/nevibecode/skills/react-spring-physics.md) — skill · 2400 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 16 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md