How do I install the Tanstack DB skill?

Run npx skillmds@latest add fellipeutaka/tanstack-db in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tanstack DB safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tanstack DB?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tanstack DB free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tanstack DB?

fellipeutaka (@fellipeutaka) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tanstack DB by fellipeutaka — Agent Skill

Name: Tanstack DB
Author: fellipeutaka

Tanstack DB

Comprehensive React-focused guide for TanStack DB and community integrations (Dexie.js, PGLite). Use when writing or debugging code that uses @tanstack/react-db for live queries, optimistic mutations, or local-first synchronization.

fellipeutaka 2a0b564 7 files · 11.6 KB Updated Sep 17, 2026

File contents

TanStack DB (React)

Quick Start

TanStack DB is a local-first database and reactivity layer. For React applications, it provides useLiveQuery and optimistic mutations with sub-millisecond updates powered by d2ts.

Core Guidelines

Schemas Validate Client State: Schemas are StandardSchema-compatible (Zod, Valibot, etc.). They validate client mutations, not server data. TInput must be a superset of TOutput for updates to work correctly.
Dependency Arrays: All query hooks require dependency arrays as the last argument, identical to useEffect. Include all external values. Omit to run on every render, or use [] for static queries.
Conditional Queries: To disable a query, return undefined or null from the callback.
Router Preloading: Preload data in your route loader (await collection.preload()), then consume it with useLiveQuery in the component.

Advanced Topics

For deep dives into specific areas, consult the following references:

Collections & Schemas: See references/core-concepts.md for collection types, sync modes (eager, on-demand, progressive), and schema constraints.
Queries & Hooks: See references/live-queries.md for the fluent SQL-like API, expression functions, useLiveSuspenseQuery, and query composition patterns.
Mutations & Transactions: See references/mutations.md for optimistic updates, mutation merging, temporary ID handling, and direct QueryCollection writes.
Error Handling: See references/error-handling.md for specific error types (e.g., DuplicateKeyError, SchemaValidationError) and transaction states.
Community Integrations: See references/community-integrations.md for Dexie.js (IndexedDB) and PGLite (WASM PostgreSQL + Drizzle ORM) adapters.

---name: tanstack-dbdescription: Comprehensive React-focused guide for TanStack DB and community integrations (Dexie.js, PGLite). Use when writing or debugging code that uses @tanstack/react-db for live queries, optimistic mutations, or local-first synchronization.---# TanStack DB (React)## Quick StartTanStack DB is a local-first database and reactivity layer. For React applications, it provides `useLiveQuery` and optimistic mutations with sub-millisecond updates powered by `d2ts`.## Core Guidelines1. **Schemas Validate Client State**: Schemas are StandardSchema-compatible (Zod, Valibot, etc.). They validate client mutations, not server data. `TInput` must be a superset of `TOutput` for updates to work correctly.2. **Dependency Arrays**: All query hooks require dependency arrays as the last argument, identical to `useEffect`. Include all external values. Omit to run on every render, or use `[]` for static queries.3. **Conditional Queries**: To disable a query, return `undefined` or `null` from the callback.4. **Router Preloading**: Preload data in your route loader (`await collection.preload()`), then consume it with `useLiveQuery` in the component.## Advanced TopicsFor deep dives into specific areas, consult the following references:- **Collections & Schemas**: See [references/core-concepts.md](references/core-concepts.md) for collection types, sync modes (eager, on-demand, progressive), and schema constraints.- **Queries & Hooks**: See [references/live-queries.md](references/live-queries.md) for the fluent SQL-like API, expression functions, `useLiveSuspenseQuery`, and query composition patterns.- **Mutations & Transactions**: See [references/mutations.md](references/mutations.md) for optimistic updates, mutation merging, temporary ID handling, and direct `QueryCollection` writes.- **Error Handling**: See [references/error-handling.md](references/error-handling.md) for specific error types (e.g., `DuplicateKeyError`, `SchemaValidationError`) and transaction states.- **Community Integrations**: See [references/community-integrations.md](references/community-integrations.md) for Dexie.js (IndexedDB) and PGLite (WASM PostgreSQL + Drizzle ORM) adapters.

Frequently asked questions