Agent skill

Cloudflare Workers Frameworks

by secondsky in secondsky/claude-skills

Framework integration for Cloudflare Workers. An agent skill from secondsky/claude-skills.

MITAuto-check passedFrontend & Design

Install Cloudflare Workers Frameworks

skills CLI
$ npx skills add secondsky/claude-skills --skill cloudflare-workers-frameworks -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install secondsky/claude-skills cloudflare-workers-frameworks --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/cloudflare-workers/skills/cloudflare-workers-frameworks .claude/skills/cloudflare-workers-frameworks && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cloudflare-workers-frameworks
GitHub stars
227
Token cost
~1.4k tokens
SKILL.md length
302 words
Files
15 (incl. references)
Skills in repo
169
Repo updated
First seen
Licence
MIT

At a glance

Framework integration for Cloudflare Workers. An agent skill from secondsky/claude-skills.

  • Works in 5 steps: Bundle Size: Keep under 1MB compressed → Cold Starts: Minimize top-level code → Streaming: Use streaming SSR when… → …
  • Building with Hono
  • SKILL.md covers Quick Start: Choose Your…, Framework Decision Tree, Top 10 Framework Errors and Hono Quick Start (Recommended), plus 5 more sections
  • Runs TypeScript scripts from its folder

What it does

Cloudflare Workers Frameworks is an agent skill from secondsky/claude-skills. Framework integration for Cloudflare Workers. Use when building with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt on Workers. Covers routing, SSR, static assets, and edge deployment.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including reference files (for example `references/astro.md`, `references/hono.md` and `references/nextjs.md`).

It sits in Frontend & Design, covering Static sites and blogs and Deployment. It works with Cloudflare Workers, Hono, Next.js and Astro. The repository describes itself as: Production-ready skills for Claude Code CLI - Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.

When your agent uses it

  • Building with Hono
  • Nuxt on Workers

Example prompts

  • “/cloudflare-workers-frameworks”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Bundle Size: Keep under 1MB compressed
  2. Cold Starts: Minimize top-level code
  3. Streaming: Use streaming SSR when available
  4. Caching: Leverage Cache API and CDN
  5. Code Splitting: Dynamic imports for routes

What it can do on your machine

