Set up Cloudflare Workers with Hono routing, Vite plugin, and Static Assets using production-tested patterns. Prevents 6 errors: export syntax, routing conflicts, HMR crashes, and Service Worker format confusion. Use when: creating Workers projects, configuring Hono or Vite for Workers, deploying with Wrangler, adding Static Assets with SPA fallback, or troubleshooting export syntax, API route conflicts, scheduled handlers, or HMR race conditions. Keywords: Cloudflare Workers, CF Workers, Hono, wrangler, Vite, Static Assets, @cloudflare/vite-plugin, wrangler.jsonc, ES Module, run_worker_first, SPA fallback, API routes, serverless, edge computing, "Cannot read properties of undefined", "Static Assets 404", "A hanging Promise was canceled", "Handler does not export", deployment fails, routing not working, HMR crashes
Status: ✅ Production Ready Last Updated: 2025-10-20 Production Example: https://cloudflare-worker-base-test.webfonts.workers.dev
Sets up production-ready Cloudflare Workers projects with:
Prevents 6 documented issues that commonly break Workers projects.
Claude automatically uses this skill when you mention:
| Issue | Error Message | Source | Prevention |
|-------|---------------|--------|------------|
| #1: Export Syntax | "Cannot read properties of undefined (reading 'map')" | hono #3955 | Use export default app |
| #2: Routing Conflicts | API routes return index.html | workers-sdk #8879 | run_worker_first: ["/api/*"] |
| #3: Scheduled Handler | "Handler does not export scheduled()" | vite-plugins #275 | Module Worker format when needed |
| #4: HMR Race | "A hanging Promise was canceled" | workers-sdk #9518 | Use vite-plugin@1.13.13+ |
| #5: Upload Race | Non-deterministic deployment failures | workers-sdk #7555 | Wrangler 4.x+ with retry |
| #6: Format Confusion | Using deprecated Service Worker format | Cloudflare migration guide | ES Module format |
# 1. Scaffold project
npm create cloudflare@latest my-worker -- --type hello-world --ts --git --deploy false --framework none
# 2. Install dependencies
cd my-worker
npm install hono@4.10.1
npm install -D @cloudflare/vite-plugin@1.13.13 vite@latest
# 3. Configure (see SKILL.md for full setup)
# 4. Dev & Deploy
npm run dev
npm run deploy
Full instructions: See SKILL.md
Without this skill: ~8,000 tokens (documentation lookups + trial-and-error fixing errors) With this skill: ~3,000 tokens (direct implementation with correct patterns)
Savings: ~60% token reduction + prevents all 6 common errors on first attempt
cloudflare-worker-base/
├── SKILL.md # Full instructions (read this first)
├── README.md # This file
├── templates/ # Copy-ready files
│ ├── wrangler.jsonc # Worker configuration
│ ├── vite.config.ts # Vite + plugin setup
│ ├── package.json # Dependencies
│ ├── tsconfig.json # TypeScript config
│ ├── src/
│ │ └── index.ts # Hono app with API routes
│ └── public/ # Static assets example
│ ├── index.html
│ ├── styles.css
│ └── script.js
└── reference/ # Deep-dive docs
├── architecture.md # Export patterns, routing, Static Assets
├── common-issues.md # All 6 issues with troubleshooting
└── deployment.md # Wrangler, CI/CD, production tips
| Package | Version | Status | |---------|---------|--------| | wrangler | 4.43.0 | ✅ Latest stable | | @cloudflare/workers-types | 4.20251011.0 | ✅ Latest | | hono | 4.10.1 | ✅ Latest stable | | @cloudflare/vite-plugin | 1.13.13 | ✅ Latest (fixes HMR) | | vite | Latest | ✅ Compatible | | typescript | 5.9.0+ | ✅ Standard |
✅ Use this skill when:
❌ Don't use this skill for:
cloudflare-services skill)clerk-auth skill)/home/jez/Documents/claude-skills/planning/research-logs/cloudflare-worker-base.mdcloudflare-services skill to add D1/KV/R2clerk-auth skill for user managementvite-react or vite-vue skillsreference/deployment.md for GitHub Actions examplesProduction Tested: ✅ Error Rate: 0 Build Success Rate: 100% Token Efficiency: ~60% savings
Ready to use! Start with SKILL.md for full setup instructions.
npx skills add ovachiever/Cloudflare Worker 基础模板下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer