skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-router-routing

Generate file-based TanStack Router routes with Zod-validated params and routeTree.gen.ts.

1|Updated Apr 26, 2026
Search Tags:#tanstack#zod#router#types#params#file-based-routing
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill tanstack-router-routing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-router-routing
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/tanstack-router-routing
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill tanstack-router-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured, type-safe integration surface for building and maintaining file-based routes with TanStack Router in the dean-stack, reducing boilerplate and runtime errors.

Core Features & Use Cases

  • File-based routing under apps/web/app/routes/, with a clear ownership of route trees and generated route definitions.
  • The createFileRoute API, route parameters, and search params, plus Link / useNavigate / useRouter, all wired with Zod-based schemas for safety.
  • Supports prerendering and IDB-driven state management, with per-route and global error handling to recover from failures.

Quick Start

Create a new file under apps/web/app/routes/ and export a Route with createFileRoute('/my/path') to begin.

Frequently Asked Questions about tanstack-router-routing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up file-based routing with TanStack Router?▼

To set up file-based routing, create a new file under apps/web/app/routes/ and export a Route using createFileRoute('/my/path'). This generates a routeTree.gen.ts file to keep the router synced.

How does TanStack Router validate route parameters and search params?▼

TanStack Router validates route parameters and search params using Zod-based schemas for type safety. This enforces Zod-first types and reduces runtime errors during navigation.

Can I use Zod schemas with TanStack Router for typed navigation?▼

Yes, you can use Zod schemas with TanStack Router. The integration enforces Zod-first types for parsing params and search params, ensuring robust type-safe navigation and prerendering.

What is the best way to maintain TanStack Router route trees as files change?▼

The best way to maintain route trees is by outputting a generated routeTree.gen.ts file. This file keeps the router in sync with your file-based routes as you add or modify paths.

Does TanStack Router support prerendering and error handling for file-based routes?▼

Yes, TanStack Router supports prerendering and per-route error handling. It integrates with IDB-driven state management to recover from failures and ensure robust runtime navigation.

Related Skills

Explore More Software Engineering Skills→
sanchezx1sanchezx1

zod-schema-validator

Validate incoming data with Zod schemas in services and API routes.

Community
Intermediate
tkgstratortkgstrator
1

tanstack-router

Generates file-based TanStack Router routes and typed parameters for Vite+React SPAs via the @tanstack/router-plugin.

Community
Intermediate
matthewharwoodmatthewharwood
1

zod

Derive TypeScript types from Zod 4 schemas and parse inputs instead of casting.

Community
Advanced
dennislee928dennislee928
54

TanStack Router

Configure type-safe file-based routing for React applications with TanStack Router.

Community
Advanced