Agent skill · writing content · deckardger
tanstack-router-best-practices
TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.
Why this skill is useful
Provides specific best practices and patterns for type-safe routing and data loading in React applications using TanStack Router, which the AI may not generate reliably on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-04-03. 205 stars on the source repository.
What this skill does
TanStack Router Best Practices Comprehensive guidelines for implementing TanStack Router patterns in React applications. These rules optimize type safety, data loading, navigation, and code organization. When to Apply Setting up application routing Creating new routes and layouts Implementing search parameter handling Configuring data loaders Setting up code splitting Integrating with TanStack Query Refactoring navigation patterns Rule Categories by Priority Priority Category Rules Impact ---------- ---------- ------- -------- CRITICAL Type Safety 4 rules Prevents runtime errors and enables refactoring CRITICAL Route Organization 5 rules Ensures maintainable route structure HIGH Router Config 1 rule Global router defaults HIGH Data Loading 6 rules Optimizes data fetching and caching HIGH Search Params 5 rules Enables type-safe URL state HIGH Error Handling 1 rule Handles 404 and errors gracefully MEDIUM Navigation 5 rules Improves UX and accessibility MEDIUM Code Splitting 3 rules Reduces bundle size MEDIUM Preloading 3 rules Improves perceived performance LOW Route Context 3 rules Enables dependency injection Quick Reference Type Safety (Prefix: ts-) ts-register-router — Register router type for global inference ts-use-from-param — Use from parameter for type narrowing ts-route-context-typing — Type route context with createRootRouteWithContext ts-query-options-loader — Use queryOptions in loaders for type inference Router Config (Prefix: router-) router-default-options — Configure router defaults (scrollRestoration, defaultErrorComponent, etc.) Route Organization (Prefix: org-) org-file-based-routing — Prefer file-based routing for conventions org-route-tree-structure — Follow hierarchical route tree patterns org-pathless-layouts — Use pathless routes for shared layouts org-index-routes — Understand index vs layout routes org-virtual-routes — Understand virtual file routes Data Loading (Prefix: load-) load-use-loaders — Use route loaders for data fetching load-loa …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills deckardger/tanstack-router