AIKraft/AI/Войти
AIKraft/Skills/cloudinary react

cloudinary react

Provides opinionated React SDK patterns for configuration, common integration scenarios, and troubleshooting for frequent errors and TypeScript pitfalls. Use when writing code or answering questions related to the Cloudinary React SDK.

cloudinary-devs official Документы

Что делает навык

Навык предоставляет паттерны использования React SDK для Cloudinary, включая конфигурацию, типичные сценарии интеграции и устранение ошибок TypeScript. Он помогает при разработке или отладке приложений на базе React с использованием компонентов Cloudinary.

Когда применять

  • Разработка или отладка интеграции Cloudinary в React-приложениях (Vite, Create React App, Parcel).
  • Реализация или исправление работы Upload Widget, AdvancedImage/AdvancedVideo, трансформаций, оверлеев, галерей изображений и видеоплеера.
  • Решение проблем с ошибками импорта, такими как 'createUploadWidget is not a function', проблемы с upload preset или ошибки DOM видеоплеера.
  • Настройка подписанных (signed) и неподписанных (unsigned) загрузок.

Как работает

  1. Создать конфигурационный файл с экземпляром cld (согласно разделу Project setup).
  2. Для отображения изображения создать объект через cld.image('id').resize(fill().width(800)) и передать его в компонент <AdvancedImage cldImg={img} />.
  3. Для Upload Widget добавить скрипт в index.html и использовать useEffect для опроса (poll) функции createUploadWidget.
  4. Для наложения изображений или текста использовать source(text(...)) или source(image(...)), соблюдая пути импорта из таблицы импорта.
  5. При возникновении ошибок обращаться к разделам references/signed-uploads.md и references/troubleshooting.md.

Примеры запросов агенту

Как настроить отображение изображения с трансформацией resize в React с помощью Cloudinary SDK?
Почему возникает ошибка 'createUploadWidget is not a function' и как правильно подключить Upload Widget?
Как добавить текстовый оверлей на изображение в AdvancedImage, используя правильные импорты?

Что понадобится

  • React-приложение (Vite, Create React App, Parcel и т.д.)
  • Пакеты @cloudinary/url-gen и Cloudinary React SDK

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «cloudinary-react» из репозитория: # https://github.com/cloudinary-devs/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r cloudinary-react/ ~/.claude/skills/cloudinary-react/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.