---
name: "tanstack-router-type-safe-routes"
description: "Achieve compile-time route validation, search params schemas, and loader data caching."
metadata:
  author: "TanStack"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup tanstack router"
  - "type safe search params tanstack router"
  - "loader prefetch tanstack router"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# TanStack Router 100% Type-Safe Fullstack Routing

Configures TanStack Router: defining routes with createRoute, validating URL search parameters with Zod (.validateSearch), loader data prefetching, nested layout boundaries, and auto-generated route trees.

## When to Invoke
Invoke this skill whenever you need to:
- setup tanstack router
- type safe search params tanstack router
- loader prefetch tanstack router

## Execution SOP & Rules
1. Define route: const postRoute = createRoute({ getParentRoute: () => rootRoute, path: '/posts/$postId' }).
2. Add search validation: validateSearch: zodSchema to parse and type URL search parameters automatically.
3. Add loader: loader: ({ params }) => fetchPost(params.postId) with automatic data type inference.
4. Generate route tree automatically using TanStack Router CLI / Vite plugin.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.