skills.rest
rezics
rezicsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

router-plugin

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

6|1|Updated Jun 1, 2025
Search Tags:#plugin#webpack#vite#bundler#code-splitting#tanstack-router#route-generation
One-click install
npx skills add https://github.com/rezics/rezics --skill router-plugin-rezics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-plugin
Source: https://github.com/rezics/rezics/tree/main/.agents/skills/tanstack/router/router-plugin
Command: npx skills add https://github.com/rezics/rezics --skill router-plugin-rezics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router bundler plugin automates route generation and automatic code splitting, reducing manual setup and ensuring scalable routing with multiple bundlers.

Core Features & Use Cases

  • File-based routing: generate route trees from a folder structure and keep them in sync with source files.
  • Code splitting: enable automatic lazy-loading of routes across Vite, Webpack, Rspack, and esbuild.
  • Multi-framework support: work with React, Solid, or Vue targets and ensure correct plugin order for reliable builds.
  • Use Case: rapidly scaffold a new TanStack Router app with minimal boilerplate while maintaining optimal code-splitting.

Quick Start

Install and configure the tanstack router plugin in your project 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 automate TanStack Router route generation from file-based routes?▼

You can generate route trees from a folder structure and keep them in sync with source files using a bundler plugin. This automates route generation for TanStack Router and enables automatic code splitting for lazy-loading.

Does TanStack Router code splitting work with Webpack and Vite?▼

TanStack Router code splitting works with Vite, Webpack, Rspack, and esbuild. The plugin enables automatic lazy-loading of routes across these bundlers to ensure scalable routing and optimal bundle sizes.

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

TanStack Router file-based routing supports React, Solid, and Vue targets. You must specify your target framework in the plugin configuration to ensure correct plugin order and reliable builds across these frameworks.

How do I configure automatic code splitting for TanStack Router?▼

Configuring automatic code splitting requires setting options like autoCodeSplitting, routesDirectory, and generatedRouteTree in your plugin configuration. You also need YAML frontmatter with name and description in SKILL.md to define the setup.

Why does my TanStack Router plugin build fail with multiple bundlers?▼

TanStack Router plugin builds can fail if the correct plugin order is not maintained across different bundlers. Ensuring proper plugin ordering for your specific target framework and bundler ensures reliable builds and route generation.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

rspack

Configure Rspack bundler with plugins, loaders, and Webpack migration guidance.

Official
Intermediate
jezwebjezweb
961

TanStack Router

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

Community
Intermediate
danghungtb26danghungtb26
3

tanstack-router-guide

Implement type-safe, file-based routing for TanStack Router in React applications.

Community
Advanced
quantruong158quantruong158

angular-routing

Configure Angular v20+ routing with lazy loading, guards, and resolvers.

Community
Intermediate