tanstack-router

This skill provides comprehensive automation and pattern implementation for TanStack Router in modern React applications. It is designed for frontend engineers looking to standardize routing architectures using file-based systems that prioritize type safety and performance. By leveraging the TanStack Router plugin, this skill helps developers generate route trees, implement layout hierarchies, and handle complex navigation requirements without sacrificing bundle size or developer experience.

The skill is best suited for setting up new projects, refactoring legacy routing systems to modern standards, or scaling large-scale applications with deep route nesting. It simplifies the implementation of dynamic parameters, search param validation using Zod, and efficient code-splitting strategies. Users can automate the creation of route files, configure Vite plugins, and establish robust root layouts that manage global states or providers effectively.

• Automatic route tree generation via TanStackRouterVite plugin configuration.

• Support for file-based routing structures including __root.tsx, index.tsx, and dynamic route segments like $userId.

• Implementation of virtual file routes for lazy-loaded components to improve perceived performance and bundle optimization.

• Type-safe search parameter handling integrating Zod schema validation for improved data integrity during navigation.

• Root layout configuration utilizing Outlet and devtools for streamlined debugging in development environments.

• Automated code splitting configuration to differentiate between critical route logic and non-critical lazy-loaded components.

• Use this skill when initializing a fresh project with standard @tanstack/react-router dependencies.

• Apply the autoCodeSplitting feature for large-scale applications to ensure optimal load times by separating loaders and route configurations from UI components.

• Always define routes using the createFileRoute or createLazyFileRoute factory functions to maintain internal type inference.

• Integrate Zod schemas within the validateSearch property to ensure all incoming URL search parameters are strictly typed and sanitized.

• Ensure the routeTree.gen.ts file is maintained by the Vite plugin; manual file creation should follow standard path conventions to prevent tree mismatch.