transparent-ui_skill

Overview

This skill creates temporary, development-only debugging interfaces that make invisible system behavior visible through interactive visualizations. It helps developers inspect state, trace transitions, and explore data flow for complex systems like state machines, render cycles, event pipelines, and algorithms. The interfaces are designed to be easy to add and remove and to integrate with the project’s existing components and tooling.

How this skill works

I identify the parts of the system to expose (state, transitions, relationships, hidden logic), pick an appropriate visualization (graphs, timelines, tree diffs, or step animations), and instrument the system with the lightest-touch approach that captures needed information. The skill wires those instrumentation points to a dev-only route or page that subscribes to events, renders real-time views, and provides inspection and manipulation controls. It also documents the files and hooks to remove when debugging is finished.

When to use it

• You can’t reason about system behavior from logs alone and need a live view of state and transitions.
• You want to reproduce timing or race conditions with time-travel or recorded history.
• You need to show how data flows through pipelines, transformations, or component trees.
• You are debugging third-party integrations and prefer non-invasive wrappers or proxies.
• You want an interactive debug panel for QA or to explain internals to teammates.

Best practices

• Make the debug UI dev-only and easy to remove: guard routes and check env variables.
• Start with observation and inspection (levels 1–2); add manipulation and time travel only when necessary.
• Choose the least invasive instrumentation: event emitters or wrapper proxies before modifying core logic.
• Use the project’s existing components so the debug UI feels native and is consistent.
• Document the removal path at the top of each debug file and list modified lines for cleanup.

Example use cases

• Visualize a state machine: node-edge graph with the current state highlighted and transition history.
• Trace data pipeline: Sankey or directed graph showing sources, transforms, and sinks with payload samples.
• Debug UI rendering: component tree with diff overlay showing what re-rendered and why.
• Investigate event propagation: timeline of events, handlers, and timestamps with handlers’ payloads.
• Reproduce animation bugs: timeline scrubber with keyframes, easing curves, and live manipulation controls.