Scaffold and deploy Cloudflare Workers with Hono routing, Vite plugin, and Static Assets. Workflow: describe project, scaffold structure, configure bindings, deploy. Use when creating Workers projects, setting up Hono/Vite, configuring D1/R2/KV bindings, or troubleshooting export syntax errors, API route conflicts, HMR issues, or deployment failures.
Scaffolds and deploys Cloudflare Workers projects with Hono routing, Vite plugin, and Static Assets configuration.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/package.jsonassets/public/index.htmlassets/public/script.jsassets/public/styles.cssassets/src/index.tsassets/tsconfig.jsonassets/vite.config.tsassets/wrangler.jsoncreferences/architecture.mdreferences/common-issues.mdreferences/deployment.mdScaffold a working Cloudflare Worker project from a brief description. Produces a deployable project with Hono routing, Vite dev server, and Static Assets.
Ask about the project to choose the right bindings and structure:
A brief like "todo app with database" is enough to proceed.
npm create cloudflare@latest my-worker -- --type hello-world --ts --git --deploy false --framework none
cd my-worker
npm install hono
npm install -D @cloudflare/vite-plugin vite
Copy and customise the asset files from this skill's assets/ directory:
wrangler.jsonc — Worker configurationvite.config.ts — Vite + Cloudflare pluginsrc/index.ts — Hono app with Static Assets fallbackpackage.json — Scripts and dependenciestsconfig.json — TypeScript configpublic/index.html — SPA entry pointAdd bindings to wrangler.jsonc based on project needs. Wrangler 4.45+ auto-provisions resources on first deploy — always specify explicit names:
{
"name": "my-worker",
"main": "src/index.ts",
"compatibility_date": "2025-11-11",
"assets": {
"directory": "./public/",
"binding": "ASSETS",
"not_found_handling": "single-page-application",
"run_worker_first": ["/api/*"]
},
// Add as needed:
"d1_databases": [{ "binding": "DB", "database_name": "my-app-db" }],
"r2_buckets": [{ "binding": "STORAGE", "bucket_name": "my-app-files" }],
"kv_namespaces": [{ "binding": "CACHE", "title": "my-app-cache" }]
}
npm run dev # Local dev at http://localhost:8787
wrangler deploy # Production deploy
// CORRECT — use this pattern
export default app
// WRONG — causes "Cannot read properties of undefined"
export default { fetch: app.fetch }
Source: honojs/hono #3955
Without run_worker_first, SPA fallback intercepts API routes and returns index.html instead of JSON:
"assets": {
"not_found_handling": "single-page-application",
"run_worker_first": ["/api/*"] // CRITICAL
}
Source: workers-sdk #8879
import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
export default defineConfig({ plugins: [cloudflare()] })
Always set the main field in wrangler.jsonc — the Vite plugin needs it.
When adding cron triggers, switch to explicit export:
export default {
fetch: app.fetch,
scheduled: async (event, env, ctx) => { /* ... */ }
}
Read these for detailed troubleshooting:
references/common-issues.md — 10 documented issues with sources and fixesreferences/architecture.md — Route priority, caching, Workers RPCreferences/deployment.md — CI/CD, auto-provisioning, gradual rolloutsExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.