skills.rest
juanjaragavi
juanjaragaviCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-devtools

Configures a unified TanStack devtools panel with plugin-based debugging for React applications.

Updated Sep 17, 2026
Search Tags:#debugging#react#tanstack#devtools#vite#plugin architecture#react query
One-click install
npx skills add https://github.com/juanjaragavi/utilities-manager --skill tanstack-devtools-juanjaragavi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/juanjaragavi/utilities-manager/tree/main/.agents/skills/tanstack-devtools
Command: npx skills add https://github.com/juanjaragavi/utilities-manager --skill tanstack-devtools-juanjaragavi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-devtools, @tanstack/react-query-devtools, @tanstack/react-router-devtools.

What problem does it solve? Debugging TanStack Query, Router, and AI workflows requires juggling separate devtools panels, which fragments the debugging experience and complicates setup in React applications. ## Core Features & Use Cases - Unified Devtools Panel: Consolidate Query, Router, and AI devtools into a single panel via the TanStackDevtools component. - Plugin Architecture: Register built-in or custom plugins with unique IDs and render functions, including dynamic and conditional registration. - AI Workflow Debugging: Inspect messages, token usage, streaming chunks, tool calls, and reasoning output through the AI devtools panel. - Use Case: While building a React app with TanStack Query and Router, mount one TanStackDevtools component with both plugin panels to monitor cache state and routing in a single interface during development. ## Quick Start Set up TanStack devtools in my React app with the Query and Router plugins enabled only in development mode.

Frequently Asked Questions about tanstack-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up TanStack devtools in a React app?▼

Install @tanstack/react-devtools and render the TanStackDevtools component inside your app, passing a plugins array. For Query debugging, wrap your app in QueryClientProvider and add the ReactQueryDevtoolsPanel as a plugin.

How do I add TanStack Query and Router devtools together?▼

Pass both panels as plugins to a single TanStackDevtools component, giving each a unique id like react-query and router. The Router plugin requires passing the router instance to TanStackRouterDevtoolsPanel.

Does TanStack devtools support frameworks besides React?▼

React support via @tanstack/react-devtools is currently in Alpha. Solid, Vue, and Angular packages are planned but not yet released, though the core plugin architecture is framework-agnostic.

How do I exclude TanStack devtools from production builds?▼

Conditionally render the devtools only when NODE_ENV is development, or lazy-load the component with React.lazy so it is code-split out of the production bundle.

Why is my TanStack devtools plugin not rendering?▼

Common causes include duplicate plugin IDs causing conflicts, missing QueryClientProvider when using the Query plugin, or not passing the router instance to the Router devtools panel.

Related Skills

Explore More Software Engineering Skills→
louisbrulenaudetlouisbrulenaudet
18

tanstack-devtools

Integrate TanStack DevTools for centralized state inspection in React applications.

Community
Intermediate
lightdashlightdash
6.1k

debug-local

Diagnose Lightdash bugs using PM2 logs, Maple traces, and browser automation.

Official
Advanced
mehdibhamehdibha
1.4k

devtools-vite-plugin

Configure the TanStack Devtools Vite plugin for source inspection, console piping, and production stripping.

Community
Intermediate
tanstack-skillstanstack-skills
29

tanstack-devtools

Unify TanStack debugging and state inspection into an extensible devtools panel.

Official
Intermediate