skills.rest
alexturpin
alexturpinCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/alexturpin/cf-app-starter --skill tanstack-start-routes
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bartolomeomuellerbartolomeomueller

tanstack-start

Automate bootstrapping full-stack React apps with TanStack Start SSR and streaming.

Community
Advanced
LAF-USLAF-US

building-mcp-server-on-cloudflare

Create and secure an MCP server on Cloudflare Workers with OAuth.

Official
Advanced
Camilo8902Camilo8902

tanstack-query-setup

Implement TanStack Query for server state management in React applications.

Community
Intermediate
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate