How does this skill help with Vite configuration?

It ensures the TanStack Router Vite plugin is correctly ordered before the React plugin to prevent route generation failures and missing routeTree.gen.ts files.

Does it support Zod validation for search params?

Yes, it provides optimized patterns for Zod-backed search param validation and includes fixes for common type inference issues when using the Zod adapter.

Can I use this for pathless routes and authentication?

Absolutely; it includes specific patterns for 'beforeLoad' authentication guards and workarounds for pathless route issues like the notFoundComponent rendering bug.

Does it help with data fetching and TanStack Query?

Yes, it covers route loaders, prefetching with TanStack Query ensureQueryData, and handling specific errors like aborted loader rendering issues.

TanStack Router Expert

Name: TanStack Router Expert
Author: brendadeeznuts1111

bybrendadeeznuts1111

디자인 도구

Implements type-safe, file-based React routing while proactively preventing common TanStack Router implementation errors.

소개

This skill provides comprehensive guidance for building robust React SPAs using TanStack Router, focusing on type-safe navigation, route-level data fetching, and seamless TanStack Query integration. It helps developers implement complex routing patterns—such as pathless layouts, virtual file routing, and Zod-backed search param validation—while proactively preventing over 20 documented issues including Vite plugin ordering bugs, SSR streaming crashes, and search param type inference regressions.

주요 기능

Type-safe navigation with autocomplete and validated route parameters
File-based and programmatic virtual routing configuration patterns
Advanced search param validation using Zod and custom adapters
Proactive troubleshooting for 20+ documented library issues and regressions
0 GitHub stars
Deep integration with TanStack Query for prefetching and caching

사용 사례

Migrating existing React applications to type-safe, file-based routing systems
Building large-scale React SPAs with complex nested layouts and typed params
Implementing high-performance data loading and prefetching strategies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega tanstack-router

For use in Claude.ai and ChatGPT

Download Skill

GitHub

소개