From deckardger-tanstack-agent-skills
Provides TanStack Router best practices for type-safe routing, data loading, search params, navigation, route organization, and code splitting in React apps with complex routing.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-2 --plugin deckardger-tanstack-agent-skillsThis skill uses the workspace's default tool permissions.
Comprehensive guidelines for implementing TanStack Router patterns in React applications. These rules optimize type safety, data loading, navigation, and code organization.
rules/ctx-root-context.mdrules/err-not-found.mdrules/load-ensure-query-data.mdrules/load-parallel.mdrules/load-use-loaders.mdrules/nav-link-component.mdrules/nav-route-masks.mdrules/org-virtual-routes.mdrules/preload-intent.mdrules/router-default-options.mdrules/search-custom-serializer.mdrules/search-validation.mdrules/split-lazy-routes.mdrules/ts-register-router.mdrules/ts-use-from-param.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.