setup-tanstack-router

Enforce TanStack Router patterns and auto-regenerate route trees.

3|1|Updated Mar 23, 2026

Search Tags:#automation #routing #hooks #code-quality #type-safety #tanstack-router #route-generation

Ready to run

npx skills add https://github.com/malinskibeniamin/skills --skill setup-tanstack-router

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: setup-tanstack-router
Source: https://github.com/malinskibeniamin/skills/tree/main/setup-tanstack-router
Command: npx skills add https://github.com/malinskibeniamin/skills --skill setup-tanstack-router

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bun, and includes scripts (resource) components.

What problem does it solve?

Automatically enforce TanStack Router usage patterns and prevent common routing mistakes by auto-generating and validating route trees during development.

Core Features & Use Cases

Ban react-router-dom imports within route files to promote TanStack Router usage.
Block window.location navigation and hard reloads, guiding developers toward router-based navigation and invalidate/query-based approaches.
Auto-regenerate the route tree on route file changes to maintain routing accuracy and reduce manual sync.
Enforce typed route params with explicit from-based references and require validateSearch where useSearch is used.
Guard against anti-patterns like strict: false and untyped hooks, and encourage type-safe, component-scoped routing.

Quick Start

Configure your project to manage routes with TanStack Router and enable the auto-generation hooks to keep the route tree up to date.

Frequently Asked Questions about setup-tanstack-router

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

FAQPage Schema

How do I automate TanStack Router route generation and prevent routing mistakes?▼

Automate TanStack Router route generation by enabling auto-regeneration hooks on route file changes, which maintains routing accuracy and prevents common mistakes like react-router-dom imports or untyped hooks without manual sync.

How do I enforce type-safe routing and validate search params in TanStack Router?▼

Enforce type-safe routing in TanStack Router by requiring typed route params with explicit from-based references and mandating validateSearch usage wherever useSearch is called, guarding against untyped hooks and strict: false anti-patterns.

Why should I block window.location navigation in a TanStack Router codebase?▼

Block window.location navigation in a TanStack Router codebase to prevent hard reloads and guide developers toward router-based navigation and invalidate or query-based approaches for proper caching and state management.

Can I use react-router-dom imports in route files managed by TanStack Router?▼

No, react-router-dom imports are banned within route files to promote consistent TanStack Router usage and prevent conflicting routing paradigms within the same application codebase.

Do I need Bun to run auto-regeneration hooks for TanStack Router route trees?▼

Yes, Bun is required as the runtime dependency to execute the scripts that auto-regenerate the route tree on route file changes and enforce safe routing practices across .tsx and .ts files.