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.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/tanstack-start
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
tanstack-start.SKILL.md
---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.
license: MIT
allowed-tools: [Bash, Read, Write, Edit]
metadata:
version: 1.0.0-rc.1
author: Claude Skills Maintainers
last-verified: 2025-12-09
production-tested: false
status: rc
keywords:
- tanstack start
- tanstack react start
- full-stack react
- selective ssr
- spa mode
- static prerender
- server functions
- server routes
- cloudflare workers
- edge rendering
- hydration errors
- next.js migration
---# TanStack Start (React) — RC-Ready Playbook
Full-stack React on TanStack Router with per-route SSR/CSR, file-based routing, server functions, and first-class Cloudflare Workers support.
## Use this skill when
- Building a greenfield React app that needs route-level SSR/CSR/SSG switches.
- Migrating from Next.js/React Router while keeping file-based routing + API routes.
- Shipping to edge runtimes (Workers) with typed server functions and bindings.
- You want predictable routing with type-safe params/search + built-in preloading.
## What’s inside
- **References**: quickstart/layout, rendering modes, server functions, Cloudflare hosting, execution/auth, plus new routing/data/navigation/devtools guides.
- **Troubleshooting**: hydration, API routing, bindings, navigation/preloading failures.
---
## Quick Start (React)
```bash
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.
if (!post.published && !search.preview) throw redirect({ to: '/drafts' })
return { post }
},
})
```
---
## Navigation, Preloading, and UX
- **Link prefetch defaults**: `<Link preload="intent">` (hover/focus) preloads route data/code; use `preload="render"` for above-the-fold routes.
- **Programmatic preloading**: `router.preloadRoute({ to, search })` to warm caches before navigation (e.g., on visibility).
- **Route masking**: keep canonical URLs while showing user-friendly masks (e.g., `/products?slug=abc` masked as `/p/abc`).
- **Navigation blocking**: protect unsaved forms with `router.navigate({ to, replace, from })` blockers or `useBlocker`.
- **Scroll restoration**: enable `scrollRestoration` to restore positions on back/forward; customize per route when using long lists.
- **Search param serialization**: customize parse/stringify to keep numbers/dates stable and avoid stringified booleans.
---
## Rendering & Performance
- **Per-route SSR**: set `ssr: true | false | 'data-only'` on routes; `defaultSsr` config sets the baseline.
- **Code-splitting**: file-based routes auto-split; add `lazy`/`load` for manual chunks on code-based routes.
- **Preloading strategy**: pair `preload="intent"` links with `defaultPreloadStaleTime` to avoid over-fetching.
- **Render optimizations**: keep loaders pure, memoize heavy components, and use `pendingComponent` for CSR routes to avoid layout shift.
---
## Devtools, Linting, and LLM Support
- Add `<RouterDevtools />` during development to inspect matches, loader states, and preloading.
- Enable the ESLint plugin `@tanstack/eslint-plugin-router` with the recommended config to enforce inference-sensitive property order (e.g., `beforeLoad` before `loader`).
- LLM-aware routing: the Router exposes structured route metadata to LLM agents; keep descriptions concise in `Route` meta for better AI navigation.
---
## Deployment Notes (Cloudflare-friendly)
- Keep `cloudflare({ viteEnvironment: { name: 'ssr' } })` first in Vite plugins so bindings reach server entry.
- Regenerate bindings after changes: `npm run cf-typegen`.
- For static-heavy sites, enable prerender to ship HTML to Workers Assets/Pages; exclude param routes or add explicit `pages`.
---
## Ship Checklist
- [ ] Routes load without hydration warnings (prefer `ssr: 'data-only'` for non-deterministic UI).
- [ ] Search params validated with `validateSearch` and custom serializer where needed.
- [ ] Link preloading configured for high-traffic routes; blockers added for unsaved forms.
- [ ] ESLint plugin enabled (`create-route-property-order` rule) and `npm run check` passes.
- [ ] Devtools verified locally; `router.matches` state looks correct.
- [ ] Cloudflare bindings typed (`cf-typegen`) and streaming tested via `curl -N`.
