TanStackOfficial·9 Agent Skills Included

devtools

Unified debugging panels, plugins, and event tooling for web apps

Adds a unified debugging panel to React, Vue, Solid, Preact, and Angular apps for inspecting state and behavior in real time. Configures the Vite plugin for source inspection, console piping, enhanced logs, and automatic production stripping. Builds custom plugin panels with typed event clients, two-way app communication, and marketplace publishing. Eliminates manual wiring, version mismatches, and silent setup failures.

485|92

↗

npx skills add TanStack/devtools --all -g -y

All Skills in This Repository (9)

Pure Emerald Level Indicators

📦 In Repo

TanStack

devtools-marketplace

Publish third-party plugins to the TanStack Devtools Marketplace via PluginMetadata and PR submission.

devtools-plugin-panel

Create custom debugging panels for TanStack Devtools with Solid.js and framework adapters.

devtools-app-setup

Install and configure TanStack Devtools for React, Vue, Solid, and Preact.

devtools-production

Exclude or conditionally include TanStack Devtools in production builds via Vite plugins.

devtools-vite-plugin

Configure the @tanstack/devtools-vite plugin for Vite projects.

devtools-framework-adapters

Generate per-framework TanStack Devtools plugin and panel adapters with factory functions.

devtools-bidirectional

Facilitate bidirectional event communication between an application and a debugging panel.

devtools-instrumentation

Emit consolidated diagnostic events to TanStack Devtools from library boundaries.

devtools-event-client

Enable typed event communication between libraries and TanStack Devtools.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install TanStack Devtools?▼

Run `npx skills add TanStack/devtools --all -g -y` in your terminal to install all skills in this suite globally.

What does TanStack Devtools do?▼

It adds a unified debugging panel to your web app for inspecting state, queries, and routing in real time. It works with React, Vue, Solid, Preact, Angular, and Svelte.

How do I keep devtools out of production builds?▼

The Vite plugin strips all devtools code automatically during production builds by default. For non-Vite projects, use conditional imports or the NoOp plugin variants for tree-shaking.

Can I build custom devtools plugins?▼

Yes. The skills cover building custom panels with typed event clients, two-way app communication, and publishing your plugin to the built-in marketplace.

Does it work with Claude Code and Cursor?▼

Yes. All skills follow the universal SKILL.md standard and run in Claude Code, Cursor, Codex, and other compatible coding agents.