Tanstack Start
Scaffold a greenfield full-stack TanStack Start app on Cloudflare Workers with SSR, auth, D1, and shadcn/ui when you have no template repo to clone.
Overview
tanstack-start is an agent skill most often used in Build (also Validate prototype) that scaffolds a full-stack TanStack Start app on Cloudflare Workers with SSR, auth, D1, and shadcn/ui by generating each file fresh.
Install
npx skills add https://github.com/jezweb/claude-skills --skill tanstack-startWhat is this skill?
- Full-stack TanStack Start v1 on Cloudflare Workers with Nitro server functions
- React 19 + Tailwind v4 + shadcn/ui; file-based routing under `src/routes/`
- D1 + Drizzle and better-auth (Google OAuth + email/password)
- No template clone—agent generates every file per project
- Auth-guarded `_authed` layout with dashboard and CRUD-style item routes
- Stack lists TanStack Start v1, React 19, Tailwind v4, D1, Drizzle, and better-auth in one blueprint
Adoption & trust: 1.7k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a production-shaped Cloudflare full-stack React app but there is no single official template that matches SSR, server functions, D1, and auth in one pass.
Who is it for?
Greenfield SSR SaaS or dashboards on Cloudflare with TanStack Start, especially when using Claude Code to emit the full file tree.
Skip if: Vercel-only deployments, non-React stacks, or teams that already have a locked template repo they only want to extend slightly.
When should I use this skill?
User mentions TanStack Start, a full-stack Cloudflare SSR app, or React 19 + Workers with file-based routing and server functions.
What do I get? / Deliverables
You get a documented project layout and implementation instructions so the agent can create routes, server functions, schema, and auth until the app is runnable on Workers.
- Complete `src/routes/` tree with auth guard and dashboard pages
- D1 schema and Drizzle setup plus better-auth configuration files
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build because the skill’s main job is generating the application tree, routes, and server functions from scratch. Frontend is the canonical entry because the documented file tree centers on React 19 routes, layouts, and dashboard UI—even though server functions and D1 are included.
Where it fits
Spin up an SSR login and dashboard on Workers to demo auth before committing to full feature scope.
Generate `_authed` routes, item tables, and shadcn forms for the main product UI.
Add D1 migrations, Drizzle models, and server functions backing dashboard stats and item CRUD.
Align Wrangler deploy config and environment bindings before first production Worker release.
How it compares
Use instead of generic React scaffolds that omit Cloudflare Workers, Nitro server functions, and D1 wiring in one workflow.
Common Questions / FAQ
Who is tanstack-start for?
Solo builders and small teams using Claude Code to stand up a TanStack Start + Cloudflare Workers product with auth and a dashboard without cloning a third-party template.
When should I use tanstack-start?
Use it during Validate when you need a clickable SSR prototype on Workers, and during Build when you are implementing the full route tree, D1 schema, and better-auth flows.
Is tanstack-start safe to install?
Check the Security Audits panel on this page; the skill instructs file generation and Cloudflare configuration—review generated secrets and OAuth settings before shipping.
SKILL.md
READMESKILL.md - Tanstack Start
# TanStack Start on Cloudflare Build a complete full-stack app from nothing. Claude generates every file — no template clone, no scaffold command. Stack: TanStack Start v1 (SSR, file-based routing, server functions via Nitro) on Cloudflare Workers; React 19 + Tailwind v4 + shadcn/ui; D1 + Drizzle; better-auth (Google OAuth + email/password). ## Project File Tree ``` PROJECT_NAME/ ├── src/ │ ├── routes/ │ │ ├── __root.tsx # Root layout (HTML shell, theme, CSS import) │ │ ├── index.tsx # Landing / auth redirect │ │ ├── login.tsx # Login page │ │ ├── register.tsx # Register page │ │ ├── _authed.tsx # Auth guard layout route │ │ ├── _authed/ │ │ │ ├── dashboard.tsx # Dashboard with stat cards │ │ │ ├── items.tsx # Items list table │ │ │ ├── items.$id.tsx # Edit item │ │ │ └── items.new.tsx # Create item │ │ └── api/ │ │ └── auth/ │ │ └── $.ts # better-auth API catch-all │ ├── components/ │ │ ├── ui/ # shadcn/ui components (auto-installed) │ │ ├── app-sidebar.tsx # Navigation sidebar │ │ ├── theme-toggle.tsx # Light/dark/system toggle │ │ ├── user-nav.tsx # User dropdown menu │ │ └── stat-card.tsx # Dashboard stat card │ ├── db/ │ │ ├── schema.ts # Drizzle schema (all tables) │ │ └── index.ts # Drizzle client factory │ ├── lib/ │ │ ├── auth.server.ts # better-auth server config │ │ ├── auth.client.ts # better-auth React hooks │ │ └── utils.ts # cn() helper for shadcn/ui │ ├── server/ │ │ └── functions.ts # Server functions (CRUD, auth checks) │ ├── styles/ │ │ └── app.css # Tailwind v4 + shadcn/ui CSS variables │ ├── router.tsx # TanStack Router configuration │ ├── client.tsx # Client entry (hydrateRoot) │ ├── ssr.tsx # SSR entry │ └── routeTree.gen.ts # Auto-generated route tree (do not edit) ├── drizzle/ # Generated migrations ├── public/ # Static assets (favicon, etc.) ├── vite.config.ts ├── wrangler.jsonc ├── drizzle.config.ts ├── tsconfig.json ├── package.json ├── .dev.vars # Local env vars (NOT committed) └── .gitignore ``` ## Dependencies **Runtime:** ```json { "react": "^19.0.0", "react-dom": "^19.0.0", "@tanstack/react-router": "^1.120.0", "@tanstack/react-start": "^1.120.0", "drizzle-orm": "^0.38.0", "better-auth": "^1.2.0", "zod": "^3.24.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "tailwind-merge": "^3.0.0", "lucide-react": "^0.480.0" } ``` **Dev:** ```json { "@cloudflare/vite-plugin": "^1.0.0", "@tailwindcss/vite": "^4.0.0", "@vitejs/plugin-react": "^4.4.0", "tailwindcss": "^4.0.0", "typescript": "^5.7.0", "drizzle-kit": "^0.30.0", "wrangler": "^4.0.0", "tw-animate-css": "^1.2.0" } ``` **Scripts:** ```json { "dev": "vite", "build": "vite build", "preview": "vite preview", "deploy": "wrangler deploy", "db:generate": "drizzle-kit generate", "db:migrate:local": "wrangler d1 migrations apply PROJECT_NAME-db --local", "db:migrate:remote": "wrangler d1 migrations appl