skills/mine/tanstack/SKILL.md
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.
npx skillsauth add pedronauck/skills tanstackInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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.
| 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.
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.
development
Deep review of branch diffs, working trees, or GitHub PRs at any size. Use when the user asks for CodeRabbit-grade review, an incremental re-review after new pushes, publication of findings to a PR, a cross-LLM peer-review verdict round, or conformance review against spec artifacts. Don't use for applying fixes, reviewing specs or PRDs as documents, or quick single-file feedback.
tools
Orchestrate Claude and Codex worker TUIs from a controller agent through herdr panes and the herdr socket CLI. Use when delegating bounded tasks to herdr worker panes, running user-activated plan-first delegations (Claude Code plan mode, Codex Plan mode), waiting on native agent status (idle, working, blocked, done), or verifying worker reports. Workers launch as interactive TUIs via herdr agent start — never through headless runners (compozy exec, claude -p, codex exec). Not for cmux workspaces (see cmux-orchestration) and not for end-user herdr control.
development
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
testing
Plans real-user QA as living repo docs — the durable <qa-docs-path> tree (default docs/qa/) that every QA cycle appends to. Use when bootstrapping or updating a project's QA docs, planning a cycle before execution (map journeys as flows, derive scenarios, plan persona-driven session charters), or registering bugs into the durable bug registry. Do not use for live session execution, browser evidence, or fix loops — use qa-execution for those.