skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-devtools

Integrate TanStack DevTools into dean-stack with dev-only Vite plugin gating.

1|Updated Apr 26, 2026
Search Tags:#debugging#tanstack#devtools#router#editor#browser
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill tanstack-devtools-matthewharwood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/tanstack-devtools
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill tanstack-devtools-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack DevTools for dean-stack provides a dev-only debugging host and browser-to-editor linking to streamline debugging of TanStack components and router surfaces during live development on iPad-over-LAN.

Core Features & Use Cases

  • Floating TanStack DevTools host for quick inspection of components and router state
  • Vite plugin integration via tanstack-devtools-vite to wire the runtime into the dev server
  • Dev-only gating with environment variable checks to keep production bundles clean
  • Zero production footprint; devtools are tree-shaken away in production
  • Use Case: during interactive debugging of TanStack router and components in a live browser session

Quick Start

Mount the TanStack DevTools host at the root of your app and run in development so it is tree-shaken from production.

Frequently Asked Questions about tanstack-devtools

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

FAQPage Schema
How do I add TanStack DevTools to my Vite development workflow?▼

To add TanStack DevTools, mount the floating debugging host at your app's root and configure the tanstack-devtools-vite plugin in your dev server to wire the runtime into your browser session.

Does TanStack DevTools inspect router state and components during live development?▼

Yes, TanStack DevTools provides a floating inspection host for viewing TanStack router state and components during live browser sessions, while enabling browser-to-editor linking for direct navigation.

How do I keep TanStack DevTools out of my production bundle?▼

You keep production builds clean by gating the devtools with import.meta.env.DEV checks, which tree-shakes the debugging host and prevents production residue in your final bundle.

Can I use TanStack DevTools for iPad-over-LAN development?▼

Yes, TanStack DevTools supports interactive debugging of TanStack components and router surfaces during live development specifically across iPad-over-LAN connections.

What Vite plugin is required for TanStack DevTools runtime injection?▼

The tanstack-devtools-vite plugin is required for runtime injection, wiring the devtools into the Vite dev server to provide the floating debugging host during development.

Related Skills

Explore More Software Engineering Skills→
cill-i-amcill-i-am

devtools-vite-plugin

Orchestrate TanStack Devtools integration in Vite with plugin ordering and production stripping.

Community
Advanced
orkestra-ccorkestra-cc
1

url-tabs

Enforce URL-based tab state management in React with useSearchParams.

Official
Intermediate
oakossoakoss
14

tanstack-devtools

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

Official
Intermediate
22348392234839
52

pilot

Bridges AI agents with live browser pages to test state, interact with UI, and execute code.

Community
Intermediate