Skills

Skill 10 of 22

Frameworks On Cloudflare

Build, migrate, and deploy web-framework applications on Cloudflare Workers.

2 minutes · 499 words · 3 sections

Install

$ npx skills add cloudflare/skills --skill frameworks-on-cloudflare

$ npx skills add cloudflare/skills

» /plugin marketplace add cloudflare/skills

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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 (opens in a new tab). 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

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.
Preserve the user’s framework choice. Determine whether the task starts a new project, adapts an existing project, or changes only application code.
Read only the matching row below, its Workers framework guide, and the framework’s own agent guidance.
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 (opens in a new tab) 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.
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.

Framework	Workers setup	Official upstream agent guidance
Next.js	Load the `nextjs-on-cloudflare` skill.	Listed in that skill.
TanStack Start	Follow the Workers guide (opens in a new tab), which uses the Cloudflare Vite plugin. Distinguish Start from standalone TanStack Router.	Use TanStack Intent (opens in a new tab) to discover and load installed package skills, including Start’s deployment guidance (opens in a new tab).
React Router	Identify Framework, Data, or Declarative mode. Follow the Workers guide (opens in a new tab) 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 (opens in a new tab), its matching mode reference, and installed package docs when available.
SvelteKit	Follow the Workers guide (opens in a new tab), which uses `@sveltejs/adapter-cloudflare`.	Use Svelte’s official skills (opens in a new tab) and AI setup guidance (opens in a new tab).
Hono	Choose an API-only Worker or a frontend plus API. The Cloudflare guide (opens in a new tab) covers Hono with a React SPA; use Hono’s Workers guide (opens in a new tab) for an API-only app.	Load the application skill from honojs/skills (opens in a new tab).
Astro	Distinguish 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 (opens in a new tab).	Use Astro’s official AI guidance and docs MCP (opens in a new tab).
Nuxt	Follow the Workers guide (opens in a new tab) for the current Nitro integration and bindings.	Use the Nuxt docs MCP (opens in a new tab); load the Nuxt UI skill (opens in a new tab) only when using Nuxt UI.
React or Vue SPA	Follow the React + Vite (opens in a new tab) or Vue (opens in a new tab) 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 (opens in a new tab).

Skill feedback

If the user reports that this skill gave incorrect or outdated guidance, or is missing information, read references/skill-feedback.md (opens in a new tab).

About this skill

Trigger

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 verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.

Colophon for this issue

Colophon

How this issue was made

Source

github.com/cloudflare/skills, branch main, last pushed 6 November 2026.

Licence

Apache-2.0 — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

22 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.

Issue colours

Resolved from a curated brand profile — hue 54°, chroma 0.172. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Shifted “3 headings” from h1 to h2 so the skill title is the only h1.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Marketplace

A plugin manifest is published at .claude-plugin/marketplace.json by Cloudflare, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /cloudflare/skills.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

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.

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.

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

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

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 (opens in a new tab) 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.

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.

Framework	Workers setup	Official upstream agent guidance
Next.js	Load the `nextjs-on-cloudflare` skill.	Listed in that skill.
TanStack Start	Follow the Workers guide (opens in a new tab), which uses the Cloudflare Vite plugin. Distinguish Start from standalone TanStack Router.	Use TanStack Intent (opens in a new tab) to discover and load installed package skills, including Start’s deployment guidance (opens in a new tab).
React Router	Identify Framework, Data, or Declarative mode. Follow the Workers guide (opens in a new tab) 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 (opens in a new tab), its matching mode reference, and installed package docs when available.
SvelteKit	Follow the Workers guide (opens in a new tab), which uses `@sveltejs/adapter-cloudflare`.	Use Svelte’s official skills (opens in a new tab) and AI setup guidance (opens in a new tab).
Hono	Choose an API-only Worker or a frontend plus API. The Cloudflare guide (opens in a new tab) covers Hono with a React SPA; use Hono’s Workers guide (opens in a new tab) for an API-only app.	Load the application skill from honojs/skills (opens in a new tab).
Astro	Distinguish 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 (opens in a new tab).	Use Astro’s official AI guidance and docs MCP (opens in a new tab).
Nuxt	Follow the Workers guide (opens in a new tab) for the current Nitro integration and bindings.	Use the Nuxt docs MCP (opens in a new tab); load the Nuxt UI skill (opens in a new tab) only when using Nuxt UI.
React or Vue SPA	Follow the React + Vite (opens in a new tab) or Vue (opens in a new tab) Workers guide. Distinguish a client-only SPA from a full-stack framework.	Use the chosen framework’s official guidance for application development.

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

Frameworks On Cloudflare

Build with frameworks on Cloudflare

Route the project

Skill feedback

About this skill

Trigger

Colophon

Frameworks On Cloudflare

Build with frameworks on Cloudflare

Route the project

Skill feedback

Appendix 10.1

ReferencesMarkdown · 1 file

About this skill

Trigger

Colophon

Appendix 10.1

ReferencesMarkdown · 1 file