explanatory-playground_skill

Overview

This skill builds dev-only interactive visualizations that reveal hidden system behavior. It helps create debug routes, lightweight instrumentation, and UI playgrounds to visualize state machines, data flow, events, render cycles, animations, algorithms, and CSS/layout internals. The goal is fast developer feedback without changing production code.

How this skill works

Ask targeted questions to clarify the system type and the specific hidden aspect, then choose a visualization pattern (graphs, timelines, step animations, box overlays). Instrument minimally using event emitters or proxies, add a guarded dev-only route, and expose controls for observing, inspecting, manipulating, or time-traveling through state. Include clear headers and a removal checklist so everything can be traced and cleaned up after debugging.

When to use it

• When someone asks “help me understand how this works” or “show me what’s happening”.
• To reveal current state and transitions in state machines or auth flows.
• To trace data shape and transformations through pipelines and renders.
• To inspect event propagation, timing, and sequence issues.
• To debug render cycles, layout calculations, animations, or algorithm steps.

Best practices

• Start by asking what to visualize: system type and the confusing aspect before building UI.
• Prefer non-invasive instrumentation (event emitters) and probes that can be toggled or removed easily.
• Add a dev-only route protected by NODE_ENV checks so debug UIs never reach production.
• Start with observe/inspect modes; add manipulation and time travel only when necessary.
• Document every debug file with an explicit removal header and a short cleanup checklist.

Example use cases

• State machine inspector: node-edge graph showing current state, available transitions, and recent events. Click a node to reveal guard conditions and payloads.
• Data pipeline trace: directed graph or Sankey that shows data shape at each stage with sample payloads and timing. Hover to view diffs.
• Event timeline: ordered stream showing publisher, subscribers, payload, and propagation path for race conditions or missed handlers.
• Render cycle diff: component tree overlay highlighting props/state changes and DOM diffs between frames.
• Algorithm stepper: animated sequence that lets you step forward/back through algorithm iterations with variable inspection.