tanstack

Standardize TanStack React workflows for collections, forms, and routing.

Updated May 28, 2026
One-click install
npx skills add https://github.com/haryelramalho/skills --skill tanstack-haryelramalho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack
Source: https://github.com/haryelramalho/skills/tree/main/skills/community/tanstack
Command: npx skills add https://github.com/haryelramalho/skills --skill tanstack-haryelramalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes guesswork when building React features with the TanStack ecosystem by giving you reliable patterns for data fetching, form state, and client-side routing.

Core Features & Use Cases

  • TanStack Query and TanStack DB: Handle collections, live queries, optimistic updates, and persistence handlers correctly.
  • TanStack Form: Build type-safe forms with validation, field components, and accessible error handling.
  • TanStack Router: Create file-based routes, validate search parameters, manage loaders, and implement typed navigation.
  • Use Case: Use this Skill when you need to wire together a data-driven dashboard, a validated form workflow, or a routed React application with auth, search params, and route-level error handling.

Quick Start

Ask for the appropriate TanStack pattern for your React feature and follow the matching guidance in the reference files.

Frequently Asked Questions about tanstack

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

FAQPage Schema
How do I manage live queries and optimistic updates in React with TanStack Query?

Manage live queries and optimistic updates in TanStack Query by instantiating shared collections, wiring persistence handlers, and applying standardized update patterns to ensure data consistency in React applications.

What's the best way to build type-safe React forms with Zod validation?

Build type-safe React forms using TanStack Form with Zod validation by structuring field components and implementing accessible error handling to standardize schema-driven form workflows.

How do I implement typed file-based routing and validate search parameters in React?

Implement typed file-based routing in React using TanStack Router to validate search parameters, manage loaders, and establish route-context-aware navigation patterns for auth-gated layouts.

Can I use TanStack Router for auth-gated layouts and route-level error handling?

Use TanStack Router for auth-gated layouts and route-level error handling by leveraging typed navigation, route context, and file-based route configuration to secure React application workflows.

Do I need shared collection instances to handle data fetching with TanStack DB?

Handling data fetching with TanStack DB requires shared collection instances and persistence handlers to correctly process live queries and optimistic updates across your React application.

Why does my TanStack Form validation workflow lack type safety in React?

TanStack Form workflows lose type safety when Zod schema validation is missing, requiring structured field components and accessible error handling to enforce standardized validation patterns.