Tanstack Stack Authority

TanStack & React 19 Skill

Use this skill to ensure all code adheres to the "TanStack-First" architecture and React 19 patterns.

When to Use This Skill

• When initializing a new project or module.
• When implementing data fetching, routing, or state management.
• When performing code reviews to ensure compliance with the defined tech stack.

Core Architecture & Guidelines

🛠 Languages & Tooling

• TypeScript 5.9: Always use Strict Mode. Utilize satisfies, const type parameters, and Explicit Resource Management (using keyword).
• Vite: Use for build tooling, HMR optimization, and Vitest integration.

⚛️ Frontend Framework (React 19.2)

• Patterns: Prioritize Server Components (RSC), Actions, the use hook, and Transitions.
• Directives: Explicitly label files with 'use client' or 'use server' where applicable.

🛣️ Routing & Forms (TanStack)

• Framework: TanStack Start (Full-stack SSR/Streaming).
• Routing: Use TanStack Router with type-safe routing and Zod for search param validation.
• Forms: Use TanStack Form with Zod/Valibot integration.

💾 Data Management

• Server State: TanStack Query (Optimistic updates, prefetching).
• Global State: TanStack Store (Fine-grained reactivity).
• Local Persistence: TanStack DB (Relational IndexedDB wrapper).

🧪 Quality Assurance

• Testing: Use Vitest for unit testing and Playwright for E2E flows. (Note: Avoid Jest unless specifically required for legacy isolation).
• Components: Use Shadcn UI components.
• Icons: Use Lucide Icons.
• Typography: Standardize on Roboto.

🔌 Inversion of Control (IoC)

• Service Locator: Use EzServiceRegistry (Shared Registry) to decouple business logic from UI components.
• Dependency Injection: Pass the registry via props (e.g., EzLayout) or use context to access services instead of hardcoding instances.
• Service Contracts: Define services using the IService interface to ensure a consistent lifecycle (registration, cleanup).

Implementation Strategy Table

Converted and distributed by TomeVault — claim your Tome and manage your conversions.