About tanstack-devtools
tanstack-devtools is a guidance skill for setting up and using TanStack Devtools across supported frameworks. It routes tasks to version-aware references for adapters, plugins, events, and production builds.
Key features
- 01Framework-specific documentation routing
- 02Setup and production build guidance
- 03Plugin and marketplace guidance
- 04Event instrumentation guidance
- 05Version-aware source recommendations
Use cases
- 01Set up TanStack Devtools in an application
- 02Choose guidance for a framework adapter
- 03Implement plugin panels or event instrumentation
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/tanstack-devtoolsin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
.tanstack-product-skill.jsonLICENSEagents/openai.yamllicenses/de86d3f4c6d93bcd529b389aaae7d4297072e623af8b5b701db3564f4b89ec90.txtreferences/additional-guidance.mdevents-instrumentation.mdreferences/assets/tanstack-devtools-plugin-panel/references/panel-api.mdreferences/assets/tanstack-devtools-utils-devtools-framework-adapters/references/preact.mdreact.mdsolid.mdvue.mdreferences/assets/tanstack-devtools-vite-plugin/references/vite-options.mdreferences/guides/tanstack-devtools-app-setup-a09047cc.mdtanstack-devtools-event-client-b11524e7.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--common-mistakes.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--core-concept.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--core-patterns.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--debouncing-frequent-observations.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--overview.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--see-also.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88.mdtanstack-devtools-event-client-devtools-instrumentation-6363dc09.mdtanstack-devtools-marketplace-8bf06759--common-mistakes.mdtanstack-devtools-marketplace-8bf06759--featured-plugins.mdtanstack-devtools-marketplace-8bf06759--framework-detection.mdtanstack-devtools-marketplace-8bf06759--how-auto-install-works.mdtanstack-devtools-marketplace-8bf06759--overview-2.mdtanstack-devtools-marketplace-8bf06759--overview.mdtanstack-devtools-marketplace-8bf06759--plugin-id-matching.mdtanstack-devtools-marketplace-8bf06759--pluginmetadata-interface.mdDetails
From the project READMETanStack Devtools
Devtools guidance for setup, framework adapters, plugins, event instrumentation, marketplace use, and production builds.
Confirm core and plugin versions.
Workflow
- Inspect installed TanStack packages and exact versions.
- Read the adapter reference for the detected framework when the task uses an adapter.
- Topic references are indexes. Choose one guide or section for the task; follow its prerequisite links only when needed.
- Prefer installed package types and version-matched source guidance over memory.
- Preserve headless/core behavior when translating examples to a framework adapter.
Task routing
- Setup and production — App setup, Vite integration, and production behavior.
- Plugins and marketplace — Plugin panels, framework adapters, and marketplace use.
- Events and instrumentation — Event client, instrumentation, and bidirectional events.
- Additional official guidance — New official guidance that has not yet been assigned to a specialized topic.
Framework routing
- Vanilla — detect
@tanstack/devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences. - React — detect
@tanstack/react-devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences. - Preact — detect
@tanstack/preact-devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences. - Solid — detect
@tanstack/solid-devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences. - Vue — detect
@tanstack/vue-devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences. - Svelte — detect
@tanstack/svelte-devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences. - Angular — detect
@tanstack/angular-devtools. Read Plugins and marketplace. Shared guidance; check adapter-specific differences.
See source provenance for exact upstream inputs and deduplication records.
Comments
Markdown supported