setup-tanstack-router

Generate TanStack Router route trees and enforce typed routing patterns in React applications.

34|4|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/redpanda-data/ui-harness --skill setup-tanstack-router-redpanda-data
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: setup-tanstack-router
Source: https://github.com/redpanda-data/ui-harness/tree/main/setup-tanstack-router
Command: npx skills add https://github.com/redpanda-data/ui-harness --skill setup-tanstack-router-redpanda-data

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the generation of a TanStack Router route tree and enforces best practices for routing in React applications, streamlining the setup process and ensuring code quality.

Core Features & Use Cases

  • Auto-Generation of Route Tree: Generates the route tree from existing route files.
  • Enforcement of Best Practices: Enforces router patterns, such as banning certain import paths and methods to prevent common errors.
  • Type Safety: Enforces the use of typed hooks for useParams, useSearch, useLoaderData, and useRouteContext.
  • Use Case: For a React developer setting up a new project with TanStack Router, this Skill automatically creates and configures the route tree and ensures best practices are followed throughout the development process.

Quick Start

Install and configure the setup-tanstack-router skill to automatically generate the route tree for your project.

Frequently Asked Questions about setup-tanstack-router

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

FAQPage Schema
How do I automatically generate a TanStack Router route tree from source files?

Automatically generating a TanStack Router route tree scans existing React route source files to create and configure the route tree, streamlining project setup and ensuring routing best practices are followed.

How do I enforce type safety for useParams and useSearch hooks in TanStack Router?

Enforcing type safety for TanStack Router hooks requires using typed implementations for useParams, useSearch, useLoaderData, and useRouteContext, which this process automatically enforces to prevent common routing errors.

Can I ban unauthorized imports to prevent routing errors in React TanStack Router?

Banning unauthorized imports in React TanStack Router prevents common routing errors by enforcing specific router patterns and restricting certain import paths and methods throughout the application.

What is the best way to enforce route context and loader patterns in TanStack Router?

The best way to enforce route context and loader patterns in TanStack Router is by automating route tree creation and applying strict rules for typed hooks, ensuring adherence to routing best practices.

Does setting up TanStack Router require existing React route files to automate routing patterns?

Setting up TanStack Router automation requires existing React route source files to generate the route tree and enforce patterns like typed hooks for params, search, loaders, and route context.

Why does TanStack Router auto-routing ban certain import paths and methods?

TanStack Router auto-routing bans certain import paths and methods to prevent common routing errors and strictly enforce authorized routing patterns, ensuring consistent code quality across the React application.