cloudflare-full-stack-scaffold
starsforks
How to install cloudflare-full-stack-scaffold?
jackspace/claudeskillz/cloudflare-full-stack-scaffold
$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-full-stack-scaffoldProduction-ready starter project for React + Cloudflare Workers + Hono with core services (D1, KV, R2, Workers AI) and optional advanced features (Clerk Auth, AI Chat, Queues, Vectorize). Complete with planning docs, session handoff protocol, and enable scripts for opt-in feature
SKILL.md
| 1 | # Cloudflare Full-Stack Scaffold |
| 2 | |
| 3 | Complete, production-ready starter project for building full-stack applications on Cloudflare with React, Hono, AI SDK, and all Cloudflare services pre-configured. |
| 4 | |
| 5 | ## When to Use This Skill |
| 6 | |
| 7 | Use this skill when you need to: |
| 8 | |
| 9 | - **Start a new full-stack Cloudflare project** in minutes instead of hours |
| 10 | - **Build AI-powered applications** with chat interfaces, RAG, or tool calling |
| 11 | - **Have core Cloudflare services ready** (D1, KV, R2, Workers AI) |
| 12 | - **Opt-in to advanced features** (Clerk Auth, AI Chat, Queues, Vectorize) |
| 13 | - **Use modern best practices** (Tailwind v4, shadcn/ui, AI SDK, React 19) |
| 14 | - **Include planning docs and session handoff** from the start |
| 15 | - **Choose your AI provider** (Workers AI, OpenAI, Anthropic, Gemini) |
| 16 | - **Enable features only when needed** with simple npm scripts |
| 17 | - **Avoid configuration errors** and integration issues |
| 18 | |
| 19 | ## What This Skill Provides |
| 20 | |
| 21 | ### Complete Scaffold Project |
| 22 | |
| 23 | A fully working application you can **copy, customize, and deploy** immediately: |
| 24 | |
| 25 | ```bash |
| 26 | # Copy the scaffold |
| 27 | cp -r scaffold/ my-new-app/ |
| 28 | cd my-new-app/ |
| 29 | |
| 30 | # Install dependencies |
| 31 | npm install |
| 32 | |
| 33 | # Initialize core services (D1, KV, R2) |
| 34 | ./scripts/init-services.sh |
| 35 | |
| 36 | # Create database tables |
| 37 | npm run d1:local |
| 38 | |
| 39 | # Start developing |
| 40 | npm run dev |
| 41 | ``` |
| 42 | |
| 43 | **Result**: Full-stack app running in ~5 minutes with: |
| 44 | - ✅ Frontend and backend connected |
| 45 | - ✅ Core Cloudflare services configured (D1, KV, R2, Workers AI) |
| 46 | - ✅ AI SDK ready with multiple providers |
| 47 | - ✅ Planning docs and session handoff protocol |
| 48 | - ✅ Dark mode, theming, UI components |
| 49 | - ✅ Optional features (1 script each to enable): |
| 50 | - Clerk Auth (`npm run enable-auth`) |
| 51 | - AI Chat UI (`npm run enable-ai-chat`) |
| 52 | - Queues (`npm run enable-queues`) |
| 53 | - Vectorize (`npm run enable-vectorize`) |
| 54 | |
| 55 | ### Scaffold Structure |
| 56 | |
| 57 | ``` |
| 58 | scaffold/ |
| 59 | ├── package.json # All dependencies (React, Hono, AI SDK, Clerk) |
| 60 | ├── tsconfig.json # TypeScript config |
| 61 | ├── vite.config.ts # Cloudflare Vite plugin |
| 62 | ├── wrangler.jsonc # All Cloudflare services configured |
| 63 | ├── .dev.vars.example # Environment variables template |
| 64 | ├── .gitignore # Standard ignores |
| 65 | ├── README.md # Project-specific readme |
| 66 | ├── CLAUDE.md # Project instructions for Claude |
| 67 | ├── SCRATCHPAD.md # Session handoff protocol |
| 68 | ├── CHANGELOG.md # Version history |
| 69 | ├── schema.sql # D1 database schema |
| 70 | │ |
| 71 | ├── docs/ # Complete planning docs |
| 72 | │ ├── ARCHITECTURE.md |
| 73 | │ ├── DATABASE_SCHEMA.md |
| 74 | │ ├── API_ENDPOINTS.md |
| 75 | │ ├── IMPLEMENTATION_PHASES.md |
| 76 | │ ├── UI_COMPONENTS.md |
| 77 | │ └── TESTING.md |
| 78 | │ |
| 79 | ├── migrations/ # D1 migrations |
| 80 | │ └── 0001_initial.sql |
| 81 | │ |
| 82 | ├── src/ # Frontend (React + Vite + Tailwind v4) |
| 83 | │ ├── main.tsx |
| 84 | │ ├── App.tsx |
| 85 | │ ├── index.css # Tailwind v4 theming |
| 86 | │ ├── components/ |
| 87 | │ │ ├── ui/ # shadcn/ui components |
| 88 | │ │ ├── ThemeProvider.tsx |
| 89 | │ │ ├── ProtectedRoute.tsx # Auth (COMMENTED) |
| 90 | │ │ └── ChatInterface.tsx # AI chat (COMMENTED) |
| 91 | │ ├── lib/ |
| 92 | │ │ ├── utils.ts # cn() utility |
| 93 | │ │ └── api-client.ts # Fetch wrapper |
| 94 | │ └── pages/ |
| 95 | │ ├── Home.tsx |
| 96 | │ |
People who liked this also viewed
6 picksType
- microsoft-foundryDeploy, evaluate, fine-tune, and manage Foundry agents end-to-end with azd: hosted agent scaffold/run/deploy, prompt agent create, batch eval, continuous eval, prompt optimizer, Agent Optimizer scaffoSkillsJul 2026
- azure-deployExecute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application SkillsJul 2026
- azure-preparePrepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wSkillsJul 2026
- azure-validate--- name: azure-validate description: "Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity pSkillsJul 2026
- azure-aigatewayConfigure Azure API Management as an AI Gateway for AI models, MCP tools, and agents. WHEN: semantic caching, token limit, content safety, load balancing, AI model governance, MCP rate limiting, jailbSkillsJul 2026
- azure-hosted-copilot-sdkOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