Read from SKILL.md and the folder at commit 8837836. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (TypeScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Cloudflare Workers Frameworks loads about 1.4k tokens when it runs, and up to ~21k if it reads all its reference files. Until then it costs about 55 tokens; SKILL.md has 302 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~55
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~21k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from secondsky/claude-skills at commit 8837836, republished under its MIT licence (© secondsky). 302 words, ~1,415 tokens.

Download SKILL.mdSave it as .claude/skills/cloudflare-workers-frameworks/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.
name
cloudflare-workers-frameworks
description
Framework integration for Cloudflare Workers. Use when building with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt on Workers. Covers routing, SSR, static assets, and edge deployment.
metadata.version
1.0.0
license
MIT

Workers Frameworks Integration

Build full-stack applications on Cloudflare Workers using modern frameworks.

Quick Start: Choose Your Framework

FrameworkBest ForSSRStaticWorkers Native
HonoAPIs, lightweight apps✅✅✅ Native
RemixFull-stack apps✅✅✅ Adapter
Next.jsReact apps✅✅⚠️ OpenNext
AstroContent sites✅✅✅ Adapter
SvelteKitSvelte apps✅✅✅ Adapter
QwikResumable apps✅✅✅ Adapter
NuxtVue apps✅✅✅ Nitro

Framework Decision Tree

Need an API only?
  └─ Yes → Hono (fastest, smallest)
  └─ No → Building a full app?
           └─ React → Next.js (OpenNext) or Remix
           └─ Vue → Nuxt
           └─ Svelte → SvelteKit
           └─ Content-heavy → Astro
           └─ Max performance → Qwik

Top 10 Framework Errors

ErrorFrameworkCauseSolution
No matching export "default"AllWrong export formatUse export default app not module.exports
Worker exceeded CPU limitNext.jsHeavy SSRUse ISR, reduce bundle size
Cannot read properties of undefined (reading 'env')RemixMissing contextPass context to loader/action
globalThis is not definedAllNode.js globalsUse nodejs_compat flag
Dynamic require not supportedAllCJS in ESMConvert to ESM imports
Response body is lockedAllBody already readClone response before reading
Bindings not availableAllMissing wrangler configAdd bindings to wrangler.jsonc
404 on static assetsAllWrong assets configConfigure assets in wrangler.jsonc
Hydration mismatchReact/VueServer/client differEnsure consistent rendering
Maximum call stack exceededAllCircular importsRefactor module structure
typescript
// src/index.ts
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { logger } from 'hono/logger';

interface Env {
  DB: D1Database;
  KV: KVNamespace;
}

const app = new Hono<{ Bindings: Env }>();

// Middleware
app.use('*', logger());
app.use('/api/*', cors());

// Routes
app.get('/', (c) => c.text('Hello Workers!'));

app.get('/api/users', async (c) => {
  const { results } = await c.env.DB.prepare('SELECT * FROM users').all();
  return c.json(results);
});

app.post('/api/users', async (c) => {
  const { name, email } = await c.req.json();
  await c.env.DB.prepare('INSERT INTO users (name, email) VALUES (?, ?)')
    .bind(name, email)
    .run();
  return c.json({ success: true }, 201);
});

export default app;
jsonc
// wrangler.jsonc
{
  "name": "my-app",
  "main": "src/index.ts",
  "compatibility_date": "2024-12-01",
  "compatibility_flags": ["nodejs_compat"],
  "d1_databases": [
    { "binding": "DB", "database_name": "my-db", "database_id": "xxx" }
  ]
}

Static Assets Configuration

jsonc
// wrangler.jsonc - Serving static files
{
  "name": "my-app",
  "main": "src/index.ts",
  "assets": {
    "directory": "./public",
    "binding": "ASSETS"
  }
}
typescript
// Serve static with fallback to app
import { Hono } from 'hono';

const app = new Hono<{ Bindings: { ASSETS: Fetcher } }>();

// API routes
app.get('/api/*', apiHandler);

// Static assets fallback
app.get('*', async (c) => {
  return c.env.ASSETS.fetch(c.req.raw);
});

export default app;

When to Load References

Load the specific framework reference when user:

ReferenceLoad When
references/hono.mdBuilding APIs, microservices, or lightweight apps
references/remix.mdFull-stack React with loaders/actions
references/nextjs.mdNext.js App Router on Workers via OpenNext
references/astro.mdContent sites, blogs, docs, marketing pages
references/sveltekit.mdSvelte applications on Workers
references/qwik.mdResumable apps, instant loading
references/nuxt.mdVue 3 applications with Nitro

Common Patterns Across Frameworks

Environment Bindings Access
typescript
// Hono
app.get('/', (c) => c.env.DB.prepare('...'));

// Remix
export async function loader({ context }) {
  return context.cloudflare.env.DB.prepare('...');
}

// Astro
const db = Astro.locals.runtime.env.DB;

// SvelteKit
export async function load({ platform }) {
  return platform.env.DB.prepare('...');
}

// Nuxt
const { cloudflare } = useRuntimeConfig();
// Or via nitro: event.context.cloudflare.env.DB
Error Handling Pattern
typescript
// Universal error boundary pattern
app.onError((err, c) => {
  console.error(`[${c.req.path}] ${err.message}`);

  if (err instanceof HTTPException) {
    return err.getResponse();
  }

  return c.json(
    { error: 'Internal Server Error' },
    500
  );
});

Performance Tips

  1. Bundle Size: Keep under 1MB compressed
  2. Cold Starts: Minimize top-level code
  3. Streaming: Use streaming SSR when available
  4. Caching: Leverage Cache API and CDN
  5. Code Splitting: Dynamic imports for routes

See Also

  • workers-performance - Optimization techniques
  • workers-runtime-apis - Workers APIs reference
  • cloudflare-worker-base - Basic Workers setup

© secondsky, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (references) in plugins/cloudflare-workers/skills/cloudflare-workers-frameworks of secondsky/claude-skills.

  • SKILL.md
  • references/astro.md
  • references/hono.md
  • references/nextjs.md
  • references/nuxt.md
  • references/qwik.md
  • references/remix.md
  • references/sveltekit.md
  • templates/astro-page.astro
  • templates/hono-app.ts
  • templates/nextjs-route.ts
  • templates/nuxt-server.ts
  • templates/qwik-route.tsx
  • templates/remix-loader.tsx
  • templates/sveltekit-route.ts

Open the folder on GitHubat commit 8837836

Compare with similar skills

Cloudflare Workers Frameworks next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Cloudflare Workers Frameworks compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cloudflare Workers Frameworks this skillsecondsky/claude-skills227—~1.4kAutomated safety check: PassMIT
Sanity Best Practicesrobotostudio/turbo-start-sanity182—~940Automated safety check: PassMIT
App BuilderUndertone0809/rudder292—~2kAutomated safety check: PassApache-2.0
Sanity Best Practicessanity-io/agent-toolkit187—~1.3kAutomated safety check: PassMIT
Vue Nuxtericrisco/rsc-harness156—~4.2kAutomated safety check: PassMIT
Prisma Computeaiskillstore/marketplace430—~3.8kAutomated safety check: NotesMIT

Similar skills

  • Sanity Best Practices

    robotostudio/turbo-start-sanity

    Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and…

    182 GitHub stars~940 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • App Builder

    Undertone0809/rudder

    Create and iteratively improve local web products from natural-language requests, then prepare them to run as Rudder Apps.

    292 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Sanity Best Practices

    sanity-io/agent-toolkit

    Official

    Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints…

    187 GitHub stars~1.3k tokensUpdated 2 days ago
    Backend & APIsAuto-check passed
  • Vue Nuxt

    ericrisco/rsc-harness

    A skill your agent uses when building or reviewing a Vue 3 + Nuxt 4 app — <script setup reactivity, SSR/SSG/hybrid routeRules, the app/+server/ layout, SSR-safe fetching (useFetch/useAsyncData) and…

    156 GitHub stars~4.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Prisma Compute

    aiskillstore/marketplace

    Prisma Compute deployment and hosting guide. An agent skill from aiskillstore/marketplace.

    430 GitHub stars~3.8k tokensUpdated today
    DatabasesAuto-check: notes
  • Vercel Optimize Audit

    vercel-labs/agent-skills

    Official

    Runs a metrics-first audit of a deployed Vercel project, gating investigations on real signals to produce ranked, citation-backed cost and performance recommendations.

    32k GitHub starsUsed in 8 repos~4.3k tokens
    DevOps & CloudAuto-check passed

More from secondsky/claude-skills

All 169 skills in this repo
  • Tanstack AI

    secondsky/claude-skills

    TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama.

    227 GitHub starsUsed in 1 repo~3.6k tokens
    Auto-check: notes
  • Auto Animate

    secondsky/claude-skills

    AutoAnimate (@formkit/auto-animate) zero-config animations for React.

    227 GitHub stars~2.9k tokensUpdated 9 days ago
    Auto-check passed
  • Base UI React

    secondsky/claude-skills

    MUI Base UI unstyled React components with Floating UI. An agent skill from secondsky/claude-skills.

    227 GitHub stars~1.9k tokensUpdated 9 days ago
    Auto-check passed
  • Cloudflare Images

    secondsky/claude-skills

    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"…

    227 GitHub stars~3.6k tokensUpdated 9 days ago
    Auto-check: notes
  • Cloudflare Nextjs

    secondsky/claude-skills

    Deploy Next.js to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare).

    227 GitHub stars~5.3k tokensUpdated 9 days ago
    Auto-check: notes
  • Cloudflare Sandbox

    secondsky/claude-skills

    Cloudflare Sandboxes SDK for secure code execution in Linux containers at edge.

    227 GitHub stars~4.5k tokensUpdated 9 days ago
    Auto-check passed

