tanstack — Claude Code skill: features and installation
Get focused guidance for React changes involving TanStack Query, Router, or Form. Useful when you need the relevant implementation notes without loading every reference.
npx skills add pedronauck/skills --skill tanstack -a claude-codeWhat tanstack 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.
What it helps with
- 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 for the agent
- 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.
How to install tanstack
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tanstack -a claude-code2Manually: put the files in place
~/.claude/skills/tanstack/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/tanstack/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tanstack -a codex2Manually: put the files in place
.agents/skills/tanstack/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tanstack -a cursor2Manually: put the files in place
.cursor/skills/tanstack/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills tanstack2Manually: put the files in place
.github/skills/tanstack/SKILL.md1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tanstack -a gemini-cli2Platform CLI
gemini skills install https://github.com/pedronauck/skills --path skills/mine/tanstackManually: put the files in place
.devin/skills/tanstack/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tanstack -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about tanstack
How do I install tanstack in Claude Code?
Run npx skills add pedronauck/skills --skill tanstack -a claude-code. The skill file is at ~/.claude/skills/tanstack/SKILL.md.
What does tanstack do?
It guides React work with TanStack Query, Router, and Form, pointing the agent to reference material for the behavior being changed.
Which TanStack libraries does the skill cover?
It covers TanStack Query, Router, and Form. TanStack Start, DB, and unrelated state or routing libraries are out of scope.
