tanstack-start-routes

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

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/jherr/jdh-swar-test-saas-1 --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/jdh-swar-test-saas-1/tree/main/.claude/skills/tanstack-start-routes
Command: npx skills add https://github.com/jherr/jdh-swar-test-saas-1 --skill tanstack-start-routes-jherr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation and management of routes within TanStack Start applications, leveraging file-based routing for intuitive navigation setup.

Core Features & Use Cases

  • File-Based Routing: Automatically generates routes based on file structure in src/routes/.
  • Layouts & Nested Routes: Easily define layout routes and nested route structures.
  • Dynamic Route Parameters: Handle dynamic segments in URLs for personalized content.
  • Pathless Layouts: Create layouts that don't consume URL segments.
  • Use Case: When adding a new page like /products/:productId to your TanStack Start app, this skill helps you define the route, its layout, and how to handle the dynamic productId.

Quick Start

Use the tanstack-start-routes skill to create a new page route for /about in your TanStack Start application.

Frequently Asked Questions about tanstack-start-routes

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

FAQPage Schema
How do I set up file-based routing in TanStack Start?

File-based routing in TanStack Start uses your file structure in the `src/routes/` directory to automatically generate routes. This skill facilitates defining root layouts, index routes, and nested structures without manual route configuration.

How does TanStack Router handle dynamic route parameters and pathless layouts?

TanStack Router handles dynamic route parameters by identifying dynamic segments in URLs for personalized content. Pathless layouts allow you to create layout routes that wrap components without consuming any URL segments.

Can I configure error handling and pending states for TanStack Start routes?

Yes, you can configure route options for TanStack Start routes including error handling, pending states, and search param validation. This ensures robust management of asynchronous UI behaviors and error boundaries.

What is the best way to add nested layouts to a TanStack Start application?

The best way to add nested layouts is by structuring files within the `src/routes/` directory to reflect the hierarchy. This skill helps define nested route structures and layout routes for intuitive navigation setup.

How do I create catch-all routes for unmatched paths in TanStack Router?

Catch-all routes handle unmatched paths in TanStack Router. This skill supports defining catch-all routes alongside dynamic parameters and pathless layouts to manage comprehensive routing scenarios in TanStack Start.