tanstack

Provide TanStack patterns for data fetching, forms, and routing in React.

567|82|Updated Mar 15, 2026

Search Tags:#typescript #state management #react #routing #data fetching #tanstack #forms

Ready to run

npx skills add https://github.com/pedronauck/skills --skill tanstack-pedronauck

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack
Source: https://github.com/pedronauck/skills/tree/main/skills/tanstack
Command: npx skills add https://github.com/pedronauck/skills --skill tanstack-pedronauck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to the TanStack ecosystem, enabling developers to efficiently manage data fetching, form handling, and client-side routing in React applications.

Core Features & Use Cases

TanStack Query/DB: Robust data fetching, caching, collections, live queries, and optimistic updates.
TanStack Form: Headless form logic with type-safe validation and flexible UI integration.
TanStack Router: Type-safe file-based routing, navigation, and search param management.
Use Case: When building a complex dashboard with real-time data, dynamic forms, and intricate navigation, this Skill provides the patterns to implement these features reliably and efficiently.

Quick Start

Consult the references/query-patterns.md file for detailed examples on TanStack Query and TanStack DB patterns.

Frequently Asked Questions about tanstack

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

FAQPage Schema

How do I manage data fetching and optimistic updates in React applications?▼

Data fetching and optimistic updates in React applications are handled using TanStack Query patterns for robust caching, collections, and live queries. This approach ensures reliable state management and real-time synchronization for complex data scenarios.

What's the best way to implement type-safe client-side routing with search params in React?▼

Type-safe client-side routing with search params in React is best implemented using TanStack Router patterns. It provides file-based routing, type-safe navigation, and URL parameter management to ensure intricate navigation structures are reliable.

How do I build headless forms with type-safe validation in a React app?▼

Headless forms with type-safe validation in a React app are built using TanStack Form patterns. This approach provides flexible UI integration and robust validation logic without locking you into a specific component structure.

Can I use TanStack Query collections and live queries for real-time dashboard data in React?▼

TanStack Query collections and live queries can be used for real-time dashboard data in React. The patterns support dynamic data synchronization, allowing complex dashboards to reliably display real-time information and handle updates efficiently.

Does TanStack Router support file-based routing and dynamic URL parameter management?▼

TanStack Router supports file-based routing and dynamic URL parameter management. It enables type-safe navigation and search param handling, ensuring complex routing structures are maintained with strict TypeScript validation.

When should I use TanStack Form instead of other headless form logic libraries for React?▼

You should use TanStack Form when you need headless form logic paired with type-safe validation and flexible UI integration. It is ideal for complex dashboards requiring dynamic forms with reliable state management and intricate validation rules.