Agent skill · software engineering · secondsky
tanstack-start
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.
Why this skill is useful
Adds a script for scaffolding a full-stack React app with Cloudflare Workers and specific routing patterns that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
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. Script: scripts/bootstrap-cloudflare-start.sh <app> scaffolds Start + Workers + binding types. Troubleshooting: hydration, API routing, bindings, navigation/preloading failures. --- Quick Start (React) 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. Core layout reminder 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. --- Routing + Data Best Practices Type-safe params & search: createFileRoute() infers path params; add validateSearch (zod) to parse and coerce search params. Route matching order is deterministic (index → static → dynamic → splat); rely on this when adding catch-alls. Loaders run once per location change; return plain data, throw redirect()/notFound() for control flow. Data mutations: colocate action/server functions; keep loaders read-only and invalidate via router.invalidate() after mutation. TanStack Query bridge: create a QueryClient in router context and ensureQueryData inside loaders to dedupe fetches. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/tanstack-start