tanstack-start-routes

Create and configure file-based routes in TanStack Start applications.

Updated Feb 23, 2026
One-click install
npx skills add https://github.com/jherr/kdh-templates --skill tanstack-start-routes-jherr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-start-routes
Source: https://github.com/jherr/kdh-templates/tree/main/starters/calculator/.claude/skills/tanstack-start-routes
Command: npx skills add https://github.com/jherr/kdh-templates --skill tanstack-start-routes-jherr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? Setting up routing in TanStack Start requires understanding file-based routing conventions, dynamic parameters, layouts, and pathless routes. This Skill provides the patterns and code templates to implement routes correctly without memorizing the conventions. ## Core Features & Use Cases - File-Based Route Creation: Generate index routes, layout routes, dynamic parameter routes ($param), and catch-all splat routes using TanStack Router conventions. - Layout & Pathless Routes: Configure nested layouts with Outlet, pathless layouts prefixed with underscore, and route groups using parentheses for organization. - Route Configuration: Set up root routes with head metadata, error boundaries, pending components, 404 handling, and search param validation. - Use Case: When adding a blog section to your app, use this Skill to create a posts layout route, an index route, and a dynamic $postId route with proper TypeScript typing and parameter parsing. ## Quick Start Create a new dynamic route at /posts/$postId in my TanStack Start app with a component that displays the post ID from the route params.

Frequently Asked Questions about tanstack-start-routes

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

FAQPage Schema
How do I create a dynamic route in TanStack Start?▼

Create a file with a $ prefix before the parameter name, such as posts.$postId.tsx, and export a Route using createFileRoute('/posts/$postId'). Access the parameter inside your component with Route.useParams().

How to create a layout route in TanStack Router?▼

Create a file like posts.tsx that renders shared UI and an Outlet component where child routes render. Child routes such as posts.index.tsx and posts.$postId.tsx automatically nest inside this layout.

What is a pathless route in TanStack Router?▼

A pathless route is a layout file prefixed with an underscore, like _auth.tsx, that wraps child routes without adding a URL segment. For example, _auth.login.tsx renders at /login, not /_auth/login.

Does TanStack Start support catch-all routes?▼

Yes, use a $ suffix in the filename, such as files.$.tsx, to match any path depth. Access the matched path via the _splat property from Route.useParams().

How do I protect routes with authentication in TanStack Start?▼

Use the beforeLoad option on a pathless layout route to check authentication context and throw a redirect to the login page when the user is not authenticated. All child routes inherit this guard.