# tanstack

Get focused guidance for React changes involving TanStack Query, Router, or Form. Useful when you need the relevant implementation notes without loading every reference.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 360 installs · ★ 643
- Author: pedronauck
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/pedronauck/skills/tree/HEAD/skills/mine/tanstack/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/tanstack

## What it does

The skill directs the agent to reference files based on the change: query keys and caching, route data loading, or form validation. It brings in neighboring material when a change crosses those boundaries. Its scope is TanStack Query, Router, and Form; TanStack Start, DB, and unrelated state or routing libraries are outside it.

The references cover Query mutations, SSR, and errors, as well as Router typing, loaders, and navigation. Form guidance includes hooks, Zod validation, and field components. Query keys need every dependency and must remain serializable, so a non-serializable value rules out that key design. The guidance also calls for rolling back optimistic cache writes and using `throw redirect(...)` in Router.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tanstack -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/tanstack/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tanstack/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tanstack -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/tanstack/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tanstack -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/tanstack/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pedronauck/skills tanstack
```

2. **Manually: put the files in place**
- File: `.github/skills/tanstack/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tanstack -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pedronauck/skills --path skills/mine/tanstack
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/tanstack/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tanstack -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pedronauck/skills/tree/HEAD/skills/mine/tanstack/SKILL.md

## When to use it
- Find the relevant Query guidance for a code change
- Set up query keys and cache behavior
- Load data from a Router route
- Add Zod validation to a form

## Example prompts
- Review the Query keys and caching in this change.
- Add data loading for this route with TanStack Router.
- Set up Zod validation for these form fields.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [pedronauck/skills](https://affpapa.org/en/nevibecode/by/pedronauck/skills.md) — 18 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md