tanstack

Name: tanstack
Availability: InStock
Author: Compozy

Provides TanStack patterns for data fetching, form validation, and routing in React applications.

2.5k|134|Updated Mar 28, 2026

Search Tags:#react #routing #tanstack #patterns #best-practices #data-fetching #form-management

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack patterns and best practices for TanStack's React ecosystem, consolidating guidance for data fetching, form management, and routing to accelerate consistent, scalable development.

Core Features & Use Cases

Patterns for TanStack Query/DB including live queries and optimistic updates to keep UIs responsive.
TanStack Form patterns with type-safe forms, validation via Zod, and accessible error handling.
TanStack Router patterns for type-safe, file-based routing, navigation, and route organization.

Quick Start

Review the references in the references/ directory to start applying TanStack patterns in your React project.

Frequently Asked Questions about tanstack

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

FAQPage Schema

What are the best practices for TanStack Query data fetching in React?▼

TanStack Query best practices for React involve using live queries and optimistic updates to keep UIs responsive, while avoiding mixing React Query patterns directly with collections and ensuring collection instances are shared properly.

How do I manage form validation with TanStack Form in React?▼

TanStack Form management in React uses type-safe forms with validation handled via Zod, enabling accessible error handling and robust form state management for scalable application development.

How does file-based routing work with TanStack Router?▼

TanStack Router uses type-safe, file-based routing patterns for navigation and route organization, ensuring robust React app architecture through structured and validated route definitions.

Can I use Zod for validation across TanStack Form and Router?▼

Yes, Zod is used for validation within TanStack Form patterns to ensure type safety, and it aligns with the type-safe routing patterns enforced by TanStack Router for consistent React application development.

Why should I not mix React Query patterns with collections?▼

Mixing React Query patterns with collections is discouraged to maintain consistent state management; instead, you should share collection instances directly to keep React UIs responsive and scalable.

When do I need TanStack patterns for robust React apps?▼

You need TanStack patterns when building React applications that require comprehensive data fetching, form management, and routing, consolidating guidance to accelerate consistent and scalable development.