tanstack-start-routes

Provides TanStack Router patterns for routes, loaders, TanStack Query integration, and server functions for React apps.

Updated Nov 19, 2025

Search Tags:#web development #react #server functions #routing #data loading #tanstack router

Ready to run

npx skills add https://github.com/alexturpin/cf-app-starter --skill tanstack-start-routes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-start-routes
Source: https://github.com/alexturpin/cf-app-starter/tree/main/.opencode/skills/tanstack-start-routes
Command: npx skills add https://github.com/alexturpin/cf-app-starter --skill tanstack-start-routes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and examples for implementing routing, data loading, and server functions within a TanStack Router application, streamlining web development.

Core Features & Use Cases

Route Definition: Demonstrates creating simple, lazy-loaded, and authenticated routes.
Data Handling: Illustrates using loaders for synchronous and asynchronous data fetching, including integration with TanStack Query.
Server Functions & Routes: Shows how to define server-side logic for data manipulation and API endpoints.
Use Case: Quickly set up complex routing structures, manage data fetching efficiently, and build robust server-side APIs for your React application.

Quick Start

Refer to the examples in this skill to implement a new route in your application.

Frequently Asked Questions about tanstack-start-routes

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

FAQPage Schema

How do I set up authenticated and lazy-loaded routes in TanStack Router?▼

Route definition patterns in TanStack Router enable you to create simple, lazy-loaded, and authenticated routes, ensuring structured client-side navigation and secure access control within your React application.

How do I use loaders with TanStack Query for data fetching in React?▼

You can use loaders for synchronous and asynchronous data fetching in TanStack Router, including direct integration with TanStack Query to manage efficient data fetching and state synchronization before rendering routes.

How do I create server functions for API endpoints in a TanStack Router application?▼

Server functions in TanStack Router allow you to define server-side logic for data manipulation and API endpoints, facilitating robust server-side API development and efficient data management within the TanStack ecosystem.

Does TanStack Router support structured client-side and server-side routing simultaneously?▼

TanStack Router supports structured client-side and server-side routing simultaneously by providing patterns for route creation alongside server functions, addressing the need for unified routing and API endpoints in React applications.

What is the best way to manage data loading and API development in a React application using TanStack?▼

Using route loaders integrated with TanStack Query for data fetching, combined with server functions for API endpoints, streamlines web development and efficiently manages data loading within the TanStack ecosystem.