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.
- Installs
- 450
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/secondsky/claude-skills --skill tanstack-router- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tanstack-router automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
bun add @tanstack/react-router @tanstack/router-devtools
bun add -d @tanstack/router-plugin
Latest version: v1.170.18 (verified 2026-08-03)
Vite Configuration
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
export default defineConfig({
plugins: [
TanStackRouterVite(), // MUST come before react()
react(),
],
})
Basic Setup
// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'
export const Route = createRootRoute({
component: () => (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<hr />
<Outlet />
</div>
),
})
// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: () => <h1>Home Page</h1>,
})
// src/routes/about.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/about')({
component: () => <h1>About Page</h1>,
})
// src/main.tsx
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen' // Auto-generated
const router = createRouter({ routeTree })
function App() {
return <RouterProvider router={router} />
}
Key Features
1. Type-Safe Navigation
// Fully typed!
<Link to="/posts/$postId" params={{ postId: '123' }} />
// TypeScript error if route doesn't exist
<Link to="/invalid-route" /> // ❌ Error!
2. Route Loaders (Data Fetching)
// src/routes/posts.$postId.tsx
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
const post = await fetchPost(params.postId) // Fully typed!
return { post }
},
component: ({ useLoaderData }) => {
const { post } = useLoaderData()
return <h1>{post.title}</h1>
},
})
3. TanStack Query Integration
import { queryOptions } from '@tanstack/react-query'
const postQueryOptions = (postId: string) =>
queryOptions({
queryKey: ['posts', postId],
queryFn: () => fetchPost(postId),
})
export const Route = createFileRoute('/posts/$postId')({
loader: ({ context: { queryClient }, params }) =>
queryClient.ensureQueryData(postQueryOptions(params.postId)),
component: () => {
const { postId } = Route.useParams()
const { data: post } = useQuery(postQueryOptions(postId))
return <h1>{post.title}</h1>
},
})
Common Errors & Solutions
Error 1: Devtools Dependency Resolution
Problem: Build fails with @tanstack/router-devtools-core not found.
Solution:
bun add @tanstack/router-devtools
Error 2: Vite Plugin Order
Problem: Routes not auto-generated.
Solution: TanStackRouterVite MUST come before react():
plugins: [
TanStackRouterVite(), // First!
react(),
]
Error 3: Type Registration Missing
Problem: Link to not typed.
Solution:
// src/routeTree.gen.ts is auto-generated
// Import it in main.tsx to register types
import { routeTree } from './routeTree.gen'
Error 4: Loader Not Running
Problem: Loader function not called on navigation.
Solution: Ensure route exports Route:
export const Route = createFileRoute('/path')({ loader: ... })
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
import { defineConfig } from 'vite'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
export default defineConfig({
plugins: [
TanStackRouterVite(),
react(),
cloudflare(),
],
})
API Backend Pattern
// functions/api/posts.ts
export async function onRequestGet({ env }) {
const { results } = await env.DB.prepare('SELECT * FROM posts').all()
return Response.json(results)
}
// Client-side route
export const Route = createFileRoute('/posts')({
loader: async () => {
const posts = await fetch('/api/posts').then(r => r.json())
return { posts }
},
})
Templates
All templates in ~/.claude/skills/tanstack-router/templates/:
- package.json - Dependencies and versions
- vite.config.ts - Vite plugin setup
- basic-routes/ - File-based routing structure
- route-with-loader.tsx - Data loading example
- query-integration.tsx - TanStack Query pattern
- nested-routes/ - Layout pattern
- cloudflare-deployment.md - Workers setup guide
Reference Docs
Deep-dive guides in ~/.claude/skills/tanstack-router/references/:
- file-based-routing.md - Route structure conventions
- type-safety.md - TypeScript patterns
- data-loading.md - Loaders and TanStack Query
- cloudflare-workers.md - Deployment guide
- common-errors.md - All 7+ errors with solutions
- migration-guide.md - From React Router
Integration with Existing Skills
Works with:
- tanstack-query - Recommended for data fetching
- tanstack-table - Display data from routes
- cloudflare-worker-base - API backend
- tailwind-v4-shadcn - UI styling
Token Efficiency
Without skill: ~10k tokens, 40-50 min, 3-4 errors With skill: ~4k tokens, 15-20 min, 0 errors Savings: 60% tokens, 65% time
Production Validation
Tested with:
- React 19.2, Vite 7.3, TypeScript 5.9
- Cloudflare Workers (Wrangler 4.0)
- TanStack Query v5.101.4
Stack compatibility:
- ✅ Cloudflare Workers + Static Assets
- ✅ TanStack Query integration
- ✅ TypeScript strict mode
Last Updated: 2026-08-03 Library Version: @tanstack/react-router v1.170.18
FAQ
What does the tanstack-router skill do?
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.
How do I install tanstack-router?
Run npx skills add https://github.com/secondsky/claude-skills --skill tanstack-router in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-router/ (personal) or .claude/skills/tanstack-router/ (project).
Which AI agents can use tanstack-router?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tanstack-router safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tanstack-router?
It is published by secondsky in secondsky/claude-skills. It has 450 recorded installs.
More from secondsky/claude-skills
tailwind-v4-shadcn
secondsky/claude-skills
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.
aceternity-ui
secondsky/claude-skills
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
vitest-testing
secondsky/claude-skills
Modern TypeScript/JavaScript testing with Vitest. Fast unit and integration tests, native ESM support, Vite-powered HMR, and comprehensive mocking. Use for testing TS/JS projects.
motion
secondsky/claude-skills
Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.
playwright
secondsky/claude-skills
Browser automation and E2E testing with Playwright. Auto-detects dev servers, writes clean test scripts. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use for cross-browser testing, visual regression, API testing, component testing in TypeScript/JavaScript and Python projects.
api-testing
secondsky/claude-skills
HTTP API testing for TypeScript (Supertest) and Python (httpx, pytest). Test REST APIs, GraphQL, request/response validation, authentication, and error handling.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.