用途：为 TanStack 系列库提供调试面板，用于检查 Query 缓存状态、Router 路由树和 Form 字段状态，适用于配置 devtools、调试缓存行为、查看路由匹配或合并多个面板。
主要能力：Query 提供浮动式 <ReactQueryDevtools />（自动连接最近的 QueryClient）与嵌入式 <ReactQueryDevtoolsPanel />；Router 提供 <TanStackRouterDevtools />（放在根路由组件）与 <TanStackRouterDevtoolsPanel />（在 provider 外需传 router prop）；Form 使用 <ReactFormDevtoolsPanel /> 作为统一面板插件；统一面板为 <TanStackDevtools plugins={[...]} />。Vite 插件 devtools() 支持源码注入、增强日志和生产移除；ReactQueryDevtoolsInProd 可显式启用生产环境；可用 React.lazy 懒加载减小开发包体积。统一面板配置项包括 position、panelLocation、theme、defaultOpen、hideUntilHover、openHotkey、inspectHotkey、requireUrlFlag。
使用方式：在 React 应用中按库引入对应组件并置于正确位置，统一面板需安装 @tanstack/react-devtools 及库专属插件包，并在 vite 配置中加入来自 @tanstack/devtools-vite 的 devtools()。
限制：默认在生产环境被 tree-shaking 移除，不适合生产调试；不支持无适配器的非 React 框架；不适用于与 TanStack 无关的自定义状态管理。避免同时使用独立与统一面板，避免在 QueryClientProvider 外渲染 devtools。相关技能可通过 npx skills add oakoss/agent-skills --skill tanstack-query 等命令获取。