skills.rest
mehdibha
mehdibhaCOMMUNITY
Explore all skills by this author →
Website𝕏@mehdibhaGitHub

devtools-app-setup

Install and configure TanStack Devtools with framework adapters and plugin registration.

1.4k|34|Updated Mar 7, 2024
Search Tags:#debugging#react#tanstack#vue#devtools#vite#plugin configuration
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill devtools-app-setup-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools-app-setup
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-devtools-app-setup
Command: npx skills add https://github.com/mehdibha/dotUI --skill devtools-app-setup-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up TanStack Devtools correctly across React, Vue, Solid, and Preact involves framework-specific plugin APIs, Vite plugin ordering, and SSR pitfalls that cause silent failures. This Skill provides verified setup patterns and configuration references so the devtools shell and plugins work on the first attempt. ## Core Features & Use Cases - Framework Adapter Setup: Install and mount TanStackDevtools for React, Vue, Solid, or Preact with the correct plugin registration API (render vs component). - Shell Configuration: Configure position, hotkeys, theme, hideUntilHover, requireUrlFlag, and eventBusConfig with localStorage persistence. - Mistake Prevention: Avoid common failures like Vue plugins using render instead of component, Vite plugin ordering, and SSR mounting without client guards. - Use Case: You are adding TanStack Query and Router devtools panels to a React app. Use this Skill to mount TanStackDevtools at the root, register both panels via the plugins prop, and gate visibility behind a URL flag for staging. ## Quick Start Set up TanStack Devtools in my React app with the Query and Router devtools panels registered as plugins.

Frequently Asked Questions about devtools-app-setup

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

FAQPage Schema
How do I set up TanStack Devtools in a React app?▼

Install @tanstack/react-devtools and @tanstack/devtools-vite as dev dependencies, then mount the TanStackDevtools component at your app root. Register plugins like ReactQueryDevtoolsPanel through the plugins prop with name and render fields.

How do I register plugins with TanStack Devtools?▼

Pass a plugins array to the TanStackDevtools component where each entry has a name string and a render element (React, Solid, Preact) or a component reference (Vue). Add defaultOpen: true to make a plugin tab active on first open.

Why is my Vue devtools plugin tab rendering nothing?▼

The Vue adapter uses component, not render, in plugin definitions, so using render silently fails. Type your plugins array as TanStackDevtoolsVuePlugin and pass the Vue component reference under the component key.

Does TanStack Devtools work with SSR frameworks like Next.js?▼

The React adapter includes a 'use client' directive, so standard Next.js and Remix setups work. Custom SSR setups need a client guard such as checking typeof window !== 'undefined' or using dynamic imports.

Why must the devtools Vite plugin come first in the plugins array?▼

The @tanstack/devtools-vite plugin performs source injection that must run before framework plugins like @vitejs/plugin-react process the code. Placing devtools() first in the Vite plugins array ensures correct instrumentation.

Can I hide TanStack Devtools unless a URL parameter is present?▼

Yes, set requireUrlFlag: true in the config prop and optionally customize urlFlag (default 'tanstack-devtools'). The devtools then only appear when that query parameter is present, which suits staging environments.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
485

devtools-app-setup

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

Official
Intermediate
cill-i-amcill-i-am

devtools-vite-plugin

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

Community
Advanced
JeromyJSmithJeromyJSmith
3

tanstack-devtools

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

Community
Basic
TanStackTanStack
485

devtools-framework-adapters

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

Official
Intermediate