Cloudinary React Skill

When to Use

• When a user is building or debugging Cloudinary in a React app (Vite, Create React App, Parcel, etc.).
• When implementing or fixing: Upload Widget, AdvancedImage/AdvancedVideo, transformations, overlays, image galleries, video player, or signed/unsigned uploads.
• When the user sees errors like "createUploadWidget is not a function", wrong imports from @cloudinary/url-gen, upload preset issues, or video player DOM errors.

Quick Start

Most common operations:

1. Setup: Create config file with cld instance (see Project setup section)
2. Display image: const img = cld.image('id').resize(fill().width(800)); <AdvancedImage cldImg={img} />
3. Upload Widget: Script in index.html + poll for createUploadWidget in useEffect
4. Image overlay: Use source(text(...)) or source(image(...)) - see Import reference table for exact paths
5. Signed uploads: See references/signed-uploads.md
6. Troubleshooting: See references/troubleshooting.md