skills.rest
Albo-Club
Albo-ClubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

router-core

Implements type-safe TanStack Router route trees, loaders, navigation, and SSR patterns.

Updated May 26, 2026
Search Tags:#react#routing#type-safety#loaders#ssr#tanstack-router#file-based-routing
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill router-core-albo-club
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-router-core
Command: npx skills add https://github.com/Albo-Club/albo-os --skill router-core-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router, @tanstack/zod-adapter, zod, and includes references (resource) components.

What problem does it solve? Building routes in TanStack Router requires correct use of fully inferred types, client-first loaders, and file-based route conventions that differ sharply from Next.js or React Router, and mistakes like casting inferred values or hand-editing generated route paths silently break type safety and builds. ## Core Features & Use Cases - Core routing guidance: Covers createRouter, createRootRoute, createRootRouteWithContext, route matching, sorting, and the mandatory Register type declaration. - Sub-skill routing: Directs tasks to focused sub-skills for search params, path params, navigation, data loading, auth guards, code splitting, not-found handling, type safety, and SSR. - Use Case: When adding a protected dashboard route with paginated search params, the skill routes you to auth-and-guards for the beforeLoad redirect and to search-params for validateSearch with loaderDeps cache keys. ## Quick Start Ask the assistant to create a new TanStack Router route with a loader and type-safe search params using the router-core skill.

Frequently Asked Questions about router-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up TanStack Router with file-based routing?▼

Create route files under src/routes using createFileRoute, let the Vite plugin generate routeTree.gen.ts, then pass the tree to createRouter. Add the Register module declaration so Link and useNavigate get full type safety.

How do TanStack Router loaders differ from Next.js or Remix?▼

TanStack Router loaders are client-first and run in the browser by default, not server-only like Remix or Next.js. With TanStack Start SSR they run on both client and server, so server-only code belongs in server functions, not loaders.

Why do Link and useNavigate have no autocomplete in TanStack Router?▼

Autocomplete requires the Register interface declaration in your router file: declare module '@tanstack/react-router' with interface Register containing your router type. Without it, all paths are untyped strings.

Can I use search params as loader cache keys in TanStack Router?▼

Yes, use loaderDeps to select which validated search params affect the cache key, then access them via deps in the loader. Return only the params the loader needs, not the entire search object, to avoid unnecessary reloads.

Why does my TanStack Router build fail with react-router-dom imports?▼

TanStack Router is a separate library; all routing exports must come from @tanstack/react-router. Imports from react-router-dom or next/* produce conflicting routes or build errors and must be replaced.

Related Skills

Explore More Software Engineering Skills→
firstaxelfirstaxel

tanstack-router

Implements type-safe file-based routing with loaders and search params for React applications.

Community
Intermediate
RajAryanIITBHURajAryanIITBHU

clerk-tanstack-patterns

Protect TanStack React Start routes and server functions with Clerk authentication.

Community
Intermediate
TanStackTanStack
15.0k

auth-server-primitives

Implements server-side session cookies, OAuth, CSRF, and rate limiting for TanStack Start.

Official
Advanced
marcusagmmarcusagm
4

nextjs-best-practices

Guide Next.js 13+ App Router projects in separating server and client components.

Community
Advanced