syncfusion-react-image-editor — скилл для Claude Code: редактор
Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-codeЧто делает syncfusion-react-image-editor
Скилл описывает компонент Syncfusion React Image Editor и то, как его подключать в React-проекте. Агент получает справочники по API, установке, открытию и сохранению изображений, выделению и обрезке, повороту, зуму, аннотациям, фильтрам, слоям и редактированию конфиденциальных областей.
Внутри — набор файлов references/*.md: 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 и accessibility-localization.md. Агент читает нужный файл под задачу, а не весь набор сразу.
Компонент поддерживает PNG, JPEG, SVG, WEBP и BMP, аннотации текстом, фигурами, от руки и картинками, фильтры и тонкую настройку яркости, контраста, насыщенности, оттенка, экспозиции, размытия и прозрачности. Есть история отмены на 16 шагов, навигация с клавиатуры, поддержка RTL и более 120 ключей локализации. Скилл рассчитан на React: если у вас Vue, Angular или серверный рендеринг без клиентского канваса, он не подойдёт.
Какие задачи решает
- встроить редактирование изображений в React-приложение
- добавить текстовые и фигурные аннотации на картинку
- обрезать изображение по заданному соотношению сторон
- замазать чувствительные данные размытием или пикселизацией
- настроить панель инструментов под свои задачи
Примеры запросов агенту
- подключи Syncfusion React Image Editor и покажи, как открыть картинку из файла
- добавь на изображение текстовую аннотацию и сохрани результат в PNG
- настрой фильтры и тонкую настройку яркости и контраста в редакторе
Как установить syncfusion-react-image-editor
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-image-editor/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-image-editor/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-image-editor/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-image-editor/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-image-editor2Вручную: положить файлы
.github/skills/syncfusion-react-image-editor/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-image-editorВручную: положить файлы
.devin/skills/syncfusion-react-image-editor/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о syncfusion-react-image-editor
Как установить syncfusion-react-image-editor в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-code. Скилл появится в ~/.claude/skills/syncfusion-react-image-editor/SKILL.md.
Что делает syncfusion-react-image-editor?
Даёт агенту справочники по компоненту Syncfusion React Image Editor: API, установка, открытие и сохранение картинок, аннотации, фильтры, слои и локализация.
Какие форматы изображений поддерживаются?
PNG, JPEG, SVG, WEBP и BMP. Сохранять результат можно в PNG, JPEG, SVG и WEBP.