Vite Flare Starter
Scaffold a Vite + React client and Cloudflare Worker API with D1, R2, and better-auth using copy-paste env and wrangler templates.
Overview
Vite Flare Starter is an agent skill most often used in Build (also Validate prototype) that supplies env and wrangler templates for Vite plus Cloudflare Workers with D1, R2, and better-auth.
Install
npx skills add https://github.com/jezweb/claude-skills --skill vite-flare-starterWhat is this skill?
- Local `.env` template for better-auth, optional Google OAuth, and Vite `VITE_*` app branding placeholders
- wrangler.jsonc pattern: `nodejs_compat`, SPA assets, `/api/*` run_worker_first, D1 migrations dir
- D1 database binding and R2 storage binding placeholders for edge persistence
- Documents optional email login flags and Resend-style email API keys for verification flows
- Explicit warning not to commit local env files to git
- Wrangler pattern routes `/api/*` with run_worker_first before SPA fallback
Adoption & trust: 878 installs on skills.sh; 841 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a solo-friendly full-stack template on Cloudflare but keep re-deriving wrangler bindings, auth env vars, and Vite public config from scratch.
Who is it for?
Indie SaaS builders standardizing on Cloudflare Workers, D1, and Vite who need a repeatable bootstrap the agent can parameterize.
Skip if: Teams on pure Vercel/Node hosting or apps that do not need Workers, D1, or edge auth—the templates are Cloudflare-centric.
When should I use this skill?
Bootstrapping a new Vite + Cloudflare Worker project that needs auth, D1, R2, and documented local env placeholders.
What do I get? / Deliverables
You get filled-in `.env` and wrangler.jsonc patterns so local dev and edge deploy share consistent auth, database, and asset routing placeholders.
- Local env file pattern
- wrangler.jsonc Worker and assets configuration
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build integrations because the artifact wires Cloudflare Workers, D1, R2, and auth—not a single UI component. Integrations captures edge Worker bindings, static assets routing, and OAuth/env wiring across client and server.
Where it fits
Spin a passwordless OAuth prototype on localhost:5173 with the bundled better-auth env block.
Generate wrangler D1 and R2 bindings plus `/api/*` worker-first routing before first `wrangler deploy`.
Align `VITE_APP_NAME` and token prefix placeholders with your product slug in one pass.
Verify compatibility_date and assets directory match your production build output layout.
How it compares
Starter template skill, not a live MCP deploy tool or production security audit.
Common Questions / FAQ
Who is vite-flare-starter for?
Solo builders and tiny teams starting a SaaS or API-backed product on Cloudflare with Vite and better-auth.
When should I use vite-flare-starter?
During Build integrations when scaffolding Worker + D1 + R2; during Validate prototype when you need a fast edge-hosted demo with auth placeholders.
Is vite-flare-starter safe to install?
Check the Security Audits panel on this page; the skill includes secret placeholders—you must generate secrets locally and never commit `.env`.
SKILL.md
READMESKILL.md - Vite Flare Starter
# Local Development Environment Variables # DO NOT COMMIT THIS FILE TO GIT # Authentication (better-auth) BETTER_AUTH_SECRET={{BETTER_AUTH_SECRET}} BETTER_AUTH_URL=http://localhost:5173 # Google OAuth (optional — get from https://console.cloud.google.com/) GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= # Email Auth Control (disabled by default — OAuth-only) # ENABLE_EMAIL_LOGIN=true # ENABLE_EMAIL_SIGNUP=true # Email Configuration (optional — for verification/password reset) # EMAIL_FROM=noreply@yourdomain.com # EMAIL_API_KEY=re_... # Application Configuration APP_NAME={{APP_DISPLAY_NAME}} VITE_APP_NAME={{APP_DISPLAY_NAME}} VITE_APP_ID={{APP_ID}} VITE_TOKEN_PREFIX={{APP_ID}}_ VITE_GITHUB_URL= VITE_FOOTER_TEXT= NODE_ENV=development // Cloudflare Workers Configuration // Documentation: https://developers.cloudflare.com/workers/configuration/ { "name": "{{PROJECT_NAME}}", "compatibility_date": "2025-01-01", "compatibility_flags": ["nodejs_compat"], // Worker entry point (source file, NOT built file) "main": "./src/server/index.ts", // Static Assets Configuration (Workers with Static Assets) "assets": { "directory": "./dist/client", "not_found_handling": "single-page-application", "run_worker_first": ["/api/*"] }, // D1 Database (SQLite at edge) "d1_databases": [ { "binding": "DB", "database_name": "{{PROJECT_NAME}}-db", "database_id": "{{DATABASE_ID}}", "migrations_dir": "drizzle" } ], // R2 Storage (S3-compatible object storage) "r2_buckets": [ { "binding": "AVATARS", "bucket_name": "{{PROJECT_NAME}}-avatars" }, { "binding": "FILES", "bucket_name": "{{PROJECT_NAME}}-files" } ], // Workers AI "ai": { "binding": "AI" }, // Observability "observability": { "enabled": true } } --- name: vite-flare-starter description: "Scaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI. Run setup.sh to clone, configure, and deploy. Use whenever the user wants a batteries-included Cloudflare full-stack app, vite-flare-starter scaffold, or a React + Cloudflare app with auth + database + Workers AI ready to go." compatibility: claude-code-only --- # Vite Flare Starter Clone and configure the batteries-included Cloudflare starter into a standalone project. Produces a fully rebranded, deployable full-stack app. ## Stack | Layer | Technology | Version | |-------|-----------|---------| | Frontend | React, Vite, Tailwind CSS, shadcn/ui | 19, 6.x, v4, latest | | Backend | Hono (on Cloudflare Workers) | 4.x | | Database | D1 (SQLite at edge) + Drizzle ORM | 0.38+ | | Auth | better-auth (Google OAuth + email/password) | latest | | Storage | R2 (S3-compatible object storage) | — | | AI | Workers AI binding | — | | Data Fetching | TanStack Query | v5 | ### Cloudflare Bindings | Binding | Type | Purpose | |---------|------|---------| | `DB` | D1 Database | Primary application database | | `AVATARS` | R2 Bucket | User avatar storage | | `FILES` | R2 Bucket | General file uploads | | `AI` | Workers AI | AI model inference | ### Project Structure ``` src/ ├── client/ # React frontend │ ├── components/ # UI components │ ├── hooks/ # Custom hooks + TanStack Query │ ├── pages/ # Route pages │ ├── lib/ # Utilities (auth client, etc.) │ └── main.tsx # App entry point ├── server/ # Hono backend │ ├── index.ts # Worker entry point │ ├── routes/ # API routes │ ├── middleware/ # Auth, CORS, etc. │ └── db/ # Drizzle schema + queries └── shared/ # Shared types between client/server ``` ### Key Commands | Command | Purpose | |---------|---------| | `pnpm dev` | Start local dev server | | `pnpm build` | Production build | | `pnpm deplo