skills.rest
lespaceman
lespacemanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

router-plugin

Automate file-based routing and code splitting for TanStack Router across Vite, Webpack, Rspack, and esbuild.

4|1|Updated Feb 3, 2026
Search Tags:#vite#bundler#code-splitting#tanstack-router#file-based-routing#router-plugin
One-click install
npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill router-plugin-lespaceman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-plugin
Source: https://github.com/lespaceman/athena-workflow-marketplace/tree/main/plugins/tanstack-start/skills/upstream/%40tanstack/router-plugin/skills/router-plugin
Command: npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill router-plugin-lespaceman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router's file-based routing and code splitting can be painful to configure consistently across different bundlers and frameworks. This skill consolidates setup, enabling predictable route generation and lazy-loading behavior across Vite, Webpack, Rspack, and esbuild.

Core Features & Use Cases

  • File-based routing generation from a routes directory.
  • Automatic code splitting and lazy loading via unplugin integration.
  • Cross-bundler compatibility (Vite, Webpack, Rspack, esbuild) and framework readiness (React, Solid, Vue).
  • Use Case: Projects with many routes that benefit from automatic chunking and correct plugin order in Vite setups.

Quick Start

Configure tanstackRouter in your build tool (e.g., Vite) to enable file-based routing and code splitting.

Frequently Asked Questions about router-plugin

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

FAQPage Schema
How do I set up file-based routing with TanStack Router in Vite?▼

File-based routing in Vite uses the TanStack Router plugin to automatically generate a route tree from a configured routes directory, enabling seamless directory-based route creation.

Does TanStack Router automatic code splitting work with Webpack and Rspack?▼

Yes, TanStack Router automatic code splitting works consistently across Webpack, Rspack, Vite, and esbuild through unplugin integration, enabling predictable lazy-loading behavior for React, Solid, and Vue projects.

What is the best way to automate code splitting for directory-based routes?▼

Automating code splitting for directory-based routes is best handled by configuring a router plugin that generates the route tree and applies dynamic imports automatically during the build process.

Can I use TanStack Router file-based routing with Solid or Vue?▼

Yes, TanStack Router file-based routing supports React, Solid, and Vue ecosystems, allowing you to configure the target framework during bundler integration for cross-framework compatibility.

How do I configure routesDirectory and generatedRouteTree for code splitting?▼

You configure routesDirectory to point to your route files and generatedRouteTree to define the output location, allowing the bundler plugin to automate route generation and code splitting.

Why does TanStack Router code splitting require correct plugin order in Vite setups?▼

Correct plugin order in Vite ensures the router plugin accurately intercepts and processes directory-based routes before bundling, preventing race conditions and ensuring proper automatic chunking for large projects.

Related Skills

Explore More Software Engineering Skills→
rezicsrezics
6

router-plugin

Generate TanStack Router route trees and enable code-splitting for file-based routes.

Official
Advanced
jezwebjezweb
961

TanStack Router

Generate typed file-based routes with TanStack Router for React SPAs.

Community
Intermediate
abereghiciabereghici

solid-router

Bind TanStack Router to Solid apps for type-safe routing.

Community
Advanced
lespacemanlespaceman
4

router-core/code-splitting

Implement automatic and manual code-splitting for TanStack Router routes.

Community
Advanced