skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

devtools-framework-adapters

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

485|92|Updated Jul 25, 2025
Search Tags:#react#vue#plugin#devtools#preact#solid#framework adapter
One-click install
npx skills add https://github.com/TanStack/devtools --skill devtools-framework-adapters
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools-framework-adapters
Source: https://github.com/TanStack/devtools/tree/main/packages/devtools-utils/skills/devtools-framework-adapters
Command: npx skills add https://github.com/TanStack/devtools --skill devtools-framework-adapters

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides factory functions to create per-framework adapters for TanStack Devtools, enabling seamless integration with different JavaScript frameworks like React, Vue, Solid, and Preact.

Core Features & Use Cases

  • Framework Adapters: Create custom devtools plugins and panels tailored for specific frameworks.
  • Tree-Shaking: Utilizes NoOpPlugin and NoOpPanel variants to ensure devtools code is excluded from production builds.
  • Use Case: A developer building a SolidJS application can use these factories to create a custom devtools plugin that inspects their application's state, ensuring the plugin is only included when in development mode.

Quick Start

Use the devtools-framework-adapters skill to create a React plugin for your custom store.

Frequently Asked Questions about devtools-framework-adapters

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

FAQPage Schema
How do I create a custom devtools plugin for React or Vue?▼

Framework adapters are generated using factory functions that produce per-framework plugin and panel adapters for TanStack Devtools, supporting specific APIs and options objects for React, Vue, Solid, and Preact.

Can I use TanStack Devtools with Solid or Preact applications?▼

Yes, TanStack Devtools supports Solid and Preact by generating framework-specific adapters that provide the necessary APIs to inspect your application's state during development.

How do I ensure devtools code is tree-shaken from my production bundle?▼

To ensure devtools code is excluded from production builds, you can utilize NoOpPlugin and NoOpPanel variants which act as no-operation stubs for tree-shaking purposes.

What is a framework adapter for JavaScript devtools?▼

A framework adapter is a specialized plugin and panel configuration that enables TanStack Devtools to interface with specific JavaScript frameworks like React, Vue, Solid, and Preact.

How do I build a devtools panel to inspect SolidJS state?▼

You can build a devtools panel to inspect SolidJS state by using the provided factory functions to create a Solid-specific adapter, ensuring it is only included when running in development mode.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
485

devtools-plugin-panel

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

Official
Advanced
PabloGarciaFuentesPabloGarciaFuentes

astro-framework

Build Astro islands with client directives, Zod schemas, and SSR adapters.

Community
Advanced
timequitytimequity
6

frontend-react

Automate React frontend development with TypeScript, Tailwind CSS, Vite, Zustand, and TanStack Query.

Official
Advanced
TaherMustansir1929TaherMustansir1929

tanstack-devtools

Centralize debugging for TanStack libraries with a plugin-based devtools panel.

Community
Advanced