tanstack-start
Installation
SKILL.md
TanStack Start
TanStack Start is a full-stack React framework that layers server functions, SSR, streaming, and API routes on top of TanStack Router and a Vite/Nitro build pipeline, giving end-to-end type safety from server to client.
Workflow for Building a TanStack Start Feature
- Configure the app — Set up
app.config.tswith the Vite plugins and aserver.presetmatching the deployment target. - Define the root route — Create
src/routes/__root.tsxwith the HTML document shell (<html>,<head>,<body>,<Outlet>,<ScrollRestoration>,<Scripts>). - Write server functions — Use
createServerFn()with a.validator()and.handler()for any logic that must run on the server (database access, secrets, file I/O). - Wire server functions into routes — Call server functions from route
loaders for reads and from mutation hooks (useMutation) for writes. - Add API routes for raw HTTP — Use
createAPIFileRoutefor webhooks, OAuth callbacks, or endpoints that external services call directly. - Stream non-critical data — Wrap slow, non-blocking loader data in
defer()and render it with<Suspense>+<Await>. - Deploy — Pick the
server.presetfor the target platform and verify environment variable access rules before shipping.