Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Pass a config prop to TanStackDevtools to set initial shell behavior. These values are persisted to localStorage after first load and can be changed through the settings panel at runtime.
Storage keys used internally:
tanstack_devtools_settings -- persisted settings
tanstack_devtools_state -- persisted UI state (active tab, panel height, active plugins, persistOpen)
All config properties are optional. Defaults shown below:
<TanStackDevtools
config={{
defaultOpen: false, // open panel on mounthideUntilHover: false, // hide trigger until mouse hoverposition: "bottom-right", // trigger position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'panelLocation: "bottom", // panel position: 'top' | 'bottom'openHotkey: ["Control", "~"],
inspectHotkey: ["Shift", "Alt", "CtrlOrMeta"],
requireUrlFlag: false, // require URL param to show devtoolsurlFlag: "tanstack-devtools", // the URL param name when requireUrlFlag is truetheme: "dark", // 'light' | 'dark' (defaults to system preference)triggerHidden: false, // completely hide trigger (hotkey still works)
}}
/>
Event Bus Configuration
The eventBusConfig prop configures the client-side event bus that plugins use for communication:
<TanStackDevtools
eventBusConfig={{
debug: false, // enable debug logging for the event busconnectToServerBus: false, // connect to the Vite plugin server event busport: 3000, // port for server event bus connection
}}
/>
The server event bus requires the @tanstack/devtools-vite plugin to be running.
Plugin Registration with defaultOpen
Each plugin entry can include a defaultOpen flag to control whether that plugin tab is active when devtools first opens:
CRITICAL: Vue plugin uses render instead of component
The Vue adapter uses component (a Vue component reference) and optional props, not JSX render. Using render produces a silent failure -- the plugin tab appears but renders nothing.
Wrong:
<!-- This silently fails - render is ignored in Vue adapter -->
<script setup lang="ts">
const plugins = [{ name: "My Plugin", render: MyComponent }]
</script>
Correct:
<script setup lang="ts">
import type { TanStackDevtoolsVuePlugin } from "@tanstack/vue-devtools"
const plugins: TanStackDevtoolsVuePlugin[] = [
{ name: "My Plugin", component: MyComponent },
]
</script>
The TanStackDevtoolsVuePlugin type enforces this at compile time. Always import and use it.
HIGH: Vite plugin not placed first in plugins array
The @tanstack/devtools-vite plugin performs source injection that must run before framework plugins (React, Vue, Solid, etc.) process the code.
HIGH: Mounting TanStackDevtools in SSR without client guard
The devtools core shell requires DOM APIs (document, window, localStorage). The React adapter includes 'use client' at its entry point, so standard Next.js/Remix setups work. However, custom SSR setups or frameworks that do not respect the 'use client' directive need explicit guards.
Wrong:
// In a server-rendered component without framework 'use client' supportimport { TanStackDevtools } from"@tanstack/react-devtools"exportdefaultfunctionLayout({ children }) {
return (
<>
{children}
<TanStackDevtools /></>
)
}
Or use dynamic imports / lazy loading to ensure the component only loads on the client.
MEDIUM: Installing as regular dependency for dev-only use
When using the Vite plugin for production stripping, devtools packages should be dev dependencies. Installing them as regular dependencies increases production bundle size unnecessarily.
Exception: if you intentionally want devtools in production, install @tanstack/devtools (core) as a regular dependency. See the production skill for details.
MEDIUM: Not keeping devtools packages at latest versions
All @tanstack/devtools-* packages share internal protocols (event bus messages, plugin mount lifecycle). Mixing versions can cause silent failures where plugins register but never receive events, or the shell mounts but plugins do not render.
