Use when scaffolding a new fullstack project with TanStack Start, Supabase, React Query, and Cloudflare Workers. Use with: /scaffold
TanStack Start + Router, React 19, React Query, react-hook-form + zod v4, zustand-x, Supabase (auth + DB + RLS), Tailwind CSS v4, shadcn/ui + base-ui, Cloudflare Workers, ESLint, Prettier, Husky
Gather from the user:
Run each skill in sequence. Each builds on the previous.
| # | Skill | What it sets up |
|---|---|---|
| 1 |
project-setup| Lint, format, git hooks, scripts, tsconfig, encrypted env, CI/CD |
| 2 | ui | Tailwind v4, shadcn + base-ui, dark mode, animations |
| 3 | tanstack-start-cloudflare | Router, layouts, breadcrumbs, metadata, server fns, deploy |
| 4 | supabase-auth-data | 3 clients, auth flow, types, migrations, env vars |
| 5 | react-query-mutative | QueryClient config, key factories, optimistic updates |
| 6 | forms-rhf-zod | Form patterns, zod schemas, create/edit modes |
| 7 | zustand-x-ui-state | UI state store, boundary rules |
For each skill:
bun check after #1, bun dev after #3)bun check passes cleanbun dev starts on port 3000git add -A && git commit -m "scaffold fullstack project"src/
├── api/auth/ # schemas, functions, keys, hooks
├── components/app/ # AppSidebar, AppTopBar, AuthLayout
├── components/ui/ # shadcn/base-ui components
├── hooks/ # Shared hooks
├── libs/
│ ├── cn.ts # twMerge + clsx
│ ├── form.ts # zodFormResolver
│ ├── query/ # root-provider, optimistic, devtools
│ ├── supabase/ # client, server, admin
│ └── zustand/ # ui-store
├── routes/ # __root, _auth/*, _authed/*
├── styles.css # Tailwind v4 + theme
├── types/ # database.types.ts (auto-generated)
└── router.tsx # Router creation + context
scripts/
├── generate-vite-env.ts
└── sync-env.ts
Dependencies: @base-ui-components/react, @supabase/supabase-js, @supabase/ssr, @cloudflare/vite-plugin, @tanstack/react-start, @tanstack/react-router, @tanstack/react-query, @tanstack/react-router-ssr-query, react-hook-form, @hookform/resolvers, zod, zod-empty, zustand, zustand-x, mutative, es-toolkit, usehooks-ts, motion, dayjs, sonner, class-variance-authority, clsx, tailwind-merge, lucide-react, react, react-dom
Dev: typescript, vite, @vitejs/plugin-react, babel-plugin-react-compiler, @tailwindcss/vite, @tailwindcss/typography, @tanstack/devtools-vite, eslint, @eslint/js, typescript-eslint, eslint-plugin-perfectionist, prettier, husky, lint-staged, wrangler, vitest, @testing-library/react, @testing-library/dom, jsdom
bun package manager, bunx instead of npx@/ import alias = src/type keyword only (never interface)import { type Foo } from './bar'