Agent skill · mindrally
tanstack-start
Best practices for TanStack Start, the full-stack React framework built on TanStack Router and Vite/Nitro. Use when building server functions with createServerFn, setting up SSR and streaming with defer()/Await, writing API routes, configuring app.config.ts, or deploying a TanStack Start app to Node, Vercel, Netlify, Bun, or Cloudflare.
What it needs
About 4k tokens when loaded.
What this skill does
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 1. Configure the app — Set up app.config.ts with the Vite plugins and a server.preset matching the deployment target. 2. Define the root route — Create src/routes/root.tsx with the HTML document shell (<html>, <head>, <body>, <Outlet>, <ScrollRestoration>, <Scripts>). 3. 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). 4. Wire server functions into routes — Call server functions from route loaders for reads and from mutation hooks (useMutation) for writes. 5. Add API routes for raw HTTP — Use createAPIFileRoute for webhooks, OAuth callbacks, or endpoints that external services call directly. 6. Stream non-critical data — Wrap slow, non-blocking loader data in defer() and render it with <Suspense> + <Await>. 7. Deploy — Pick the server.preset for the target platform and verify environment variable access rules before shipping. Core Principles TanStack Start = TanStack Router + Vite + Nitro, giving full-stack React with a single type-safe codebase. createServerFn is the primary mechanism for server-side logic — prefer it over hand-rolled REST endpoints for internal data access. All TanStack Router conventions apply on top of Start: file-based routing, loaders, search param validation, and router context. Streaming and Suspense are first-class citizens; use defer() for anything that shouldn't block the initial response. Keep server-only code (secrets, DB clients, filesystem access) strictly inside server functions or API routes — never import it into client components. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/tanstack-start