К основному содержанию
скилл CX Codex

syncfusion-react-image-editor — скилл для Claude Code: редактор

Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-image-editor -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/syncfusion-react-image-editor/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-image-editor/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора15

syncfusion-react-tabs Помогает агенту собрать и настроить компонент Tab из Syncfusion для React: заголовки, перетаскивание, ленивую загрузку контента. CX Codex +1 710установок syncfusion-react-barcode Скилл для генерации штрихкодов, QR-кодов и Data Matrix в React через компоненты Syncfusion. Пригодится, когда нужно встроить коды в форму, отчёт или этикетку. CX Codex +1 706установок syncfusion-react-dashboard-layout Скилл для ИИ-агента: подсказывает, как собрать дашборд на React с перетаскиваемыми панелями Syncfusion. CX Codex +1 703установок syncfusion-react-maps Помогает агенту собрать географическую карту на React: GeoJSON, маркеры, пузыри, легенда, хороплет. Пригодится, когда данные нужно показать по регионам. CX Codex +1 702установок syncfusion-react-blockeditor Скилл помогает агенту подключить Syncfusion React BlockEditor: блочный редактор контента с меню, drag-and-drop и совместной работой. CX Codex +1 701установок syncfusion-react-treeview Скилл для ИИ-агента, который помогает собрать иерархический TreeView из @syncfusion/ej2-react-navigations: выбор узлов, чекбоксы, drag-drop, инлайн-редактирование. CX Codex +1 700установок syncfusion-react-popups Скилл для ИИ-агентов, который подсказывает, как собирать модальные окна, тултипы и поповеры на компонентах Syncfusion для React. CX Codex +1 658установок syncfusion-react-3d-chart Скилл помогает агенту собрать объёмные столбчатые и линейчатые диаграммы Syncfusion в React-проекте. Пригодится, когда нужен график с осями, легендой и экспортом. CX Codex +1 656установок

Похожие

typescript-react-patterns agent-skills Скилл с 33 правилами типизации React на TypeScript: пропсы, хуки, события, refs, дженерики и контекст. Пригодится, когда агент пишет компоненты и лезет в типы. CX Codex +1 1 100установок react-component-architecture aj-geddes Скилл задаёт агенту правила проектирования React-компонентов: функциональные компоненты, хуки, композиция и TypeScript. Пригодится, когда растёт библиотека переиспользуемых компонентов. CX Codex +1 674установок react-router-v7 existential-birds Скилл с практиками React Router v7: подсказывает, когда брать loader, Form или fetcher, и как настраивать вложенные маршруты. CX Codex +1 572установок react-performance-optimization davila7 Субагент ищет и чинит узкие места React-приложений: лишние ре-рендеры, раздутый бандл, утечки памяти. Пригодится, когда страница тормозит или просели Core Web Vitals. 3 935установок react-patterns affaan-m Скилл для Claude и других ИИ-редакторов: подсказывает, как писать компоненты React 18/19 — хуки, границы серверных и клиентских компонентов, формы, загрузку данных. CX Codex +1 4 900установок react-spring-physics freshtechbro Скилл для React-анимаций на физике пружин: React Spring и Popmotion. Пригодится, когда нужны жесты, инерция и прерываемые переходы. CX Codex +1 2 400установок

Рядом в теме «Фронтенд и 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.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой