skills.rest
cill-i-am
cill-i-amCOMMUNITY
Explore all skills by this author →
𝕏@cillo_bGitHub

devtools-bidirectional

Coordinate app observations and panel commands via EventClient for TanStack DevTools.

Updated Apr 1, 2026
Search Tags:#devtools#bidirectional#time-travel#event-client#structured-clone#panel-communication
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill devtools-bidirectional-cill-i-am
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools-bidirectional
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-devtools-bidirectional
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill devtools-bidirectional-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Two-way communication between your application and a TanStack DevTools panel using a shared EventClient, enabling app observations and panel commands with time-travel debugging via snapshots and safe payloads.

Core Features & Use Cases

  • App-to-Devtools observation: emit state updates from the app, panel renders in sync.
  • Devtools-to-App commands: panel issues commands that mutate app state and re-emit observations.
  • Time-travel debugging: capture structured snapshots and revert to past states with a unified client.
  • Safe payloads: rely on structuredClone for snapshots and serializable payloads to ensure cross-tab transport safety.

Quick Start

Instantiate the devtools bidirectional client and wire the app and panel to emit observation events and listen for commands, then exercise the time-travel snapshot flow.

Frequently Asked Questions about devtools-bidirectional

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

FAQPage Schema
How do I set up bidirectional communication between a React app and DevTools panel?▼

Bidirectional communication between a React app and DevTools panel requires instantiating a shared EventClient to emit observation events and listen for commands. This enables app-to-panel state syncing and devtools-to-app state mutations.

Can I implement time-travel debugging using state snapshots in TanStack DevTools?▼

Time-travel debugging in TanStack DevTools captures structured snapshots of application state, allowing you to revert to past states. A unified EventClient coordinates capturing and restoring these snapshots across the app and panel.

How does structuredClone ensure safe cross-tab communication for DevTools payloads?▼

structuredClone ensures safe cross-tab DevTools communication by creating deep copies of state snapshots. This guarantees serializable payloads are safely transported between the application and the DevTools panel without object reference mutations.

Do I need a specific EventClient subclass to inspect app state in DevTools?▼

Yes, inspecting app state requires defining an EventClient subclass using the @tanstack/devtools-event-client library. This subclass coordinates the observation emissions and command receptions necessary for panel communication.

What's the best way to mutate application state from a DevTools panel?▼

Mutating application state from a DevTools panel is best handled by issuing commands through a shared EventClient. The panel sends commands to the app, which mutates state and re-emits observations to sync the panel.

Related Skills

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

devtools-event-client

Create a typed event client connecting applications to TanStack Devtools panels.

Community
Advanced
TanStackTanStack
485

devtools-bidirectional

Facilitate bidirectional event communication between an application and a debugging panel.

Official
Intermediate
louisbrulenaudetlouisbrulenaudet
18

tanstack-devtools

Integrate TanStack DevTools for centralized state inspection in React applications.

Community
Intermediate
Avila-TekAvila-Tek

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP in real browsers.

Official
Intermediate