AutoGineer
Generated banner for Frameworks On Cloudflare
Generated logo for Frameworks On Cloudflare

Frameworks On Cloudflare

CloudflareOfficialPublished by Cloudflare

  • Skill
  • Tool integration
  • Cloud and DevOps
  • Apache-2.0
  • No issues found
Download ZIP

From the author

Build, migrate, and deploy web-framework applications on Cloudflare Workers. Use when a framework project such as Astro, SvelteKit, React Router, TanStack Start, Nuxt, Hono, or a React or Vue SPA targets Cloudflare, or when a framework repository contains Workers deployment configuration.
— the description by Cloudflare

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to deploying web applications built with frameworks like Astro, SvelteKit, React Router, TanStack Start, Nuxt, and Hono onto Cloudflare Workers. It emphasizes maintaining the framework as the primary development interface while utilizing Workers as the deployment target. The skill outlines how to assess existing project configurations, select the appropriate setup path based on whether the project is new or existing, and integrate necessary adapters or build configurations.

What it does

  • Identifies the framework, package manager, and existing configuration in a repository.
  • Provides specific setup paths for new projects versus existing projects with or without Wrangler configuration.
  • Directs users to framework-specific Workers guides for adapters and runtime configuration.
  • Advises on verifying builds and local Worker behavior before deployment.
  • Offers a standardized process for reporting feedback or issues regarding the skill's guidance.

When to use it

  • When starting a new web-framework project intended for Cloudflare Workers.
  • When migrating an existing framework application to run on Cloudflare Workers.
  • When updating deployment configurations for a framework already running on Cloudflare.
  • When troubleshooting build or deployment issues for framework-based Workers applications.

Advantages

  • Ensures consistent deployment practices across various popular web frameworks.
  • Helps distinguish between static site deployment and on-demand rendering requirements.
  • Prevents common configuration errors by identifying existing Wrangler setups.
  • Provides clear pathways for both new and legacy project structures.

Usage examples

“How do I deploy my existing SvelteKit project to Cloudflare Workers?”
The agent will guide you to inspect your current configuration, verify if you have Wrangler set up, and follow the SvelteKit-specific Workers guide to install and configure the @sveltejs/adapter-cloudflare adapter.
“I want to start a new Hono project on Cloudflare. What should I do?”
The agent will direct you to the Hono Workers guide for creating a new project, ensuring you choose between an API-only Worker or a full-stack application setup.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/cloudflare/frameworks-on-cloudflare/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip frameworks-on-cloudflare.zip -d .agents/skills

Documentation by Cloudflare

Build with frameworks on Cloudflare

Use the framework as the primary development interface and Cloudflare Workers as the deployment target. Serve static sites and SPA output with Workers Static Assets. Do not select Pages templates, Pages deployment commands, or Pages-specific presets for new applications. Preserve existing Pages deployments during unrelated maintenance.

Route the project

  1. Inspect the repository before changing it. Identify the framework, installed version, package manager, rendering mode, existing adapter, and Cloudflare configuration: cloudflare.config.ts, or wrangler.jsonc, wrangler.json, or wrangler.toml.

  2. Preserve the user's framework choice. Determine whether the task starts a new project, adapts an existing project, or changes only application code.

  3. Read only the matching row below, its Workers framework guide, and the framework's own agent guidance.

  4. Set up the project for its state:

    • New project: follow the framework's Workers guide for project creation. The guides currently create the project with C3 and configure it for Wrangler; this is an exception to the cloudflare skill's default of cf for new projects, because the cf docs do not yet cover creating framework projects. After creation, the project has Wrangler configuration, so the next bullet applies.

    • Existing project with Wrangler configuration: keep Wrangler and load the wrangler skill. Follow the framework guide for adapter and configuration changes. Do not run cf init ., cf dev, cf build, or cf deploy in it.

    • Existing project with no Cloudflare configuration: use cf, which detects supported frameworks and configures them; see Start from an existing project and the cf-cli skill. Detection does not mean the project builds. If the build fails or the framework is not supported, follow the framework guide's manual setup.

  5. Change only the adapter, runtime, build, and deployment configuration the integration requires. Inspect generated package scripts, run the framework's checks and build, then verify the Worker locally before deployment.

