Tanstack router
Personal AI agent skills I use in development workflows.
npx -y skills add DobroslavRadosavljevic/skills --skill tanstack-routerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Build, review, debug, configure, migrate, or plan TanStack Router React applications with current docs. Use for @tanstack/react-router, file-based routes, code-based routes, route trees, generated routeTree.gen files, typed navigation, Link/useNavigate/redirect, params, validateSearch, loaderDeps, loaders, beforeLoad, route context, auth guards, notFound, error boundaries, pending/deferred data, preloading, TanStack Query integration, SSR, testing, and production routing rewrites.
SKILL.md
3.7 KB, as published. Nobody here has run it
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
- 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, generatedsrc/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, andssrintegration.
- Package versions for
- Refresh docs for current behavior, new versions, SSR, testing, route generation, or migrations. Start from source-map.md.
- For setup, installation, route-tree generation, and file naming, use setup-route-trees.md.
- For links, navigation, params, search params, masks, and URL state, use navigation-url-state.md.
- For loaders, context, auth guards, Query integration, error/not-found boundaries, preloading, and deferred data, use loaders-context-errors.md.
- For SSR, deployment rewrites, testing, devtools, ESLint, and production checks, use production-testing.md.
Implementation Judgment
- Prefer file-based routing unless the repo already uses code-based routes or the user asks otherwise.
- Treat
routeTree.gen.tsas generated output. Do not hand-edit it; regenerate through the repo's bundler/CLI flow. - Keep navigation typed. Do not build paths by interpolating params or query strings into
to; passto,params,search, andhashseparately. - Every route that reads URL search state should declare
validateSearch; useloaderDepsto expose only the search fields a loader actually uses. - Use
beforeLoadfor route UX gates, redirects, and context enrichment. Do not treat route guards as the private-data authorization boundary. - Put route-shared dependencies in router context; do not call React hooks directly inside
beforeLoadorloader. - Decide explicitly between Router's built-in SWR loader cache and an external cache such as TanStack Query. When Query owns freshness, set router preload stale time to
0and let Query dedupe. - Handle not-found resources in loaders with
notFound()so loader data stays correctly typed and UI avoids flicker.
Verification
Prefer the repo's existing checks. For meaningful Router changes, include the relevant subset:
- Route tree generation via dev/build or explicit Router CLI command.
- Typecheck for route references, params, search, loaders, and context.
- Focused tests for route matching, search validation, loaders, auth redirects, not-found/error boundaries, and navigation.
- Browser smoke for direct loads, client navigation, back/forward, refresh, and production rewrite behavior.