TanStack Query Skill
Skill Verified ActiveTanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React applications.
To guide developers in effectively leveraging TanStack Query for robust and efficient server-state management in React applications, reducing boilerplate and improving performance.
Features
- Detailed explanation of TanStack Query's core concepts and hooks
- Comprehensive examples for queries, mutations, and pagination
- Guidance on optimistic updates, SSR, and integration patterns
- Best practices for cache management, error handling, and performance optimization
- TypeScript patterns and testing strategies for TanStack Query
Use Cases
- Managing complex server-state in React applications
- Implementing efficient data fetching with caching and background refetching
- Building real-time dashboards and paginated lists
- Handling form submissions with optimistic UI updates
Non-Goals
- Managing client-side state (e.g., UI theme, form inputs)
- Replacing form management libraries like React Hook Form
- Providing a wrapper for simple one-time fetches without caching needs
Practices
- Server-state management
- Data fetching patterns
- Caching strategies
- Error handling
- Performance optimization
Prerequisites
- React development environment
- Node.js and npm/yarn for project setup
Installation
npx skills add bobmatnyc/claude-mpm-skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedSimilar Extensions
Next Cache Components
100Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
React State Management
99Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Sentry Tanstack Start Sdk
100Full Sentry SDK setup for TanStack Start React. Use when asked to "add Sentry to TanStack Start", "install @sentry/tanstackstart-react", or configure error monitoring, tracing, session replay, logs, or user feedback in a TanStack Start React app.