Questions about Cloudflare Workers Frameworks

What does Cloudflare Workers Frameworks do?

Framework integration for Cloudflare Workers. An agent skill from secondsky/claude-skills. Cloudflare Workers Frameworks is an agent skill from secondsky/claude-skills. Framework integration for Cloudflare Workers.

When should I use Cloudflare Workers Frameworks?

Cloudflare Workers Frameworks fits situations like: building with Hono; nuxt on Workers.

How do I install Cloudflare Workers Frameworks in Claude Code?

Run `npx skills add secondsky/claude-skills --skill cloudflare-workers-frameworks -a claude-code`. Or copy the skill folder (plugins/cloudflare-workers/skills/cloudflare-workers-frameworks in secondsky/claude-skills) into .claude/skills/cloudflare-workers-frameworks in your project. Claude Code loads it when a task matches its description.

How do I install Cloudflare Workers Frameworks in Codex?

Run `npx skills add secondsky/claude-skills --skill cloudflare-workers-frameworks -a codex`. Or copy the skill folder (plugins/cloudflare-workers/skills/cloudflare-workers-frameworks in secondsky/claude-skills) into .agents/skills/cloudflare-workers-frameworks in your project. Codex loads it when a task matches its description.

Can I use Cloudflare Workers Frameworks in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add secondsky/claude-skills --skill cloudflare-workers-frameworks -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cloudflare-workers-frameworks, .gemini/skills/cloudflare-workers-frameworks, .github/skills/cloudflare-workers-frameworks and .opencode/skills/cloudflare-workers-frameworks in your project.

What does Cloudflare Workers Frameworks need to run?

Going by SKILL.md and its folder, Cloudflare Workers Frameworks needs TypeScript for the scripts in its folder. Our summary lists: Node.js.

Does Cloudflare Workers Frameworks access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Cloudflare Workers Frameworks safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Cloudflare Workers Frameworks use?

Cloudflare Workers Frameworks is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Cloudflare Workers Frameworks use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 20k tokens, read only when the agent opens those files.

What are the alternatives to Cloudflare Workers Frameworks?

Skills that share tags, products or a category with Cloudflare Workers Frameworks: Sanity Best Practices (robotostudio/turbo-start-sanity, 182 stars), App Builder (Undertone0809/rudder, 292 stars), Sanity Best Practices (sanity-io/agent-toolkit, 187 stars) and Vue Nuxt (ericrisco/rsc-harness, 156 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cloudflare Workers Frameworks?

secondsky (a GitHub user) maintains it in secondsky/claude-skills, which has 227 GitHub stars. The repository holds 169 skills in this directory. The repository was last updated on September 28, 2026.

Source: secondsky/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.