TanStack Query Skill
技能 已验证 活跃TanStack 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.
功能
- 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
使用场景
- 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
非目标
- 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
实践
- Server-state management
- Data fetching patterns
- Caching strategies
- Error handling
- Performance optimization
先决条件
- React development environment
- Node.js and npm/yarn for project setup
安装
npx skills add bobmatnyc/claude-mpm-skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
Next Cache Components
100Next.js 16 缓存组件 - PPR、use cache 指令、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
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。
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.