skills.rest
Montte-erp
Montte-erpOFFICIAL
Explore all skills by this author →
GitHub

tanstack-devtools

Unify TanStack library debugging interfaces into a single extensible devtools panel.

6|4|Updated Nov 1, 2025
Search Tags:#debugging#react#tanstack#ai#devtools#plugins#vite
One-click install
npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-devtools-montte-erp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/Montte-erp/montte-nx/tree/main/.agents/skills/tanstack-devtools
Command: npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-devtools-montte-erp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates disparate TanStack library devtools into a single panel to reduce context switching and simplify debugging of queries, routing, and AI workflows in front-end applications.

Core Features & Use Cases

  • Unified Panel: Central interface for inspecting TanStack Query caches, router state, and AI conversation metadata in real time.
  • Plugin Architecture: Extensible system for built-in and custom plugins such as Query, Router, AI, state inspectors, and network loggers.
  • Framework & Tooling Support: Type-safe plugin definitions, optional Vite integration, and recommendations for conditional inclusion or lazy loading in development builds.
  • Use Cases: Diagnose slow or stale queries, trace router navigation issues, debug AI tool calls and token usage, and build domain-specific inspection panels for app state.

Quick Start

Enable the TanStack Devtools in your development build and register the React Query and Router plugins to inspect queries, routing, and AI messages live.

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 caches and router state in React simultaneously?▼

Build a custom devtools plugin using the provided TypeScript plugin interface to inspect domain-specific application state and integrate it into the unified panel for real-time monitoring.

Does this devtools panel support Vite plugin integration?▼

Yes, the devtools panel supports optional Vite plugin integration and provides patterns to conditionally include or lazy-load the panel exclusively during development builds to optimize production performance.

Can I inspect AI conversation metadata and token usage during front-end development?▼

Yes, you can inspect AI conversation metadata and debug AI tool calls by registering the AI plugin in the devtools panel, which provides real-time tracking of AI workflows and token usage.

What is the best way to trace router navigation issues in Solid or Vue applications?▼

The best way to trace router navigation issues is to use the unified devtools panel with the Router plugin, which enables real-time router state inspection across frameworks like Solid and Vue.

How do I create a custom inspection panel for my application's specific state?▼

You can create a custom inspection panel by leveraging the extensible plugin architecture, utilizing TypeScript typings to define domain-specific state inspectors and network loggers tailored to your application.

Related Skills

Explore More Software Engineering Skills→
yanun0323yanun0323
1

agents-js-ts-runtime

Enforces Bun package management with Node.js runtime defaults for JavaScript/TypeScript projects.

Community
Intermediate
Lonsdale201Lonsdale201
21

wp-query-cache

Audit and refactor WordPress query-cache writes to use salted cache helpers.

Community
Intermediate
tenequmtenequm
32

tanstack

Build type-safe React applications with TanStack Query, Router, and Start.

Community
Advanced
JeromyJSmithJeromyJSmith
3

tanstack-devtools

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

Community
Basic