skills.rest
cill-i-am
cill-i-amCOMMUNITY
Explore all skills by this author →
𝕏@cillo_bGitHub

router-plugin

Generate TanStack Router route trees with automatic code splitting for Vite, Webpack, Rspack, and esbuild.

Updated Apr 1, 2026
Search Tags:#tanstack#plugin#router#webpack#vite#code-splitting#route-generation
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill router-plugin-cill-i-am
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-plugin
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-router-plugin
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill router-plugin-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router bundler plugin for route generation and automatic code splitting. Supports Vite, Webpack, Rspack, and esbuild. Configures autoCodeSplitting, routesDirectory, target framework, and code split groupings.

Core Features & Use Cases

  • Generates a file-based route tree and automatically splits code for efficient loading.
  • Ensures correct plugin order in Vite configs (router plugin before the framework plugin).
  • Exposes configurable options like target, routesDirectory, generatedRouteTree, autoCodeSplitting, and enableRouteGeneration.

Quick Start

Install and configure the plugin in your build setup to enable file-based routing and automatic 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 configure TanStack Router automatic code splitting in Vite?▼

To configure TanStack Router automatic code splitting in Vite, add the router plugin before the framework plugin and enable the autoCodeSplitting option to generate an optimized route tree.

What does TanStack Router route generation do for file-based routing?▼

TanStack Router route generation automates creating a file-based route tree by scanning your routesDirectory to produce a generatedRouteTree file, ensuring predictable routing structures and optimized bundle loading.

Does the TanStack Router bundler plugin support Webpack and Rspack?▼

Yes, the TanStack Router bundler plugin supports Webpack and Rspack alongside Vite and esbuild, applying consistent route generation and automatic code splitting configurations across these build tools.

Why is plugin order important when setting up TanStack Router with Vite?▼

Plugin order is critical in Vite because the TanStack Router plugin must execute before the framework plugin, ensuring the route tree is generated and code is split before the application builds.

What configuration options are required for TanStack Router route generation?▼

Core configuration options for TanStack Router route generation include target, routesDirectory, generatedRouteTree, and autoCodeSplitting, ensuring the bundler produces the correct route tree and optimized bundles.

Can I use TanStack Router code splitting with esbuild?▼

Yes, you can use TanStack Router code splitting with esbuild, as the plugin integrates with esbuild configurations to apply automatic code splitting and generate the required route tree efficiently.

Related Skills

Explore More Software Engineering Skills→
abereghiciabereghici

router-plugin

Generate routes and automatic code splitting for TanStack Router projects.

Community
Advanced
abereghiciabereghici

router-core/code-splitting

Configure TanStack Router route code splitting with bundler plugins.

Community
Advanced
brendadeeznuts1111brendadeeznuts1111

TanStack Router

Configure type-safe file-based routing for React applications with TanStack Router.

Community
Intermediate
lespacemanlespaceman
4

router-core/code-splitting

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

Community
Advanced