Agent skill · software engineering · secondsky
tanstack-router
TanStack Router type-safe file-based routing for React. Use for SPAs, TanStack Query integration, Cloudflare Workers, or encountering devtools, type safety, loader, Vite bundling errors.
Why this skill is useful
Provides specific commands and patterns for implementing type-safe file-based routing in React applications, which the AI wouldn't reliably generate on its own.
What it needs
Requires bun installed locally. About 4k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
TanStack Router Skill Build type-safe, file-based routing for React SPAs with TanStack Router, optimized for Cloudflare Workers deployment. --- When to Use This Skill Auto-triggers when you mention: "TanStack Router" or "type-safe routing" "file-based routing" or "route configuration" "React routing" with TypeScript emphasis "route loaders" or "data loading in routes" "Cloudflare Workers routing" Use this skill when: Building SPAs with type-safe navigation Implementing file-based routing (like Next.js) Need route-level data loading Integrating routing with TanStack Query Deploying to Cloudflare Workers Want better TypeScript support than React Router --- Quick Start Installation Latest version: v1.170.18 (verified 2026-08-03) Vite Configuration Basic Setup --- Key Features 1. Type-Safe Navigation 2. Route Loaders (Data Fetching) 3. TanStack Query Integration --- Common Errors & Solutions Error 1: Devtools Dependency Resolution Problem: Build fails with @tanstack/router-devtools-core not found. Solution: Error 2: Vite Plugin Order Problem: Routes not auto-generated. Solution: TanStackRouterVite MUST come before react(): Error 3: Type Registration Missing Problem: Link to not typed. Solution: Error 4: Loader Not Running Problem: Loader function not called on navigation. Solution: Ensure route exports Route: Error 5: Memory Leak with Forms Problem: Production crashes when using TanStack Form + Router. Solution: This is a known issue (#5734). Workaround: Use React Hook Form instead, or wait for fix. --- Cloudflare Workers Deployment Vite Config API Backend Pattern --- Templates All templates in ~/.claude/skills/tanstack-router/templates/: 1. package.json - Dependencies and versions 2. vite.config.ts - Vite plugin setup 3. basic-routes/ - File-based routing structure 4. route-with-loader.tsx - Data loading example 5. query-integration.tsx - TanStack Query pattern 6. nested-routes/ - Layout pattern 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/tanstack-router