FrameworkWorkers setupOfficial upstream agent guidance
Next.jsLoad the nextjs-on-cloudflare skill.Listed in that skill.
TanStack StartFollow the Workers guide, which uses the Cloudflare Vite plugin. Distinguish Start from standalone TanStack Router.Use TanStack Intent to discover and load installed package skills, including Start's deployment guidance.
React RouterIdentify Framework, Data, or Declarative mode. Follow the Workers guide for full-stack setup. SPA mode is not supported with the Cloudflare Vite plugin, and prerendering has version requirements; check the guide before choosing either.Load the official React Router skill, its matching mode reference, and installed package docs when available.
SvelteKitFollow the Workers guide, which uses @sveltejs/adapter-cloudflare.Use Svelte's official skills and AI setup guidance.
HonoChoose an API-only Worker or a frontend plus API. The Cloudflare guide covers Hono with a React SPA; use Hono's Workers guide for an API-only app.Load the application skill from honojs/skills.
AstroDistinguish fully prerendered output from on-demand rendering: a static site deploys as static assets, and on-demand rendering uses @astrojs/cloudflare. Follow the Workers guide.Use Astro's official AI guidance and docs MCP.
NuxtFollow the Workers guide for the current Nitro integration and bindings.Use the Nuxt docs MCP; load the Nuxt UI skill only when using Nuxt UI.
React or Vue SPAFollow the React + Vite or Vue Workers guide. Distinguish a client-only SPA from a full-stack framework.Use the chosen framework's official guidance for application development.

For other frameworks, start from the framework guides index.

Skill feedback

If the user reports that this skill gave incorrect or outdated guidance, or is missing information, read references/skill-feedback.md.

Files

references/skill-feedback.md

Skill feedback

GitHub issues are public: anyone can read an issue once it is posted. Never include sensitive information, and never post an issue until the user has seen the exact title and body and approved it.

Use this when the user reports that the frameworks-on-cloudflare skill gave incorrect or outdated guidance, is missing information, or could be improved. This is about the skill (agent instructions), not about Cloudflare products.

What not to include

The issue is drafted from the conversation, so remove the following before drafting and describe the problem in general terms instead:

  • Credentials, API tokens, secrets, and passwords

  • Account IDs, zone IDs, and other resource identifiers

  • Customer or personal data, such as names, email addresses, and IP addresses

  • Internal hostnames and URLs

  • Private code, configuration, and logs

Steps

  1. Ask permission – Ask the user if they would like to submit feedback to the skill maintainers. If they decline, move on.

  2. Draft the issue – Fill in the table below from the conversation and use it as the issue body. Always identify which specific file and section caused the problem. Leave out everything listed in What not to include.

  3. Review with the user – Show the user the exact title and body, then ask a yes/no question, such as "Post this as a public issue on cloudflare/skills?" Submit only after the user answers yes. If they ask for changes, apply them and ask again. If they answer no, do not post. Agreeing to send feedback in step 1 is not approval of the text.

  4. Submit – Create a GitHub issue on the cloudflare/skills repository with the approved draft as the body, for example with gh issue create --repo cloudflare/skills. The title must follow this format: skill-feedback: frameworks-on-cloudflare: <summary of the problem>.

  5. Share the result – Share the issue URL with the user after submission. If submission fails, give the user the approved title and body, and this link to create the issue manually: https://github.com/cloudflare/skills/issues/new

Issue body

FieldValue
Typebug (incorrect guidance), outdated, missing, or improvement
Skillframeworks-on-cloudflare
SourceFile and section, e.g. SKILL.md > "Section name" or references/<file>.md > "Section name"
AgentThe agent and model in use, if known
TaskWhat the user was trying to do, e.g. "deploy a preview"
ExpectedWhat should have happened, e.g. "Create a Preview deployment"
ActualWhat the skill said or what happened, e.g. "Unknown option: --preview"
ImpactThe effect on the user, e.g. "Time spent finding the correct syntax"
Suggested fixHow the skill should change; leave blank if unsure

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Cloudflare
Publisher
Cloudflare (Official)
Source
cloudflare/skills · skills/frameworks-on-cloudflare · commit 6eb6c78
Licence
Apache License 2.0 (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Cloudflare or Cloudflare.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download frameworks-on-cloudflare.zip