skills.rest
tanstack-skills
tanstack-skillsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tanstack-devtools

Unify TanStack debugging and state inspection into an extensible devtools panel.

29|2|Updated Jan 25, 2026
Search Tags:#debugging#react#tanstack#devtools#plugin-architecture#state-inspection#devtool-panel
One-click install
npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-devtools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/tanstack-skills/tanstack-skills/tree/main/plugins/tanstack-devtools/skills/tanstack-devtools
Command: npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes debugging and state inspection across TanStack libraries into a single, extensible devtools panel.

Core Features & Use Cases

  • Unified panel for TanStack debugging across Query, Router, and AI panels, plus custom plugins.
  • Real-time state inspection and plugin architecture for extensible tooling.
  • Framework-agnostic core with lightweight performance and an approachable integration story.

Quick Start

Install the devtools package in your project and render the TanStackDevtools component in your app to start debugging.

Frequently Asked Questions about tanstack-devtools

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

FAQPage Schema
How do I debug state across multiple TanStack libraries at once?▼

Debugging state across multiple TanStack libraries is centralized by rendering a single TanStackDevtools component in your app to monitor Query, Router, and AI tools in real-time.

How do I add custom devtools panels for my own React state inspection?▼

Add custom devtools panels for React state inspection by leveraging the extensible plugin architecture, which allows you to build and integrate custom tooling into the unified devtools panel.

Does this devtools panel work with non-React frameworks?▼

The devtools panel uses a framework-agnostic core designed for React-based apps and future framework integrations, ensuring you can monitor state across different environments as they are supported.

What's the best way to inspect TanStack Router and Query state during development?▼

The best way to inspect TanStack Router and Query state during development is using the unified devtools panel, which provides real-time state inspection across these libraries and custom plugins.

Will loading these devtools impact my production application performance?▼

Loading these devtools will not impact production application performance because it implements safe runtime loading to ensure minimal production impact while debugging during development.

Related Skills

Explore More Software Engineering Skills→
jezwebjezweb
961

TanStack Router

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

Community
Intermediate
louisbrulenaudetlouisbrulenaudet
18

tanstack-devtools

Integrate TanStack DevTools for centralized state inspection in React applications.

Community
Intermediate
JeromyJSmithJeromyJSmith
3

tanstack-devtools

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

Community
Basic
oakossoakoss
14

tanstack-devtools

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

Official
Intermediate