tanstack-devtools

tanstack-devtools is a reference and usage skill for TanStack Devtools, a centralized, extensible debugging panel that consolidates devtools for TanStack libraries (Query, Router, and more) into a single interface. Built with Solid.js for a light footprint, it exposes a framework-agnostic plugin architecture with real-time state inspection, aimed at the problem of juggling multiple separate devtools during development.

The skill documents installation (`@tanstack/react-devtools`), basic setup inside a QueryClientProvider, and how to register built-in plugins for React Query, Router, and AI workflows. The AI Devtools panel covers a message inspector, token-usage and cost tracking, streaming visualization, tool-call debugging, a thinking/reasoning viewer, and adapter switching. It explains the `DevtoolsPlugin` interface (id, name, render), how to author custom plugins such as a state inspector or network logger, dynamic conditional plugin registration, and Vite plugin integration. It also covers production considerations — gating devtools behind `NODE_ENV` checks or lazy loading — a framework-support matrix (React alpha; Solid, Vue, Angular planned), and best practices around unique plugin IDs and lightweight render functions.

It targets React (and future multi-framework) developers building apps on the TanStack stack who want a unified, extensible debugging surface. The package is explicitly labeled alpha, so APIs may change. As a development-time, in-app inspection tool, it introduces no risky behavior — its main caution is simply not shipping devtools into production builds without tree-shaking.