vite-flare-starter
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.
- Installs
- 1.2K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/jezweb/claude-skills --skill vite-flare-starter- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vite-flare-starter automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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 deploy | Deploy to Cloudflare |
pnpm db:migrate:local | Apply migrations locally |
pnpm db:migrate:remote | Apply migrations to production |
pnpm db:generate | Generate migration from schema changes |
Workflow
Step 1: Gather Project Info
Ask for:
| Required | Optional |
|---|---|
| Project name (kebab-case) | Admin email |
| Description (1 sentence) | Google OAuth credentials |
| Cloudflare account | Custom domain |
Step 2: Clone and Configure
2a. Clone and clean
git clone https://github.com/jezweb/vite-flare-starter.git PROJECT_DIR --depth 1
cd PROJECT_DIR
rm -rf .git
git init
2b. Find-replace targets
Replace vite-flare-starter with the project name in these locations:
| File | Target | Replace with |
|---|---|---|
wrangler.jsonc | "vite-flare-starter" (worker name) | "PROJECT_NAME" |
wrangler.jsonc | vite-flare-starter-db | PROJECT_NAME-db |
wrangler.jsonc | vite-flare-starter-avatars | PROJECT_NAME-avatars |
wrangler.jsonc | vite-flare-starter-files | PROJECT_NAME-files |
package.json | "name": "vite-flare-starter" | "name": "PROJECT_NAME" |
package.json | vite-flare-starter-db | PROJECT_NAME-db |
index.html | <title> content | App display name (Title Case) |
Also in wrangler.jsonc:
- Remove hardcoded
account_idline (let wrangler prompt or use env var) - Replace
database_idvalue withREPLACE_WITH_YOUR_DATABASE_ID
Reset package.json version to "0.1.0".
Use the Edit tool for replacements (preferred over sed to avoid macOS/GNU differences).
2c. Generate auth secret
BETTER_AUTH_SECRET=$(openssl rand -hex 32 2>/dev/null || python3 -c "import secrets; print(secrets.token_hex(32))")
2d. Create .dev.vars
Convert kebab-case project name: my-cool-app becomes Display My Cool App, ID my_cool_app.
# Local Development Environment Variables
# DO NOT COMMIT THIS FILE TO GIT
# Authentication (better-auth)
BETTER_AUTH_SECRET=<generated>
BETTER_AUTH_URL=http://localhost:5173
# Google OAuth (optional)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# Email Auth Control (disabled by default)
# ENABLE_EMAIL_LOGIN=true
# ENABLE_EMAIL_SIGNUP=true
# Application Configuration
APP_NAME=<Display Name>
VITE_APP_NAME=<Display Name>
VITE_APP_ID=<app_id>
VITE_TOKEN_PREFIX=<app_id>_
VITE_GITHUB_URL=
VITE_FOOTER_TEXT=
NODE_ENV=development
2e. Create Cloudflare resources (optional)
npx wrangler d1 create PROJECT_NAME-db
# Extract database_id from output, update wrangler.jsonc
npx wrangler r2 bucket create PROJECT_NAME-avatars
npx wrangler r2 bucket create PROJECT_NAME-files
2f. Install and migrate
pnpm install
pnpm run db:migrate:local
2g. Initial commit
git add -A
git commit -m "Initial commit from vite-flare-starter"
Step 3: Manual Configuration
- Google OAuth (if using): Go to Google Cloud Console, create OAuth 2.0 Client ID, add redirect URI
http://localhost:5173/api/auth/callback/google, copy Client ID and Secret to.dev.vars - Favicon: Replace
public/favicon.svg - CLAUDE.md: Update project description, remove vite-flare-starter references
- index.html: Update
<title>and meta description
Step 4: Verify Locally
pnpm dev
Check: http://localhost:5173 loads, shows YOUR app name, sign-up/sign-in works (if OAuth configured).
Step 5: Deploy to Production
# Set production secrets
openssl rand -base64 32 | npx wrangler secret put BETTER_AUTH_SECRET
echo "https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put BETTER_AUTH_URL
echo "http://localhost:5173,https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put TRUSTED_ORIGINS
# If using Google OAuth
echo "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_ID
echo "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET
# Migrate remote database
pnpm run db:migrate:remote
# Build and deploy
pnpm run build && pnpm run deploy
Critical: After first deploy, update BETTER_AUTH_URL with your actual Worker URL. Add the production URL to Google OAuth redirect URIs.
Security Fingerprints
Change all of these so attackers cannot identify your site uses this starter:
| Location | Default Value | How to Change |
|---|---|---|
| Page title | "Vite Flare Starter" | index.html |
| App name in UI | "Vite Flare Starter" | VITE_APP_NAME env var |
| localStorage keys | vite-flare-starter-theme | VITE_APP_ID env var |
| API tokens | vfs_ prefix | VITE_TOKEN_PREFIX env var |
| GitHub links | starter repo | VITE_GITHUB_URL (set empty to hide) |
| Worker name | vite-flare-starter | wrangler.jsonc |
| Database name | vite-flare-starter-db | wrangler.jsonc |
| R2 buckets | vite-flare-starter-* | wrangler.jsonc |
Environment Variables
Branding (VITE_ prefix = available in frontend)
| Variable | Purpose | Example |
|---|---|---|
VITE_APP_NAME | Display name in UI | "My Cool App" |
VITE_APP_ID | localStorage prefix, Sentry | "mycoolapp" |
VITE_TOKEN_PREFIX | API token prefix | "mca_" |
VITE_GITHUB_URL | GitHub link (empty = hidden) | "" |
VITE_FOOTER_TEXT | Footer copyright text | "2026 My Company" |
APP_NAME | Server-side app name | "My Cool App" |
Auth
| Variable | Purpose | Notes |
|---|---|---|
BETTER_AUTH_SECRET | Session encryption | openssl rand -hex 32 |
BETTER_AUTH_URL | Auth base URL | Must match actual URL exactly |
TRUSTED_ORIGINS | Allowed origins | Comma-separated, include localhost + prod |
GOOGLE_CLIENT_ID | Google OAuth | From Google Cloud Console |
GOOGLE_CLIENT_SECRET | Google OAuth | From Google Cloud Console |
ENABLE_EMAIL_LOGIN | Enable email/password | "true" to enable |
ENABLE_EMAIL_SIGNUP | Enable email signup | Requires ENABLE_EMAIL_LOGIN |
Email (Optional)
| Variable | Purpose | Notes |
|---|---|---|
EMAIL_FROM | Sender address | For verification/password reset |
EMAIL_API_KEY | Email service API key | Resend recommended |
Common Customisations
Adding a New Database Table
- Add schema in
src/server/db/schema.ts - Generate migration:
pnpm db:generate - Apply locally:
pnpm db:migrate:local - Apply to production:
pnpm db:migrate:remote
Adding a New API Route
- Create route file in
src/server/routes/ - Register in
src/server/index.ts - Add TanStack Query hook in
src/client/hooks/
Changing Auth Providers
Edit src/server/auth.ts: add provider to socialProviders, add credentials to .dev.vars and production secrets, update client-side login buttons.
Feature Flags
Control features via environment variables: VITE_FEATURE_STYLE_GUIDE=true, VITE_FEATURE_COMPONENTS=true. Add your own in src/client/lib/features.ts.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Auth redirects to homepage silently | Missing TRUSTED_ORIGINS | Set TRUSTED_ORIGINS with all valid URLs |
| "Not authorized" on deploy | Wrong account_id | Remove account_id from wrangler.jsonc or set yours |
| Database 500 errors | Missing migrations | Run pnpm db:migrate:local and pnpm db:migrate:remote |
| localStorage shows "vite-flare-starter" | Missing VITE_APP_ID | Set VITE_APP_ID=yourapp in .dev.vars |
| Auth fails in production only | BETTER_AUTH_URL mismatch | Must match actual Worker URL exactly (https, no trailing slash) |
| "redirect_uri_mismatch" on Google sign-in | OAuth redirect URI missing | Add production URL to Google Cloud Console OAuth redirect URIs |
| Secret changes have no effect | Not redeployed | wrangler secret put does NOT redeploy. Run pnpm deploy after |
Production Deployment Checklist
-
BETTER_AUTH_SECRETset (different from dev!) -
BETTER_AUTH_URLmatches actual Worker URL -
TRUSTED_ORIGINSincludes all valid URLs - Google OAuth redirect URI includes production URL
- Remote database migrated (
pnpm db:migrate:remote) - No
vite-flare-starterreferences in config files - Favicon replaced
- CLAUDE.md updated
-
.dev.varsis NOT committed (check.gitignore)
FAQ
What does the vite-flare-starter skill do?
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.
How do I install vite-flare-starter?
Run npx skills add https://github.com/jezweb/claude-skills --skill vite-flare-starter in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vite-flare-starter/ (personal) or .claude/skills/vite-flare-starter/ (project).
Which AI agents can use vite-flare-starter?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vite-flare-starter safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains vite-flare-starter?
It is published by jezweb in jezweb/claude-skills. It has 1,220 recorded installs.
More from jezweb/claude-skills
shadcn-ui
jezweb/claude-skills
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.
color-palette
jezweb/claude-skills
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
tailwind-theme-builder
jezweb/claude-skills
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
wordpress-elementor
jezweb/claude-skills
Edit Elementor pages and manage templates on WordPress sites via browser automation (for visual / structural changes) or WP-CLI (for safe text replacements). Use whenever the user wants to edit an Elementor page, update text in Elementor widgets, apply or manage Elementor templates, or make content changes to pages built with the Elementor page builder.
ux-audit
jezweb/claude-skills
Walk through a live web app AS a real user to find usability + behavioural bugs that static reviews miss. REQUIRES proof of interaction (typing, clicking, sending, observing) before any verdict — a sweep that didn't interact terminates with verdict 'Incomplete'. Walks threads, exercises every element, runs the multi-pane stress matrix, visual polish sweep, component perfection checklist, automated a11y (axe-core), pragmatic performance budget (LCP/CLS/INP), scenario battery (11 scenarios), and stress recipes including the real-flavour data battery. Hard gates: console errors/warnings = 0, network 5xx = 0, layout collapse = 0, axe Critical/Serious = 0, perf budget green. Audit-the-audit meta-check rejects rushed reports. Each finding has reproduction steps, evidence path, and suspected code location. Trigger with 'ux audit', 'walkthrough', 'qa sweep', 'audit the app', 'dogfood this', 'check all pages', 'find what's broken', 'stress the UI'.
tailwind-v4-shadcn
jezweb/claude-skills
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.