[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71B2D57YY225K3CVJHJVW2X":3,"skill-same:01M71B2D57YY225K3CVJHJVW2X":128},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":14,"repositoryHtmlUrl":47,"repositoryHomepageUrl":48,"ownerHtmlUrl":49,"ownerBlogUrl":50,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M71B2D57YY225K3CVJHJVW2X","tanstack-router-best-practices",null,"TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.","escwxyz\u002Fskills-re","escwxyz","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F124119483?v=4","01M71B1P3M16B4SZRCEAA6JD69","Jie Wang","01M71B1P47632T1KJ3RQJF6ME2",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"tanstack router","best practices","router","tanstack","tanstack router best practices","navigation","data","safe","data loading","routing","with","type","react","activate","when","search params","applications","search","loading","for","2026-11-10 10:12:30",false,"---\nname: tanstack-router-best-practices\ndescription: TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.\n---\n\n# TanStack Router Best Practices\n\nComprehensive guidelines for implementing TanStack Router patterns in React applications. These rules optimize type safety, data loading, navigation, and code organization.\n\n## When to Apply\n\n- Setting up application routing\n- Creating new routes and layouts\n- Implementing search parameter handling\n- Configuring data loaders\n- Setting up code splitting\n- Integrating with TanStack Query\n- Refactoring navigation patterns\n\n## Rule Categories by Priority\n\n| Priority | Category | Rules | Impact |\n|----------|----------|-------|--------|\n| CRITICAL | Type Safety | 4 rules | Prevents runtime errors and enables refactoring |\n| CRITICAL | Route Organization | 5 rules | Ensures maintainable route structure |\n| HIGH | Router Config | 1 rule | Global router defaults |\n| HIGH | Data Loading | 6 rules | Optimizes data fetching and caching |\n| HIGH | Search Params | 5 rules | Enables type-safe URL state |\n| HIGH | Error Handling | 1 rule | Handles 404 and errors gracefully |\n| MEDIUM | Navigation | 5 rules | Improves UX and accessibility |\n| MEDIUM | Code Splitting | 3 rules | Reduces bundle size |\n| MEDIUM | Preloading | 3 rules | Improves perceived performance |\n| LOW | Route Context | 3 rules | Enables dependency injection |\n\n## Quick Reference\n\n### Type Safety (Prefix: `ts-`)\n\n- `ts-register-router` — Register router type for global inference\n- `ts-use-from-param` — Use `from` parameter for type narrowing\n- `ts-route-context-typing` — Type route context with createRootRouteWithContext\n- `ts-query-options-loader` — Use queryOptions in loaders for type inference\n\n### Router Config (Prefix: `router-`)\n\n- `router-default-options` — Configure router defaults (scrollRestoration, defaultErrorComponent, etc.)\n\n### Route Organization (Prefix: `org-`)\n\n- `org-file-based-routing` — Prefer file-based routing for conventions\n- `org-route-tree-structure` — Follow hierarchical route tree patterns\n- `org-pathless-layouts` — Use pathless routes for shared layouts\n- `org-index-routes` — Understand index vs layout routes\n- `org-virtual-routes` — Understand virtual file routes\n\n### Data Loading (Prefix: `load-`)\n\n- `load-use-loaders` — Use route loaders for data fetching\n- `load-loader-deps` — Define loaderDeps for cache control\n- `load-ensure-query-data` — Use ensureQueryData with TanStack Query\n- `load-deferred-data` — Split critical and non-critical data\n- `load-error-handling` — Handle loader errors appropriately\n- `load-parallel` — Leverage parallel route loading\n\n### Search Params (Prefix: `search-`)\n\n- `search-validation` — Always validate search params\n- `search-type-inheritance` — Leverage parent search param types\n- `search-middleware` — Use search param middleware\n- `search-defaults` — Provide sensible defaults\n- `search-custom-serializer` — Configure custom search param serializers\n\n### Error Handling (Prefix: `err-`)\n\n- `err-not-found` — Handle not-found routes properly\n\n### Navigation (Prefix: `nav-`)\n\n- `nav-link-component` — Prefer Link component for navigation\n- `nav-active-states` — Configure active link states\n- `nav-use-navigate` — Use useNavigate for programmatic navigation\n- `nav-relative-paths` — Understand relative path navigation\n- `nav-route-masks` — Use route masks for modal URLs\n\n### Code Splitting (Prefix: `split-`)\n\n- `split-lazy-routes` — Use .lazy.tsx for code splitting\n- `split-critical-path` — Keep critical config in main route file\n- `split-auto-splitting` — Enable autoCodeSplitting when possible\n\n### Preloading (Prefix: `preload-`)\n\n- `preload-intent` — Enable intent-based preloading\n- `preload-stale-time` — Configure preload stale time\n- `preload-manual` — Use manual preloading strategically\n\n### Route Context (Prefix: `ctx-`)\n\n- `ctx-root-context` — Define context at root route\n- `ctx-before-load` — Extend context in beforeLoad\n- `ctx-dependency-injection` — Use context for dependency injection\n\n## How to Use\n\nEach rule file in the `rules\u002F` directory contains:\n1. **Explanation** — Why this pattern matters\n2. **Bad Example** — Anti-pattern to avoid\n3. **Good Example** — Recommended implementation\n4. **Context** — When to apply or skip this rule\n\n## Full Reference\n\nSee individual rule files in `rules\u002F` directory for detailed guidance and code examples.\n","# TanStack Router Best Practices\n\nComprehensive guidelines for implementing TanStack Router patterns in React applications. These rules optimize type safety, data loading, navigation, and code organization.\n\n## When to Apply\n\n- Setting up application routing\n- Creating new routes and layouts\n- Implementing search parameter handling\n- Configuring data loaders\n- Setting up code splitting\n- Integrating with TanStack Query\n- Refactoring navigation patterns\n\n## Rule Categories by Priority\n\n| Priority | Category | Rules | Impact |\n|----------|----------|-------|--------|\n| CRITICAL | Type Safety | 4 rules | Prevents runtime errors and enables refactoring |\n| CRITICAL | Route Organization | 5 rules | Ensures maintainable route structure |\n| HIGH | Router Config | 1 rule | Global router defaults |\n| HIGH | Data Loading | 6 rules | Optimizes data fetching and caching |\n| HIGH | Search Params | 5 rules | Enables type-safe URL state |\n| HIGH | Error Handling | 1 rule | Handles 404 and errors gracefully |\n| MEDIUM | Navigation | 5 rules | Improves UX and accessibility |\n| MEDIUM | Code Splitting | 3 rules | Reduces bundle size |\n| MEDIUM | Preloading | 3 rules | Improves perceived performance |\n| LOW | Route Context | 3 rules | Enables dependency injection |\n\n## Quick Reference\n\n### Type Safety (Prefix: `ts-`)\n\n- `ts-register-router` — Register router type for global inference\n- `ts-use-from-param` — Use `from` parameter for type narrowing\n- `ts-route-context-typing` — Type route context with createRootRouteWithContext\n- `ts-query-options-loader` — Use queryOptions in loaders for type inference\n\n### Router Config (Prefix: `router-`)\n\n- `router-default-options` — Configure router defaults (scrollRestoration, defaultErrorComponent, etc.)\n\n### Route Organization (Prefix: `org-`)\n\n- `org-file-based-routing` — Prefer file-based routing for conventions\n- `org-route-tree-structure` — Follow hierarchical route tree patterns\n- `org-pathless-layouts` — Use pathless routes for shared layouts\n- `org-index-routes` — Understand index vs layout routes\n- `org-virtual-routes` — Understand virtual file routes\n\n### Data Loading (Prefix: `load-`)\n\n- `load-use-loaders` — Use route loaders for data fetching\n- `load-loader-deps` — Define loaderDeps for cache control\n- `load-ensure-query-data` — Use ensureQueryData with TanStack Query\n- `load-deferred-data` — Split critical and non-critical data\n- `load-error-handling` — Handle loader errors appropriately\n- `load-parallel` — Leverage parallel route loading\n\n### Search Params (Prefix: `search-`)\n\n- `search-validation` — Always validate search params\n- `search-type-inheritance` — Leverage parent search param types\n- `search-middleware` — Use search param middleware\n- `search-defaults` — Provide sensible defaults\n- `search-custom-serializer` — Configure custom search param serializers\n\n### Error Handling (Prefix: `err-`)\n\n- `err-not-found` — Handle not-found routes properly\n\n### Navigation (Prefix: `nav-`)\n\n- `nav-link-component` — Prefer Link component for navigation\n- `nav-active-states` — Configure active link states\n- `nav-use-navigate` — Use useNavigate for programmatic navigation\n- `nav-relative-paths` — Understand relative path navigation\n- `nav-route-masks` — Use route masks for modal URLs\n\n### Code Splitting (Prefix: `split-`)\n\n- `split-lazy-routes` — Use .lazy.tsx for code splitting\n- `split-critical-path` — Keep critical config in main route file\n- `split-auto-splitting` — Enable autoCodeSplitting when possible\n\n### Preloading (Prefix: `preload-`)\n\n- `preload-intent` — Enable intent-based preloading\n- `preload-stale-time` — Configure preload stale time\n- `preload-manual` — Use manual preloading strategically\n\n### Route Context (Prefix: `ctx-`)\n\n- `ctx-root-context` — Define context at root route\n- `ctx-before-load` — Extend context in beforeLoad\n- `ctx-dependency-injection` — Use context for dependency injection\n\n## How to Use\n\nEach rule file in the `rules\u002F` directory contains:\n1. **Explanation** — Why this pattern matters\n2. **Bad Example** — Anti-pattern to avoid\n3. **Good Example** — Recommended implementation\n4. **Context** — When to apply or skip this rule\n\n## Full Reference\n\nSee individual rule files in `rules\u002F` directory for detailed guidance and code examples.\n",{"name":5,"description":7},"main","a9b682706866a1a8a44c4621910184c29456acff",".agents\u002Fskills\u002Ftanstack-router-best-practices","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re","https:\u002F\u002Fskills.re","https:\u002F\u002Fgithub.com\u002Fescwxyz","https:\u002F\u002Fjiewa.ng","No Ads please","2026-09-25 02:54:36",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add escwxyz\u002Fskills-re --skill tanstack-router-best-practices",{"tool":59,"command":60},"bunx","bunx skills add escwxyz\u002Fskills-re --skill tanstack-router-best-practices",{"tool":62,"command":63},"pnpm","pnpm dlx skills add escwxyz\u002Fskills-re --skill tanstack-router-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002FSKILL.md",true,[67,73,77,81,85,89,93,97,101,105,109,113,116,120,124],{"path":68,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":71,"sourceHtmlUrl":72},"rules\u002Fctx-root-context.md","REFERENCE","参考文档",4521,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fctx-root-context.md",{"path":74,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":75,"sourceHtmlUrl":76},"rules\u002Ferr-not-found.md",4679,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Ferr-not-found.md",{"path":78,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":79,"sourceHtmlUrl":80},"rules\u002Fload-ensure-query-data.md",4211,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fload-ensure-query-data.md",{"path":82,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":83,"sourceHtmlUrl":84},"rules\u002Fload-parallel.md",5408,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fload-parallel.md",{"path":86,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":87,"sourceHtmlUrl":88},"rules\u002Fload-use-loaders.md",3883,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fload-use-loaders.md",{"path":90,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":91,"sourceHtmlUrl":92},"rules\u002Fnav-link-component.md",4065,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fnav-link-component.md",{"path":94,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":95,"sourceHtmlUrl":96},"rules\u002Fnav-route-masks.md",4363,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fnav-route-masks.md",{"path":98,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":99,"sourceHtmlUrl":100},"rules\u002Forg-virtual-routes.md",3953,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Forg-virtual-routes.md",{"path":102,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":103,"sourceHtmlUrl":104},"rules\u002Fpreload-intent.md",3412,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fpreload-intent.md",{"path":106,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":107,"sourceHtmlUrl":108},"rules\u002Frouter-default-options.md",4507,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Frouter-default-options.md",{"path":110,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":111,"sourceHtmlUrl":112},"rules\u002Fsearch-custom-serializer.md",5333,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fsearch-custom-serializer.md",{"path":114,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":79,"sourceHtmlUrl":115},"rules\u002Fsearch-validation.md","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fsearch-validation.md",{"path":117,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":118,"sourceHtmlUrl":119},"rules\u002Fsplit-lazy-routes.md",4000,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fsplit-lazy-routes.md",{"path":121,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":122,"sourceHtmlUrl":123},"rules\u002Fts-register-router.md",3070,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fts-register-router.md",{"path":125,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":126,"sourceHtmlUrl":127},"rules\u002Fts-use-from-param.md",3674,"https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftanstack-router-best-practices\u002Frules\u002Fts-use-from-param.md",[129,148,173,190,201,216],{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":140,"publishedAt":39},"01M71B3BPYHEEQJYA6QV653HC0","demo-skill","Demonstrates a minimal Skills.re sandbox eval fixture.","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002Fapps\u002Fserver\u002Fsrc\u002Fskill-eval-sandbox\u002Ffixtures\u002Fdemo-skill\u002FSKILL.md",[135],{"categoryNo":136,"categoryName":137,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[141,142,143,144,145,146,147],"demo skill","demo","re","sandbox","eval","minimal","fixture",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":152,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":155,"publishedAt":39},"01M71B3A4941E8D6VHFE4FTDMQ","openspec-propose","Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.","MIT","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fopenspec-propose\u002FSKILL.md",[],[156,157,158,159,160,161,162,163,29,164,165,166,33,167,168,169,170,171,38,172],"openspec","openspec propose","ready","tasks","implementation","build","cli","change","one","proposal","artifacts","use","generated","new","design","complete","get",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":152,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":179,"publishedAt":39},"01M71B38FC73TG0F7BM5582Y8V","openspec-explore","Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fopenspec-explore\u002FSKILL.md",[],[156,180,181,182,183,184,185,162,163,186,33,167,187,38,188,189],"explore","openspec explore","user","think","thinking partner","partner","requirements","mode","thinking","ideas",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":152,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":196,"publishedAt":39},"01M71B36MP2EPJ15XAZNAWBN3P","openspec-archive-change","Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fopenspec-archive-change\u002FSKILL.md",[],[197,156,198,163,182,199,33,167,160,200,171,162],"openspec archive change","archive","workflow","finalize",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":152,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":207,"publishedAt":39},"01M71B34X135R0FZXKKYB8K8TP","openspec-apply-change","Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fopenspec-apply-change\u002FSKILL.md",[],[208,163,156,209,210,211,162,212,182,159,33,167,160,213,214,215],"openspec apply change","openspec apply","apply","work","implement","start","implementing","continue",{"skillNo":217,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":152,"licenseFileUrl":6,"sourceHtmlUrl":218,"categories":219,"keywords":220,"publishedAt":39},"01M71B33BXWGK230VKH621N147","https:\u002F\u002Fgithub.com\u002Fescwxyz\u002Fskills-re\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fopenspec-propose\u002FSKILL.md",[],[157,156,33,160,161,162,163,29,164,159,166,167,168,169,170,171,38,172,165,158]]