tanstack

$npx mdskill add compozy/agh/tanstack

Provides TanStack Query, Router, and Form patterns for React.

  • Defines query keys, mutations, caching, and data fetching patterns.
  • Depends on TanStack Query, Router, and Form libraries.
  • Selects patterns based on task type and reads relevant reference files.
  • Outputs code snippets and configuration following TanStack best practices.

SKILL.md

.github/skills/tanstackView on GitHub ↗
---
name: tanstack
description: TanStack Query, Router, and Form patterns for React. Use when writing useQuery/queryOptions, mutations, caching, file-based routes, search params, loaders, or TanStack Form validation. Don't use for TanStack Start, TanStack DB/collections, Zustand client state, or non-TanStack routing.
---

# TanStack

Match the task to one or more Branches rows and read every listed file **in full** before producing output — those references are the contract; the tripwires below are only a final self-check.

## Branches

| When you are… | Read in full |
| --- | --- |
| Defining or changing query keys / factories | `references/query-keys.md` |
| Setting staleTime, gcTime, invalidation, placeholder/initial data | `references/query-caching.md` |
| Writing mutations, optimistic updates, or mutation state | `references/query-mutations.md` |
| Prefetching, parallel queries, infinite queries, or cancellation | `references/query-fetch-patterns.md` |
| SSR dehydrate/hydrate, offline networkMode, or query persistence | `references/query-ssr-offline.md` |
| Query error boundaries or select/performance | `references/query-errors-performance.md` |
| Registering the router, `from` typing, virtual routes, or router defaults | `references/router-type-and-org.md` |
| Route loaders, ensureQueryData, or parallel route loading | `references/router-data-loading.md` |
| Search params, Link/navigate, route masks, or preload | `references/router-search-nav.md` |
| Lazy routes, not-found, route context, or auth beforeLoad | `references/router-split-errors-context.md` |
| TanStack Form hooks, Zod validators, or field components | `references/form.md` |

*Done when:* every matched reference was read, the change follows its patterns, and no tripwire is violated.

## Tripwires

**Query** — array keys that include every dependency; invalidate (or optimistically update with rollback) after mutations; never put non-serializable values in keys.

**Router** — register the router type; validate search with defaults (`.catch()`); use `ensureQueryData` in loaders when pairing with Query; `throw redirect(...)` not `return`.

**Form** — complete `defaultValues` for inference; Zod at form/field level; debounce async validators (≥500ms); `role="alert"` on field errors; `preventDefault` on submit.

More from compozy/agh

SkillDescription
agent-exploration>-
aghAGH runtime and contribution guide. Use for sessions, agents, native tools, skills, memory, network, tasks, capabilities, bundles, QA, docs, and repo work. Do not use for unrelated projects.
agh-cleanup-failure-paths>-
agh-code-guidelines>-
agh-contract-codegen-coshipContract co-ship for AGH wire changes. Use when editing public DTOs, OpenAPI, JSON-RPC extension shapes, generated clients, or handler request/response semantics. Do not use for internal Go refactors or test-only changes that leave the wire contract unchanged.
agh-data-boundariesData-boundary audit for AGH route loaders, TanStack Query caches, paginated catalogs, filters, ordering, totals, live streams, workspace-scoped reads, and their backend APIs. Use when adding, changing, or debugging those paths. Don't use for presentational-only UI or backend work with no public read-model impact.
agh-designAGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.
agh-qa-bootstrapBootstraps isolated AGH QA labs and emits the canonical manifest for downstream QA. Use when local QA needs daemon, workspace, provider, or playbook setup. Do not use for unit tests, planning-only work, or browser-only checks.
agh-schema-migrationAuthors append-only Goose SQL migrations for AGH SQLite streams and keeps declarative schema sources, atlas.sum, Atlas checks, sqlc output, and migration tests synchronized. Use for SQLite table, column, index, constraint, trigger, or seed-data changes under internal/store or internal/memory. Do not use for in-memory structures, derived Markdown memory, or non-SQLite caches.
agh-test-conventions>-