skills.rest
Angael
AngaelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

router-core

Implements type-safe TanStack Router route trees, navigation, and data loading patterns.

Updated Dec 21, 2025
Search Tags:#typescript#react#routing#spa#type-safety#tanstack-router#file-based-routing
One-click install
npx skills add https://github.com/Angael/veles --skill router-core-angael
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core
Source: https://github.com/Angael/veles/tree/main/.agents/skills/router-core
Command: npx skills add https://github.com/Angael/veles --skill router-core-angael

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building type-safe routing in React or Solid applications with TanStack Router involves many subtle rules—fully inferred types, client-first loaders, file-based route generation, and strict path-string conventions—that are easy to get wrong, especially when confusing its APIs with Next.js or React Router. ## Core Features & Use Cases - Route Tree Construction: Create root routes, file routes, and routers with createRootRoute, createFileRoute, and createRouter, including the required Register type declaration for autocomplete. - Sub-Skill Routing: Directs you to specialized guidance for search params, path params, navigation, data loading, auth guards, code splitting, error handling, type safety, and SSR. - Mistake Prevention: Flags critical errors like manually editing createFileRoute path strings or casting inferred types. - Use Case: When scaffolding a new TanStack Start app, use this Skill to set up the root route, router instance, and Register declaration correctly, then follow its decision tree to the right sub-skill for adding dynamic segments or loaders. ## Quick Start Ask the AI to set up a minimal TanStack Router configuration with a root route, an index route, and the Register type declaration for full type safety.

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 type safety?▼

Create a router with createRouter passing your generated routeTree, then declare the Register interface in the @tanstack/react-router module with your router type. Without this declaration, Link and useNavigate lose autocomplete and type inference.

How is TanStack Router different from Next.js or React Router?▼

TanStack Router is client-first: loaders run on the client by default, not server-only like Remix or Next.js. Its types are fully inferred, so you never cast or annotate inferred values, and it offers JSON-first search params and built-in SWR caching.

Does TanStack Router support dynamic route segments and splats?▼

Yes, dynamic segments use the $ prefix, such as /posts/$postId, and splat routes also use $ rather than the older * alias, which will be removed in v2. The router-core-path-params sub-skill covers these patterns in detail.

Why does my createFileRoute path cause silent mismatches?▼

The path string in createFileRoute must exactly match the file's location under src/routes, and the Vite plugin manages it automatically. Manually editing the string creates silent mismatches, so rename files and let the plugin update the path.

Can TanStack Router handle SSR and authentication guards?▼

Yes, it supports streaming and non-streaming SSR with hydration and head management via the router-core-ssr guidance, and auth guards with beforeLoad redirects and RBAC via the router-core-auth-and-guards sub-skill.

Related Skills

Explore More Software Engineering Skills→
tkgstratortkgstrator
1

tanstack-router

Generates file-based TanStack Router routes and typed parameters for Vite+React SPAs via the @tanstack/router-plugin.

Community
Intermediate
TanStackTanStack
14.9k

compositions/router-query

Coordinate TanStack Router data flows with TanStack Query for caching and hydration.

Official
Advanced
abereghiciabereghici

router-core/auth-and-guards

Protect TanStack Router routes with beforeLoad guards and RBAC.

Community
Advanced
MakePrismsMakePrisms
55

react-router-framework-mode

Configure React Router framework-mode routes with loaders, actions, and error boundaries.

Official
Intermediate