type-safety

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? TanStack Router infers types automatically, but developers frequently break that inference with unnecessary casts, annotations, and generic parameters, or lose type safety entirely by skipping router registration. This Skill codifies the correct patterns so params, search, context, and loader data stay fully typed end to end. ## Core Features & Use Cases - Register Module Declaration: Sets up the single required declare module registration so Link, useNavigate, and useSearch are typed app-wide. - Narrowing and Code-Split Patterns: Covers from narrowing on hooks and Link, strict: false for shared components, and getRouteApi for lazy routes. - TypeScript Performance Guidance: Applies object-syntax addChildren, as const satisfies for link options, and ValidateLinkOptions utilities to keep type checking fast. - Use Case: When building a /posts/$postId route, use this Skill to wire validateSearch, loader data, and Route.useParams() without a single cast, and to fix slow type checks caused by un-narrowed LinkProps unions. ## Quick Start Ask the AI to review your TanStack Router routes and remove all type casts while adding the Register declaration and from narrowing where needed.

Frequently Asked Questions about type-safety

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

FAQPage Schema
How do I get type-safe route params in TanStack Router?

Register your router with `declare module '@tanstack/react-router'` and the `Register` interface pointing to your router type. After that, `Route.useParams()`, `useSearch`, and `useLoaderData` are fully inferred with no annotations needed.

How to type Link props in a reusable component with TanStack Router?

Use `ValidateLinkOptions<TRouter, TOptions>` as the prop type with a generic overload, or accept a render prop so `Link` is narrowed at the call site. Never type a variable as raw `LinkProps`, since it is a massive union that slows type checking.

Why is TanStack Router TypeScript checking so slow?

Slow checks usually come from un-narrowed hooks and Links missing the `from` option, tuple-syntax `addChildren` in large trees, or loaders returning complex inferred types like `ensureQueryData` results. Narrow with `from`, use object syntax, and return void from such loaders.

Should I add type annotations to useSearch or useParams results?

No. TanStack Router infers these values from your route definitions, and adding casts or annotations masks real type errors and breaks the inference chain. If a value seems untyped, fix the missing Register declaration instead.

How do I access route data in a code-split lazy route file?

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