TanStack Devtools: one unified debugging panel for your TanStack apps
Consolidate Query, Router and AI debugging into a single plugin-based panel — built-in plugins, custom plugins, the Vite integration, and production-guard best practices
- What
- Consolidate Query, Router and AI debugging into a single plugin-based panel — built-in plugins, custom plugins, the Vite integration, and production-guard best practices
- Cost
- Free
- Needs
- a React/TanStack project where you want the debugging panel — npm packages are added to YOUR app by you (the skill is documentation the agent reads, not an auto-installer)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @tanstack-skills's skill for the TanStack Devtools panel: a unified, extensible debugging interface that consolidates devtools for TanStack Query, Router and other libraries into one panel, built with Solid.js for lightweight performance. It covers basic setup (npm install @tanstack/react-devtools, mount <TanStackDevtools/> inside the QueryClientProvider), the built-in plugins (Query — ReactQueryDevtoolsPanel; Router — TanStackRouterDevtoolsPanel with the router instance; AI — AIDevtoolsPanel for AI workflows: message inspector, token usage and cost tracking, streaming visualization, tool-call debugging, reasoning-token viewer, adapter switching), the plugin system (the DevtoolsPlugin interface — id, name, render — with custom-plugin and dynamic-registration recipes like a state inspector or network logger), the Vite plugin integration, production considerations (conditionally include in development only, or lazy-load), framework support (React alpha; Solid, Vue, Angular planned), and best practices plus common pitfalls (unique plugin IDs, lightweight render functions, don't ship devtools to production without tree-shaking). Honest caveats: alpha status — expect API churn; the skill is documentation the agent reads, not an auto-installer — you add the npm packages to your app yourself; devtools belong in development builds only. MIT licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a React/TanStack project where you want the debugging panel — npm packages are added to YOUR app by you (the skill is documentation the agent reads, not an auto-installer) Install "TanStack Devtools: one unified debugging panel for your TanStack apps" for me. It gives my agent @tanstack-skills's TanStack Devtools skill: setup (npm install @tanstack/react-devtools, mount the panel in the provider), built-in plugins (Query, Router, AI), custom-plugin and dynamic-registration recipes, the Vite plugin, production guards, and best practices/pitfalls. MIT-licensed. Repository: https://github.com/tanstack-skills/tanstack-skills/blob/main/plugins/tanstack-devtools/skills/tanstack-devtools/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "tanstack-devtools". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. npm install @tanstack/react-devtools in your project and mount <TanStackDevtools/> in development builds only). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.