tanstack-router — SKILL.md

Variant: standard · When to use: the skill is invoked, you read it, you wire up or extend a TanStack Router app, control returns to the caller.

Verified against @tanstack/react-router v1 (1.170.x), TanStack Router docs as of 2026-06. TanStack Router is on the v1 major (rolling, semver-minor releases). The API below was checked against the official tanstack.com/router docs at forge time. Treat exact option names as version-pinnable: if a name 404s in your installed version, check that version's docs page named in references/sources.md.

Overview

TanStack Router is a fully type-safe client-side router for React SPAs. Its differentiator is that the route tree is the type source: once you register your router via TypeScript declaration merging, every Link, navigate, useParams, useSearch, and useLoaderData is checked against the real routes — invalid paths and missing params are compile errors. It owns first-class search params (URL state validated by a schema), route loaders (data fetched before render, with preloading), and code-splitting. This skill stands up the router, wires the routes type-safely, and covers the loader-to-data-fetching seam (including the TanStack Query handshake) and a test harness for routed components. It is the routing layer; the full-stack framework TanStack Start builds on top of it (out of scope here — see Boundaries).

When to activate

• ✅ Setting up routing in a Vite + React + TypeScript SPA (or extending an existing TanStack Router app).
• ✅ Defining routes, typed navigation, validated search params, or route loaders.
• ✅ Wiring route loaders to TanStack Query (prefetch in loader, read in component).
• ✅ Writing a test that renders a routed component (needs the memory-history harness).

Do NOT activate when: