Menu
TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Use for Next.js migration, edge rendering, or encountering hydration, auth, data pattern errors.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Provides comprehensive Drizzle ORM patterns for schema definition, CRUD operations, relations, queries, transactions, and migrations. Proactively use for any Drizzle ORM development including defining database schemas, writing type-safe queries, implementing relations, managing transactions, and setting up migrations with Drizzle Kit. Supports PostgreSQL, MySQL, SQLite, MSSQL, and CockroachDB.
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
| name | tanstack-start |
| description | TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Use for Next.js migration, edge rendering, or encountering hydration, auth, data pattern errors. |
Full-stack React on TanStack Router with per-route SSR/CSR, file-based routing, server functions, and first-class Cloudflare Workers support.
scripts/bootstrap-cloudflare-start.sh <app> scaffolds Start + Workers + binding types.npm create @tanstack/start@latest my-app
cd my-app
npm run dev
Manual installs (all bundle targets are supported): add @tanstack/react-router + @tanstack/react-start with your bundler plugin (vite, webpack, or esbuild) per the official install guides.
app/routes/** file-based routes → router tree, automatic code-splitting + data preloading.app/entry.client.tsx hydrates <StartClient />; app/entry.server.tsx wraps createServerEntry.app/config.ts or app/start.ts sets defaultSsr, spaMode, middleware, and context.createFileRoute() infers path params; add validateSearch (zod) to parse and coerce search params.redirect()/notFound() for control flow.action/server functions; keep loaders read-only and invalidate via router.invalidate() after mutation.QueryClient in router context and ensureQueryData inside loaders to dedupe fetches.head per route for <title>/meta; derive from loader data to keep SEO consistent.notFound() or redirect() in loaders/middleware; use error boundaries for UX.Example route (typed search + data-only SSR):
// app/routes/posts.$postId.tsx
import { createFileRoute, redirect } from '@tanstack/react-router'
import { z } from 'zod'
export const Route = createFileRoute('/posts/$postId')({
validateSearch: z.object({ preview: z.boolean().optional() }),
ssr: 'data-only',
loader: async ({ params, search, context }) => {
const post = await context.queryClient.ensureQueryData(['post', params.postId], () =>
fetch(`/api/posts/${params.postId}?preview=${!!search.preview}`).then(r => r.json())
)
if (!post.published && !search.preview) throw redirect({ to: '/drafts' })
return { post }
},
})
<Link preload="intent"> (hover/focus) preloads route data/code; use preload="render" for above-the-fold routes.router.preloadRoute({ to, search }) to warm caches before navigation (e.g., on visibility)./products?slug=abc masked as /p/abc).router.navigate({ to, replace, from }) blockers or useBlocker.scrollRestoration to restore positions on back/forward; customize per route when using long lists.ssr: true | false | 'data-only' on routes; defaultSsr config sets the baseline.lazy/load for manual chunks on code-based routes.preload="intent" links with defaultPreloadStaleTime to avoid over-fetching.pendingComponent for CSR routes to avoid layout shift.<RouterDevtools /> during development to inspect matches, loader states, and preloading.@tanstack/eslint-plugin-router with the recommended config to enforce inference-sensitive property order (e.g., beforeLoad before loader).Route meta for better AI navigation.cloudflare({ viteEnvironment: { name: 'ssr' } }) first in Vite plugins so bindings reach server entry.npm run cf-typegen.pages.ssr: 'data-only' for non-deterministic UI).validateSearch and custom serializer where needed.create-route-property-order rule) and npm run check passes.router.matches state looks correct.cf-typegen) and streaming tested via curl -N.