Agent skill · mindrally
tanstack-router
Type-safe, file-based routing for React with TanStack Router. Use when defining routes with createFileRoute, validating search params with Zod, writing route loaders, setting up auth guards with beforeLoad, integrating TanStack Query into loaders, or configuring router context and preloading.
What it needs
About 4k tokens when loaded.
What this skill does
TanStack Router TanStack Router is a fully type-safe router for React that treats routes, loaders, params, and search params as first-class typed data rather than untyped strings. Workflow for Adding a New Route 1. Create the route file — Add a file under src/routes/ following the file-based routing convention (see below). 2. Define the route — Export Route from createFileRoute('/path')({...}) with component, and optionally loader, validateSearch, beforeLoad, errorComponent, and pendingComponent. 3. Validate search params — If the route reads query params, define a Zod schema and pass it as validateSearch. 4. Load data — Fetch data in loader, not in a component useEffect; integrate with TanStack Query via queryClient.ensureQueryData when caching is needed. 5. Guard access — Add beforeLoad checks (e.g. auth) that throw redirect({ to: '/login' }) when a precondition fails. 6. Link to the route — Navigate with <Link to="/path" params={...} search={...}> so the compiler validates params and search at every call site. 7. Regenerate the route tree — Ensure routeTree.gen.ts is regenerated (automatic under the Vite plugin's dev server / build) before running or building the app. Core Principles TanStack Router is 100% type-safe — lean on TypeScript generics for params, search params, and loader data instead of manual casting. Prefer file-based routing with @tanstack/router-vite-plugin (or @tanstack/router-plugin/vite) for scalability over manually constructed route trees. Always define routes with createFileRoute (leaf/nested routes) or createRootRoute / createRootRouteWithContext (root). Route data loading belongs in loader functions, not in component useEffect — this enables preloading, parallel loading, and pending/error states. Search params are first-class state — always define their schema with Zod (or another standard-schema validator) so they are typed and validated on every read. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/tanstack-router