skills.rest
JeromyJSmith
JeromyJSmithCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-devtools

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

3|Updated May 11, 2026
Search Tags:#debugging#tanstack#devtools#router#plugin architecture#react-query#ai workflows
One-click install
npx skills add https://github.com/JeromyJSmith/lattice-platform --skill tanstack-devtools-jeromyjsmith
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/JeromyJSmith/lattice-platform/tree/main/.agents/skills/skills/tanstack-devtools
Command: npx skills add https://github.com/JeromyJSmith/lattice-platform --skill tanstack-devtools-jeromyjsmith

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack apps can be hard to debug when Query, Router, and AI workflows are spread across multiple tools, so issues like unexpected state changes, navigation bugs, and failing tool calls are slow to diagnose.

Core Features & Use Cases

  • Unified devtools panel: One centralized interface for TanStack debugging across Query, Router, and AI-related workflows.
  • Plugin architecture: Add built-in or custom panels with a simple plugin interface to match your app’s needs.
  • Real-time inspection: Inspect state and behavior live to speed up troubleshooting during development.

Quick Start

Install the package by adding @tanstack/react-devtools to your project and render the TanStackDevtools component inside your 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 Router and React Query state changes in one place?▼

You can debug TanStack Router and React Query together by rendering a unified devtools panel that provides real-time state inspection, navigation debugging, and query monitoring in a single interface.

What is a plugin architecture for React devtools and how does it work?▼

A plugin architecture for React devtools lets you add built-in or custom panels using unique ids and render functions, enabling extensible debugging interfaces for Query, Router, and AI workflows.

How do I set up TanStack devtools in a React development environment?▼

To set up TanStack devtools, install the @tanstack/react-devtools package and render the TanStackDevtools component inside your QueryClientProvider to enable live state inspection.

Can I inspect AI workflow tool calls alongside TanStack Query in the same panel?▼

Yes, the unified devtools panel supports built-in visibility for AI workflows alongside Query and Router, allowing you to inspect failing tool calls and unexpected state changes during development.

Do I need custom panels to debug navigation bugs in TanStack Router?▼

No, you do not need custom panels to debug navigation bugs, as the devtools include built-in panels for Router debugging while still offering optional custom panels through its plugin architecture.

What's the best way to troubleshoot unexpected state changes across TanStack workflows?▼

The best way to troubleshoot unexpected state changes is using a centralized devtools panel for real-time inspection across TanStack Query, Router, and AI workflows to speed up diagnosis.

Related Skills

Explore More Software Engineering Skills→
jezwebjezweb
961

TanStack Router

Generate typed file-based routes with TanStack Router for React SPAs.

Community
Intermediate
janpeterdjanpeterd

tanstack-devtools

Unify TanStack Query and Router debugging into a single devtools panel.

Community
Intermediate
oakossoakoss
14

tanstack-devtools

Inspect TanStack Query, Router, and Form state in React applications.

Official
Intermediate
louisbrulenaudetlouisbrulenaudet
18

tanstack-devtools

Integrate TanStack DevTools for centralized state inspection in React applications.

Community
Intermediate