tanstack-router
starsforks
How to install tanstack-router?
deckardger/tanstack-agent-skills/tanstack-router
$npx -y skills add DeckardGer/tanstack-agent-skills --skill tanstack-routerTanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.
SKILL.md
| 1 | # TanStack Router Best Practices |
| 2 | |
| 3 | Comprehensive guidelines for implementing TanStack Router patterns in React applications. These rules optimize type safety, data loading, navigation, and code organization. |
| 4 | |
| 5 | ## When to Apply |
| 6 | |
| 7 | - Setting up application routing |
| 8 | - Creating new routes and layouts |
| 9 | - Implementing search parameter handling |
| 10 | - Configuring data loaders |
| 11 | - Setting up code splitting |
| 12 | - Integrating with TanStack Query |
| 13 | - Refactoring navigation patterns |
| 14 | |
| 15 | ## Rule Categories by Priority |
| 16 | |
| 17 | | Priority | Category | Rules | Impact | |
| 18 | |----------|----------|-------|--------| |
| 19 | | CRITICAL | Type Safety | 4 rules | Prevents runtime errors and enables refactoring | |
| 20 | | CRITICAL | Route Organization | 5 rules | Ensures maintainable route structure | |
| 21 | | HIGH | Router Config | 1 rule | Global router defaults | |
| 22 | | HIGH | Data Loading | 6 rules | Optimizes data fetching and caching | |
| 23 | | HIGH | Search Params | 5 rules | Enables type-safe URL state | |
| 24 | | HIGH | Error Handling | 1 rule | Handles 404 and errors gracefully | |
| 25 | | MEDIUM | Navigation | 5 rules | Improves UX and accessibility | |
| 26 | | MEDIUM | Code Splitting | 3 rules | Reduces bundle size | |
| 27 | | MEDIUM | Preloading | 3 rules | Improves perceived performance | |
| 28 | | LOW | Route Context | 3 rules | Enables dependency injection | |
| 29 | |
| 30 | ## Quick Reference |
| 31 | |
| 32 | ### Type Safety (Prefix: `ts-`) |
| 33 | |
| 34 | - `ts-register-router` — Register router type for global inference |
| 35 | - `ts-use-from-param` — Use `from` parameter for type narrowing |
| 36 | - `ts-route-context-typing` — Type route context with createRootRouteWithContext |
| 37 | - `ts-query-options-loader` — Use queryOptions in loaders for type inference |
| 38 | |
| 39 | ### Router Config (Prefix: `router-`) |
| 40 | |
| 41 | - `router-default-options` — Configure router defaults (scrollRestoration, defaultErrorComponent, etc.) |
| 42 | |
| 43 | ### Route Organization (Prefix: `org-`) |
| 44 | |
| 45 | - `org-file-based-routing` — Prefer file-based routing for conventions |
| 46 | - `org-route-tree-structure` — Follow hierarchical route tree patterns |
| 47 | - `org-pathless-layouts` — Use pathless routes for shared layouts |
| 48 | - `org-index-routes` — Understand index vs layout routes |
| 49 | - `org-virtual-routes` — Understand virtual file routes |
| 50 | |
| 51 | ### Data Loading (Prefix: `load-`) |
| 52 | |
| 53 | - `load-use-loaders` — Use route loaders for data fetching |
| 54 | - `load-loader-deps` — Define loaderDeps for cache control |
| 55 | - `load-ensure-query-data` — Use ensureQueryData with TanStack Query |
| 56 | - `load-deferred-data` — Split critical and non-critical data |
| 57 | - `load-error-handling` — Handle loader errors appropriately |
| 58 | - `load-parallel` — Leverage parallel route loading |
| 59 | |
| 60 | ### Search Params (Prefix: `search-`) |
| 61 | |
| 62 | - `search-validation` — Always validate search params |
| 63 | - `search-type-inheritance` — Leverage parent search param types |
| 64 | - `search-middleware` — Use search param middleware |
| 65 | - `search-defaults` — Provide sensible defaults |
| 66 | - `search-custom-serializer` — Configure custom search param serializers |
| 67 | |
| 68 | ### Error Handling (Prefix: `err-`) |
| 69 | |
| 70 | - `err-not-found` — Handle not-found routes properly |
| 71 | |
| 72 | ### Navigation (Prefix: `nav-`) |
| 73 | |
| 74 | - `nav-link-component` — Prefer Link component for navigation |
| 75 | - `nav-active-states` — Configure active link states |
| 76 | - `nav-use-navigate` — Use useNavigate for programmatic navigation |
| 77 | - `nav-relative-paths` — Understand relative path navigation |
| 78 | - `nav-route-masks` — Use route masks for modal URLs |
| 79 | |
| 80 | ### Code Splitting (Prefix: `split-`) |
| 81 | |
| 82 | - `split-lazy-routes` — Use .lazy.tsx for code splitting |
| 83 | - `split-critical-path` — Keep critical config in main route file |
| 84 | - `split-auto-splitting` — Enable autoCodeSplitting when possible |
| 85 | |
| 86 | ### Preloading (Prefix: `preload-`) |
| 87 | |
| 88 | - `preload-intent` — Enable intent-based preloading |
| 89 | - `preload-stale-time` — Configure preload stale time |
| 90 | - `preload-manual` — Use manual preloading strategically |
| 91 | |
| 92 | ### Route Context (Prefix: `ctx-`) |
| 93 | |
| 94 | - `ctx-root-context` — Define context at root route |
| 95 | - `ctx-before-load` — Extend context in beforeLoad |
| 96 | - `ctx-dependency-injection` — Use context for dependency injection |
| 97 | |
| 98 | ## How to Use |
| 99 | |
| 100 | Each rule file in the `rules/` directory contains: |
| 101 | 1. **Explanation** — Why this pattern matters |
| 102 | 2. **Bad Example** — Anti-pattern to avoid |
| 103 | 3. **Good Example** — Recommended implementation |
| 104 | 4. **Context** — When to apply or skip this rule |
| 105 | |
| 106 | ## Full Reference |
| 107 | |
| 108 | See individual rule files in `rules/` directory for detailed guidance and code examples. |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
