Agent skill
cloudflare-features
Configure and use Cloudflare integrations — Email Routing for the contact form, AI Gateway for media generation, Cloudflare Access for protected pages, and Image Transforms for on-the-fly image optimization. Use when the user mentions "email", "contact form", "AI gateway", "fal.ai", "cloudflare access", "protected pages", "JWT", "authentication", "image transforms", "cdn-cgi", or "cloudflare bindings".
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/cloudflare-features
SKILL.md
Cloudflare Features
Website Foundation integrates four Cloudflare services, all accessed through Worker bindings.
Email Routing
Send emails from the contact form using the SEND_EMAIL binding. The sendEmail() function in src/lib/email.ts builds a MIME message and sends via EmailMessage from cloudflare:email. A honeypot field silently discards bot submissions.
See email routing reference.
AI Gateway
Generate images and videos through Cloudflare AI Gateway, which proxies requests to fal.ai. The gateway handles API key management (BYOK — Bring Your Own Key configured in the dashboard). Access the gateway URL with:
const gatewayUrl = await env.AI.gateway(env.AI_GATEWAY_NAME).getUrl("fal");
Important: getUrl() is async — always await it.
See AI Gateway reference.
Cloudflare Access
Protect pages and API routes with Cloudflare Access JWT verification. The verifyAccessJwt() function in src/lib/access.ts reads the Cf-Access-Jwt-Assertion header and verifies it against Cloudflare's JWKS endpoint using the jose library.
See Access JWT reference.
Image Transforms
Optimize images on-the-fly using Cloudflare's /cdn-cgi/image/ endpoint. The buildImageUrl() function in src/lib/cloudflare-image.ts constructs transformation URLs with width, height, quality, format, and fit parameters.
Important: Image transforms only work on Cloudflare-served domains — they will 404 on localhost or non-CF domains.
Accessing Bindings
// In API routes
const env = context.locals.runtime.env;
// In Astro pages
const env = Astro.locals.runtime.env;
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?