How does this skill handle search parameters?

The skill emphasizes type-safe search parameter validation using Zod, ensuring that your URL state is always validated, typed, and predictable across the application.

Does this skill support TanStack Query integration?

Yes, it includes specific patterns for using Route Loaders alongside TanStack Query to ensure data is prefetched and ready before a route renders.

What are the benefits of using TanStack Router with Claude Code?

TanStack Router's strict type-safety and file-based conventions provide clear structures that help AI coding assistants generate bug-free navigation, valid route definitions, and predictable data-fetching code.

Can I use this skill to implement authentication guards?

Absolutely. It provides patterns for protected routes using 'beforeLoad' and 'redirect' to manage authentication states and route-level authorization.

TanStack Router

Name: TanStack Router
Author: MadAppGang

byMadAppGang

•

177

生産性とワークフロー

Implements type-safe, file-based routing patterns for React applications using TanStack Router.

概要

This skill provides comprehensive guidance for implementing TanStack Router in React projects, focusing on modern patterns like type-safe navigation, file-based routing structures, and integrated data loading. It assists developers in setting up the initial routing infrastructure, configuring Vite plugins, defining complex nested layouts, and handling type-safe search parameters and route guards. It is particularly useful when building scalable single-page applications that require rigorous type safety across the entire routing lifecycle, from link creation to programmatic navigation and data prefetching.

主な機能

Type-safe file-based route generation and configuration
Hierarchical layout management with nested outlets and route context
Optimized data loading with route loaders and TanStack Query integration
Advanced search parameter validation using Zod schemas
Built-in route guards and authentication redirect patterns
177 GitHub stars

ユースケース

Implementing complex, multi-level nested layouts with shared state
Building robust data-fetching workflows that leverage preloading and loaders
Converting legacy React projects to a type-safe, file-based routing system

概要

主な機能

Type-safe file-based route generation and configuration
Hierarchical layout management with nested outlets and route context
Optimized data loading with route loaders and TanStack Query integration
Advanced search parameter validation using Zod schemas
Built-in route guards and authentication redirect patterns
177 GitHub stars

ユースケース

Implementing complex, multi-level nested layouts with shared state
Building robust data-fetching workflows that leverage preloading and loaders
Converting legacy React projects to a type-safe, file-based routing system