tanstack

Standardize TanStack Query, Form, and Router patterns in React applications.

Updated May 15, 2026
One-click install
npx skills add https://github.com/JBonfim/skill-developer --skill tanstack-jbonfim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack
Source: https://github.com/JBonfim/skill-developer/tree/main/.agents/skills/tanstack
Command: npx skills add https://github.com/JBonfim/skill-developer --skill tanstack-jbonfim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents common TanStack ecosystem mistakes by giving reliable, reusable React patterns for Query/DB collections, Form handling, and Router navigation.

Core Features & Use Cases

  • TanStack Query/DB Patterns: Guides correct collection usage, live queries, and optimistic/persistent mutation flows.
  • TanStack Form Setup: Provides schema-first validation and type-safe form construction using createFormHook.
  • TanStack Router Best Practices: Covers type-safe file-based routing, validated search params, loaders, auth layouts, and typed navigation.
  • Anti-pattern Guardrails: Enforces critical rules like “do not mix collection and React Query invalidation patterns” and “share collection instances.”

Quick Start

Use the tanstack skill when adapting a React project to TanStack Query/DB, TanStack Form, and TanStack Router by requesting a full, rule-compliant implementation plan for an entity page that lists items, edits an item with a form, and navigates to a detail view with validated URL parameters.

Frequently Asked Questions about tanstack

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

FAQPage Schema
How do I set up type-safe file-based routing with TanStack Router?▼

Type-safe file-based routing with TanStack Router requires defining routes aligned to your file structure using createFileRoute, enabling runtime-validated search params and typed navigation for secure URL parameter handling.

How do I implement schema-first form validation in React?▼

Schema-first form validation in React is implemented by initializing TanStack Form with the createFormHook and applying Zod validation schemas to ensure type-safe data construction and field validation.

What is the correct way to handle server writes with TanStack DB live queries?▼

Handling server writes with TanStack DB live queries requires using correct handler-based collection processes for mutation persistence, avoiding mixing collection patterns directly with React Query invalidation logic.

Can I mix React Query invalidation patterns with TanStack DB collections?▼

Mixing React Query invalidation patterns with TanStack DB collections is an anti-pattern. You must use shared canonical collection instances and rely on handler-based mutations to manage data persistence and live query updates.

Does TanStack Router support runtime-validated URL parameters for React applications?▼

Yes, TanStack Router supports runtime-validated URL parameters by applying schema validation to route definitions, ensuring that search parameters and navigation payloads are type-safe and structurally validated before rendering.