Agent skill

cloudflare-worker-builder

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.

Stars 670
Forks 52

Install this agent skill to your Project

npx add-skill https://github.com/jezweb/claude-skills/tree/main/plugins/cloudflare/skills/cloudflare-worker-builder

SKILL.md

Cloudflare Worker Builder

Scaffold a working Cloudflare Worker project from a brief description. Produces a deployable project with Hono routing, Vite dev server, and Static Assets.

Workflow

Step 1: Understand the Project

Ask about the project to choose the right bindings and structure:

  • What does the app do? (API only, SPA + API, landing page)
  • What data storage? (D1 database, R2 files, KV cache, none)
  • Auth needed? (Clerk, better-auth, none)
  • Custom domain or workers.dev subdomain?

A brief like "todo app with database" is enough to proceed.

Step 2: Scaffold the Project

bash
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 configuration
  • vite.config.ts — Vite + Cloudflare plugin
  • src/index.ts — Hono app with Static Assets fallback
  • package.json — Scripts and dependencies
  • tsconfig.json — TypeScript config
  • public/index.html — SPA entry point

Step 3: Configure Bindings

Add bindings to wrangler.jsonc based on project needs. Wrangler 4.45+ auto-provisions resources on first deploy — always specify explicit names:

jsonc
{
  "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" }]
}

Step 4: Deploy

bash
npm run dev           # Local dev at http://localhost:8787
wrangler deploy       # Production deploy

Critical Patterns

Export Syntax

typescript
// CORRECT — use this pattern
export default app

// WRONG — causes "Cannot read properties of undefined"
export default { fetch: app.fetch }

Source: honojs/hono #3955

Static Assets + API Routes

Without run_worker_first, SPA fallback intercepts API routes and returns index.html instead of JSON:

jsonc
"assets": {
  "not_found_handling": "single-page-application",
  "run_worker_first": ["/api/*"]  // CRITICAL
}

Source: workers-sdk #8879

Vite Config

typescript
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.

Scheduled/Cron Handlers

When adding cron triggers, switch to explicit export:

typescript
export default {
  fetch: app.fetch,
  scheduled: async (event, env, ctx) => { /* ... */ }
}

Reference Files

Read these for detailed troubleshooting:

  • references/common-issues.md — 10 documented issues with sources and fixes
  • references/architecture.md — Route priority, caching, Workers RPC
  • references/deployment.md — CI/CD, auto-provisioning, gradual rollouts

Expand your agent's capabilities with these related and highly-rated skills.

jezweb/claude-skills

shadcn-ui

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.

670 52
Explore
jezweb/claude-skills

walkthrough-video

Generate professional walkthrough videos from app screenshots or live sites using Remotion. Smooth transitions, zoom effects, text overlays, and optional voiceover narration. Produces MP4 videos for demos, product showcases, or documentation. Triggers: 'walkthrough video', 'demo video', 'product video', 'create a video walkthrough', 'remotion video', 'screen recording', 'app demo', 'showcase video', 'generate video from screenshots'.

670 52
Explore
jezweb/claude-skills

product-showcase

Generate a comprehensive marketing website for a web app — multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations. Browses the running app, captures screens and sequences, and produces a deployable site that actually teaches people what the product does. Especially useful for complex or agentic apps that are hard to explain. Triggers: 'showcase site', 'product page', 'show off the app', 'marketing site', 'demo site', 'product showcase', 'explain the app', 'how do I market this'.

670 52
Explore
jezweb/claude-skills

design-system

Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.

670 52
Explore
jezweb/claude-skills

react-patterns

React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.

670 52
Explore
jezweb/claude-skills

react-native

React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code, and Expo workflows. Use when building or reviewing React Native code. Triggers: 'react native', 'expo', 'mobile app', 'react native performance', 'flatlist', 'reanimated', 'expo router', 'mobile development', 'ios app', 'android app'.

670 52
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results