skill

tanstack-query-expert — Claude Code skill: setup and install

Q: How do I install tanstack-query-expert in Claude Code?

Run `npx claude-code-templates@latest --skill web-development/tanstack-query-expert`.

This skill guides TanStack Query work in React and Next.js, from query design and cache handling to mutations and server-side hydration. Use it when building or revising data-fetching flows.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill web-development/tanstack-query-expert

Open on GitHub

What tanstack-query-expert does

The skill covers putting queries in custom hooks, choosing cache keys, and configuring data freshness and retry behavior. It also addresses server mutations, cache invalidation, and optimistic changes that can be rolled back when a request fails.

For the Next.js App Router, it shows server-fetched data passed to a client component through hydration. Its examples use TanStack Query APIs and TypeScript. After a mutation, the related cache needs updating or invalidation; otherwise the interface can retain old data.

Install it from the templates package with npx.

What it helps with

organize data fetching in custom hooks
choose cache keys for queries
refresh cached data after a mutation
apply an optimistic change and undo it on failure
hydrate server-fetched data in an App Router client component

Example prompts for the agent

Set up a TanStack Query hook for loading a user profile.
Show how to refresh the posts cache after creating a post.
Prepare App Router code that hydrates a client component with server-fetched data.

How to install tanstack-query-expert

1claude-code-templates

npx claude-code-templates@latest --skill web-development/tanstack-query-expert

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill tanstack-query-expert -a claude-code

3Manually: put the files in place

~/.claude/skills/tanstack-query-expert/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/tanstack-query-expert/

Manually: put the files in place

.agents/skills/tanstack-query-expert/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/tanstack-query-expert/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates tanstack-query-expert

2Manually: put the files in place

.github/skills/tanstack-query-expert/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/tanstack-query-expert

Manually: put the files in place

.devin/skills/tanstack-query-expert/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about tanstack-query-expert

How do I install tanstack-query-expert in Claude Code?

Run npx claude-code-templates@latest --skill web-development/tanstack-query-expert.

What does tanstack-query-expert do?

It guides TanStack Query patterns for React and Next.js, including queries, cache handling, mutations, and App Router hydration.

How does the skill handle optimistic updates?

It describes changing cached data before the server responds, keeping the previous value, and restoring it if the mutation fails.

Similar skills

All skills for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →

graph-query This skill queries a project’s code graph to trace component links and assess the reach of a change. Use it before editing a function or model. 202installs security-threat-model This skill builds a repository-specific AppSec threat model, ranks abuse paths, and writes a concise Markdown report for a codebase or selected path. 201installs blueprint-mode-codex A subagent that picks one of four workflows for a task and verifies every step against the project files instead of guessing. 201installs prompt-engineering-instructor Shows your agent how to pull typed data out of model responses with Instructor and Pydantic, retries included. 198installs voice-agents Walks you through picking a voice agent architecture, budgeting latency and handling interruptions without awkward pauses. 194installs production-code-audit This skill scans a codebase, finds architecture, security, performance, and quality issues, then applies fixes. Use it when preparing a project for production. 193installs monte-carlo-simulator A slash command that runs Monte Carlo simulations: probability distributions, confidence intervals and risk metrics. 193installs tdd-gate The hook blocks edits to production files until a matching test exists. Useful if you want the agent to keep the TDD order. 192installs