virtual-file-routes

Construct programmatic route trees for TanStack Router with virtual and physical routes.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill virtual-file-routes-guillempuche
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: virtual-file-routes
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/virtual-file-routes/skills/virtual-file-routes
Command: npx skills add https://github.com/guillempuche/engranatge --skill virtual-file-routes-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Filesystem‑based routing forces developers to mirror URL structures with folder hierarchies, limiting flexibility and making mixed virtual/physical routes hard to maintain.

Core Features & Use Cases

  • Programmatic route builders: Functions like rootRoute, index, route, and layout let you define routes in code.
  • Hybrid routing: physical lets you mount traditional file‑based routes alongside virtual ones.
  • Virtual subtree config: defineVirtualSubtreeConfig provides type‑safe configuration for sub‑trees inside file‑based directories.
  • Typical use case: Build an admin dashboard with dynamic sections, custom layouts, and a mix of virtual and physical routes without reshaping your file system.

Quick Start

Use the virtual-file-routes skill to create a root route, an index page, and a dashboard layout with nested routes for my application.

Frequently Asked Questions about virtual-file-routes

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

FAQPage Schema
How do I define dynamic route trees in TanStack Router without using filesystem-based routing?

You can programmatically construct route trees in TanStack Router using functions like rootRoute, index, route, and layout to replace filesystem constraints. This allows you to define routes entirely in code, enabling dynamic sub-trees and custom layout wrappers.

Can I mix virtual and physical file-based routes in the same web application?

Yes, hybrid routing is supported by mounting traditional physical file-based routes alongside virtual ones. The physical function lets you mount file-based routes, while defineVirtualSubtreeConfig provides type-safe configuration for sub-trees inside file-based directories.

What is the best way to build an admin dashboard with dynamic sections and custom layouts using TanStack Router?

The best way to build an admin dashboard with dynamic sections is using programmatic route builders. Functions like layout and route let you define custom layout wrappers and nested routes in code without reshaping your file system.

Does TanStack Router support defining type-safe configurations for virtual sub-trees inside existing file-based directories?

Yes, TanStack Router supports type-safe configurations for virtual sub-trees through defineVirtualSubtreeConfig. This provides type safety when defining dynamic sub-trees that exist inside your traditional file-based directories.

Why should I replace filesystem-based routing with programmatic route construction?

Filesystem-based routing forces you to mirror URL structures with folder hierarchies, limiting flexibility. Programmatic route construction removes these file constraints, making mixed virtual and physical routes significantly easier to maintain.