Agent skill · marketing growth · secondsky
cloudflare-images
This skill should be used when the user asks to \"upload images to Cloudflare\", \"implement direct creator upload\", \"configure image transformations\", \"optimize WebP/AVIF\", \"create image variants\", \"generate signed URLs\", \"add image watermarks\", \"integrate with Next.js/Remix\", \"configure webhooks\", \"debug CORS errors\", \"troubleshoot error 5408/9401-9413\", or \"build responsive images with Cloudflare Images API\".
Why this skill is useful
Adds specific commands and workflows for integrating Cloudflare Images API that the AI wouldn't reliably generate on its own.
What it needs
Requires cloudflare account access. About 6k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Cloudflare Images Status: Production Ready ✅ Version: 3.0.0 Last Verified: 2025-12-27 --- What Is Cloudflare Images? Two powerful features: 1. Images API: Upload, store, serve images globally 2. Image Transformations: Resize/optimize ANY image Key benefits: Global CDN delivery Automatic WebP/AVIF conversion Up to 100 variants Direct creator upload (no API keys in frontend) Signed URLs for private images Transform any image via URL or Workers --- Quick Start (5 Minutes) 1. Enable Cloudflare Images Dashboard → Images → Enable Get your Account ID and create API token (Cloudflare Images: Edit permission) 2. Upload Image CRITICAL: Use multipart/form-data, not JSON 3. Serve Image 4. Enable Transformations Dashboard → Images → Transformations → Enable for zone Transform ANY image: 5. Transform via Workers Load references/setup-guide.md for complete walkthrough. --- The 3 Core Features Feature 1: Images API (Upload & Storage) Upload methods: 1. File upload (server-side) 2. Upload via URL (ingest from external) 3. Direct creator upload (user uploads, no API keys) Load templates/upload-api-basic.ts for file upload example. Load references/direct-upload-complete-workflow.md for user uploads. Feature 2: Image Transformations Optimize ANY image (uploaded or external). Methods: 1. URL: /cdn-cgi/image/width=800,quality=85/path/to/image.jpg 2. Workers: cf.image fetch option Load references/transformation-options.md for all options. Load templates/transform-via-workers.ts for Workers example. Feature 3: Variants Predefined transformations (up to 100). Examples: thumbnail: 200x200, fit=cover hero: 1920x1080, quality=90 mobile: 640, quality=75 Load references/variants-guide.md for complete guide. --- Critical Rules Always Do ✅ 1. Use multipart/form-data for uploads (not JSON) 2. Enable transformations for zones before using /cdn-cgi/image/ 3. Use direct creator upload for user uploads (don't expose API tokens) 4. Set CORS headers for direct uploads from browser 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/cloudflare-images