OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add deckardger/tanstack-agent-skills --skill 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.
npx skills add deckardger/tanstack-agent-skills --skill 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.
| 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 |
ts-)ts-register-router — Register router type for global inferencets-use-from-param — Use from parameter for type narrowingts-route-context-typing — Type route context with createRootRouteWithContextts-query-options-loader — Use queryOptions in loaders for type inferencerouter-)router-default-options — Configure router defaults (scrollRestoration, defaultErrorComponent, etc.)org-)org-file-based-routing — Prefer file-based routing for conventionsorg-route-tree-structure — Follow hierarchical route tree patternsorg-pathless-layouts — Use pathless routes for shared layoutsorg-index-routes — Understand index vs layout routesorg-virtual-routes — Understand virtual file routesload-)load-use-loaders — Use route loaders for data fetchingload-loader-deps — Define loaderDeps for cache controlload-ensure-query-data — Use ensureQueryData with TanStack Queryload-deferred-data — Split critical and non-critical dataload-error-handling — Handle loader errors appropriatelyload-parallel — Leverage parallel route loadingsearch-)search-validation — Always validate search paramssearch-type-inheritance — Leverage parent search param typessearch-middleware — Use search param middlewaresearch-defaults — Provide sensible defaultssearch-custom-serializer — Configure custom search param serializerserr-)err-not-found — Handle not-found routes properlynav-)nav-link-component — Prefer Link component for navigationnav-active-states — Configure active link statesnav-use-navigate — Use useNavigate for programmatic navigationnav-relative-paths — Understand relative path navigationnav-route-masks — Use route masks for modal URLssplit-)split-lazy-routes — Use .lazy.tsx for code splittingsplit-critical-path — Keep critical config in main route filesplit-auto-splitting — Enable autoCodeSplitting when possiblepreload-)preload-intent — Enable intent-based preloadingpreload-stale-time — Configure preload stale timepreload-manual — Use manual preloading strategicallyctx-)ctx-root-context — Define context at root routectx-before-load — Extend context in beforeLoadctx-dependency-injection — Use context for dependency injectionEach rule file in the rules/ directory contains:
See individual rule files in rules/ directory for detailed guidance and code examples.