router-core/type-safety

Enforces full type inference patterns for TanStack Router routes, hooks, and links.

1.4k|34|Updated Mar 7, 2024
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill router-core-type-safety-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/type-safety
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-router-type-safety
Command: npx skills add https://github.com/mehdibha/dotUI --skill router-core-type-safety-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? TanStack Router infers types for params, search, context, and loader data automatically, but developers and AI agents frequently break this inference by adding casts, annotations, or generic parameters, or by forgetting the Register module declaration entirely. ## Core Features & Use Cases - Register Module Declaration: Sets up the single required declare module registration so Link, useNavigate, and useSearch are fully typed app-wide. - Inference-First Patterns: Shows how to use Route.useParams, Route.useSearch, and Route.useLoaderData without any annotations, plus from narrowing and strict: false for shared components. - TypeScript Performance Guidance: Covers getRouteApi for code-split files, object-syntax addChildren, and as const satisfies LinkProps to avoid slow union checks. - Use Case: When building a typed route like /posts/$postId with validated search params and a loader, this Skill ensures every hook and Link stays fully inferred without a single cast. ## Quick Start Ask the AI to create a type-safe TanStack Router route with validated search params and a loader, following the type-safety skill so no casts or annotations are used.

Frequently Asked Questions about router-core/type-safety

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

FAQPage Schema
How do I make TanStack Router fully type-safe?▼

Register your router type once with `declare module "@tanstack/react-router" { interface Register { router: typeof router } }` after calling createRouter. After registration, every Link, useNavigate, useSearch, and useParams across the app is fully typed automatically.

How to type useSearch and useParams in TanStack Router?▼

Do not add any type annotations or generics — the values are already inferred from the route definition. Narrow the hook with the `from` option, such as `useSearch({ from: "/posts/$postId" })`, to get that route's exact search param types.

Why is TanStack Router TypeScript checking so slow?▼

Slow checks usually come from un-narrowed LinkProps unions, missing `from` on Link and hooks, or tuple-syntax addChildren in large route trees. Use `as const satisfies LinkProps`, narrow with `from`, and prefer object-syntax addChildren.

Can I use TanStack Router hooks in shared components across routes?▼

Yes, pass `strict: false` instead of `from`, for example `useSearch({ strict: false })`. This returns a union of all routes' search params without throwing a runtime error when the current route does not match.

How do I access route data in code-split lazy route files?▼

Use `getRouteApi("/posts")` instead of importing the Route object, which avoids pulling route config into the lazy chunk. The returned routeApi exposes typed useLoaderData, useSearch, and other hooks.

Is TanStack Router the same as React Router or Next.js routing?▼

No, TanStack Router has its own APIs and does not support getServerSideProps, Remix-style loaders, or React Router's useSearchParams. It uses createFileRoute with loader, validateSearch, and hooks like Route.useSearch.