skills.rest
MichaelFrieze
MichaelFriezeCOMMUNITY
Explore all skills by this author →
Website𝕏@MichaelFriezeGitHub

tanstack-devtools

Centralize TanStack Query, Router, and AI debugging in a plugin-based devtools panel.

Updated Aug 23, 2026
Search Tags:#debugging#tanstack#devtools#ai debugging#react query#state inspection#router debugging
One-click install
npx skills add https://github.com/MichaelFrieze/riffatlas --skill tanstack-devtools-michaelfrieze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/MichaelFrieze/riffatlas/tree/main/.agents/skills/tanstack-devtools
Command: npx skills add https://github.com/MichaelFrieze/riffatlas --skill tanstack-devtools-michaelfrieze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Devtools removes the friction of debugging multiple TanStack libraries separately by consolidating Query, Router, and optional AI debugging into a single, extensible devtools panel.

Core Features & Use Cases

  • Unified Devtools Panel: Inspect TanStack Query, Router, and other TanStack library state from one interface.
  • Plugin Architecture: Add or swap panels via a lightweight plugin system so teams can tailor debugging to their app.
  • Real-time State Inspection: Observe updates as your app runs to speed up troubleshooting during development.
  • Built-in Devtools: Includes panels for React Query, TanStack Router, and TanStack AI workflows (message inspection, token usage, streaming visualization, tool call debugging).
  • Framework Support (Core + React integration): Uses a framework-agnostic core with React integration via @tanstack/react-devtools.

Quick Start

Use the tanstack-devtools panel by installing @tanstack/react-devtools, creating a QueryClient, and rendering TanStackDevtools inside your app within a QueryClientProvider.

Frequently Asked Questions about tanstack-devtools

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

FAQPage Schema
How do I debug TanStack Query and Router state in one panel?▼

Debugging TanStack Query and Router state in one panel requires a TanStackDevtools instance with optional plugins providing id, name, and render functions. This consolidates real-time query cache and route transition inspection into a unified interface.

What is TanStack AI debugging and how does it inspect tool calls?▼

TanStack AI debugging inspects AI workflows by visualizing messages, token usage, streaming data, and tool call traces. It operates through a plugin-based devtools panel that provides real-time observation of AI interactions within your application.

Can I use TanStack Devtools with frameworks other than React?▼

TanStack Devtools uses a framework-agnostic core that supports integration with other frameworks via their corresponding devtools packages. React integration is specifically handled through the @tanstack/react-devtools package.

How do I add custom panels to debug other TanStack libraries?▼

Adding custom panels to debug TanStack libraries is done through a lightweight plugin architecture. You create a TanStackDevtools instance and add plugins that provide an id, name, and render function to tailor the debugging interface to your app.

Does TanStack Devtools require a QueryClient to function?▼

TanStack Devtools requires a QueryClient when using React integration, necessitating the creation of a QueryClient and rendering TanStackDevtools within a QueryClientProvider to observe query and cache state updates.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-react-query-setup

Configure TanStack Query with QueryClient, provider, and devtools for SSR TanStack Start and SPA TanStack Router projects.

Community
Advanced
CatOfJupit3rCatOfJupit3r
1

tanstack-query-integration

Integrate TanStack Query with oRPC for typed data fetching and caching.

Community
Advanced
qazuorqazuor

tanstack-query-patterns

Automate TanStack Query data fetching and server-state patterns in React apps.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

react-debugging

Map React DOM elements to owning components and inspect their props.

Community
Intermediate