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

devtools-bidirectional

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

485|92|Updated Jul 25, 2025
Search Tags:#debugging#state management#communication#devtools#event bus#time travel
One-click install
npx skills add https://github.com/TanStack/devtools --skill devtools-bidirectional
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools-bidirectional
Source: https://github.com/TanStack/devtools/tree/main/packages/event-bus-client/skills/devtools-bidirectional
Command: npx skills add https://github.com/TanStack/devtools --skill devtools-bidirectional

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables seamless, two-way communication between your application and the TanStack Devtools panel, allowing for real-time observation and command execution.

Core Features & Use Cases

  • App-to-Devtools Observation: The application can emit events to notify the devtools panel about state changes or other relevant occurrences.
  • Devtools-to-App Commands: The devtools panel can send commands back to the application to trigger actions or modify state.
  • Time-Travel Debugging: Facilitates time-travel debugging by allowing the app to emit state snapshots and the panel to send revert commands.
  • Use Case: Debugging a complex state management system by observing state updates in real-time within the devtools and then using the devtools to send commands to reset or modify specific parts of the application's state.

Quick Start

Use the devtools-bidirectional skill to observe state updates from the application.

Frequently Asked Questions about devtools-bidirectional

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

FAQPage Schema
How do I enable two-way communication between my app and a devtools panel?▼

Two-way app-devtools communication is enabled by using a shared event client to emit real-time state observations from the app and execute commands sent back from the panel.

What is time-travel debugging and how does it work with state snapshots?▼

Time-travel debugging works by emitting state snapshots from the app to the devtools panel, which can then send revert commands back to restore the application to a previous state.

Do I need structuredClone to implement time-travel debugging?▼

Yes, structuredClone is required for time-travel debugging to ensure state snapshot safety, preventing object mutation when capturing and reverting application states.

How do I send commands from a devtools panel to modify application state?▼

Sending commands from a devtools panel to an application uses a bidirectional event bus, allowing the panel to trigger actions or modify state using distinct event naming conventions.

Can I use this bidirectional event communication for complex state management systems?▼

Yes, bidirectional event communication is designed for debugging complex state management by observing state updates in real-time and sending commands to reset or modify specific application state.

Related Skills

Explore More Software Engineering Skills→
duc01226duc01226
7

message-bus

Publish and consume RabbitMQ messages with standardized schemas and naming conventions.

Community
Advanced
cill-i-amcill-i-am

devtools-bidirectional

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

Community
Advanced
cill-i-amcill-i-am

devtools-plugin-panel

Build customizable TanStack devtools panels displaying emitted event data.

Community
Advanced
JeremiahEllingtonJeremiahEllington

connect-chrome

Launch a visible Chrome instance with the Side Panel extension auto-loaded.

Community
Advanced