tanstack-devtools

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

14|5|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/oakoss/agent-skills --skill tanstack-devtools-oakoss
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/oakoss/agent-skills/tree/main/skills/tanstack-devtools
Command: npx skills add https://github.com/oakoss/agent-skills --skill tanstack-devtools-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides visual debugging tools for TanStack libraries (Query, Router, Form), allowing developers to inspect state, routes, and form fields in real-time, significantly speeding up the debugging process.

Core Features & Use Cases

  • Unified Debugging Panel: Combines Query cache, Router route trees, and Form state into a single interface.
  • Library-Specific Tools: Offers dedicated debugging panels for Query, Router, and Form.
  • Use Case: When a React application using TanStack Query is behaving unexpectedly, use this Skill to open the devtools panel, inspect the query cache, and identify stale or erroneous data.

Quick Start

Use the tanstack-devtools skill to open the unified debugging panel for your React application.

Frequently Asked Questions about tanstack-devtools

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

FAQPage Schema
How do I visually debug TanStack Query cache state in a React application?

To visually debug TanStack Query cache state, use this Skill to open a dedicated devtools panel for real-time inspection of query caches and identify stale or erroneous data in your React application.

Can I inspect TanStack Router route trees and TanStack Form field values in the same debugging panel?

Yes, you can inspect TanStack Router route trees and Form field values in the same debugging panel. This Skill offers a unified interface that combines Query, Router, and Form state management inspection.

What is the best way to inspect real-time TanStack Form state during development?

The best way to inspect real-time TanStack Form state is using this Skill's library-specific debugging tools, which allow developers to visually track form field values and state changes directly during the development workflow.

Does the TanStack debugging panel work with Vite plugin integration?

Yes, the TanStack debugging panel works with Vite plugin integration. This Skill supports Vite plugin integration to enhance development workflows when inspecting state, routes, and form fields in real-time.

Can I use standalone mode for debugging individual TanStack libraries instead of a unified panel?

Yes, you can use standalone mode for debugging individual TanStack libraries. This Skill supports both standalone and unified panel modes, allowing you to choose between library-specific tools or a combined interface.