Can I use this skill with Cloudflare Workers?

Yes, it includes specific configuration patterns for connecting TanStack Router frontend routes with Cloudflare Workers backend APIs.

How does this skill handle data fetching?

The skill provides patterns for using route loaders and integrating with TanStack Query to prefetch and cache data before a route even finishes rendering.

Does it support the TanStack Devtools?

Yes, it includes troubleshooting steps for dependency resolution errors commonly found when installing and configuring @tanstack/router-devtools.

Why is the Vite plugin order important for TanStack Router?

The TanStackRouterVite plugin must be placed before the React plugin in your vite.config.ts so it can process route files and generate the route tree before the code is compiled.

What should I do if my route types are missing?

The skill provides a fix involving the manual registration of the route tree in your entry file to ensure TypeScript recognizes all navigation paths.

TanStack Router Expert

Name: TanStack Router Expert
Author: jezweb

byjezweb

•

Developer Tools

Implements type-safe, file-based routing systems for React applications with integrated data loading and TanStack Query patterns.

This skill empowers Claude to architect and debug modern React applications using TanStack Router's file-based routing system. It provides specialized guidance on configuring Vite plugins, implementing end-to-end type-safe navigation, and managing route-level data fetching. It is particularly useful for developers building complex SPAs who need to solve common issues like Vite plugin ordering, devtools dependency conflicts, and Cloudflare Workers integration, ensuring a robust and maintainable routing architecture.

Key Features

01Automated file-based routing setup and project structure organization

02Advanced data fetching patterns using Route Loaders and TanStack Query

03End-to-end TypeScript integration for navigation and route parameters

04Precise Vite configuration optimization for build performance

0591 GitHub stars

06Cloudflare Workers and Pages compatibility for full-stack deployments

Use Cases

01Troubleshooting Vite build errors and routing dependency conflicts

02Migrating legacy React routing to a modern file-based architecture

03Building high-performance React SPAs with strict type safety requirements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills tanstack-router

For use in Claude.ai and ChatGPT

Download Skill