TanStack Router

Use this skill when work touches TanStack Router, especially @tanstack/react-router, src/routes/**, src/router.tsx, route tree generation, typed navigation, or route-owned data loading.

Workflow

1. Inspect the local Router shape first:
   • Package versions for @tanstack/react-router, @tanstack/router-plugin, devtools, adapters, and any Query/SSR integration.
   • Routing mode: file-based, code-based, virtual file routes, or mixed.
   • Route entrypoints: src/routes/__root.tsx, src/router.tsx, generated src/routeTree.gen.ts, app/client entry, and SSR entry if present.
   • Route options that affect behavior: validateSearch, params, beforeLoad, loaderDeps, loader, pendingComponent, errorComponent, notFoundComponent, search.middlewares, staleTime, gcTime, preload, and ssr integration.
2. Refresh docs for current behavior, new versions, SSR, testing, route generation, or migrations. Start from source-map.md.
3. For setup, installation, route-tree generation, file naming, and colocating non-route modules beside routes (-components, -hooks, -lib, …), use setup-route-trees.md.
4. For links, navigation, params, search params, masks, and URL state, use navigation-url-state.md.
5. For loaders, context, auth guards, Query integration, error/not-found boundaries, preloading, and deferred data, use loaders-context-errors.md.
6. For SSR, deployment rewrites, testing, devtools, ESLint, and production checks, use production-testing.md.

Implementation Judgment