·tanstack-router
{}

tanstack-router

Type-safe, file-based React routing with route loaders, search params validation, code splitting, preloading, navigation, route context, and TanStack Query integration. Use when setting up file-based routing, adding search params validation, implementing route loaders, code splitting routes, configuring virtual file routes, protecting routes with auth guards, or fixing type registration errors. Use for router setup, navigation patterns, URL state management, data loading.

27Installs·2Trend·@oakoss

Installation

$npx skills add https://github.com/oakoss/agent-skills --skill tanstack-router

How to Install tanstack-router

Quickly install tanstack-router AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/oakoss/agent-skills --skill tanstack-router
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: oakoss/agent-skills.

SKILL.md

View raw

Type-safe, file-based routing for React with route-level data loading, search params validation, code splitting, and TanStack Query integration.

| createFileRoute('/path') | Define file-based route | | createRootRouteWithContext () | Root route with typed context | | createLazyFileRoute('/path') | Code-split route component | | zodValidator(schema) | Search params validation | | Route.useLoaderData() | Access loader data in component | | Route.useParams() | Type-safe route params |

| Route.useSearch() | Type-safe search params | | useNavigate() | Programmatic navigation | | useBlocker() | Block navigation (dirty forms) | | notFound() | Throw 404 from loader | | getRouteApi('/path') | Type-safe hooks in split files | | stripSearchParams(defaults) | Clean default values from URLs |

Type-safe, file-based React routing with route loaders, search params validation, code splitting, preloading, navigation, route context, and TanStack Query integration. Use when setting up file-based routing, adding search params validation, implementing route loaders, code splitting routes, configuring virtual file routes, protecting routes with auth guards, or fixing type registration errors. Use for router setup, navigation patterns, URL state management, data loading. Source: oakoss/agent-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/oakoss/agent-skills --skill tanstack-router
Category
{}Data Analysis
Verified
First Seen
2026-02-22
Updated
2026-03-10

Browse more skills from oakoss/agent-skills

Quick answers

What is tanstack-router?

Type-safe, file-based React routing with route loaders, search params validation, code splitting, preloading, navigation, route context, and TanStack Query integration. Use when setting up file-based routing, adding search params validation, implementing route loaders, code splitting routes, configuring virtual file routes, protecting routes with auth guards, or fixing type registration errors. Use for router setup, navigation patterns, URL state management, data loading. Source: oakoss/agent-skills.

How do I install tanstack-router?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/oakoss/agent-skills --skill tanstack-router Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/oakoss/agent-skills