transparent-ui

SKILL.md

Build temporary debugging interfaces that make invisible system behavior visible. These are development-only routes/pages that reveal internal state, transitions, and data flow through interactive visualization.

Make the invisible visible. Show state that normally exists only in memory. Reveal transitions that happen too fast to observe. Surface the "why" behind system behavior.

Temporary by design. These are debugging tools, not production features. Keep changes isolated for easy removal. Use dev-only routes and environment checks.

インタラクティブな視覚化を通じて複雑なシステムの内部動作を明らかにするスタンドアロン デバッグ インターフェイスを作成します。ユーザーが何かがどのように動作するかを理解したい場合、内部状態をデバッグしたい場合、データ フローを視覚化したい場合、システムと対話するときに何が起こるかを確認したい場合、または複雑なメカニズムのデバッグ パネルを構築したい場合に使用します。 「これがどのように機能するのか理解できません」、「何が起こっているのかを見せてください」、「ステート マシンを視覚化してください」、「これのデバッグ ビューを構築してください」、「データ フローを確認するのを手伝ってください」、「これを透過的にしてください」などのリクエスト、または内部システムの動作を理解、デバッグ、または視覚化するためのリクエストをトリガーします。ステート マシン、レンダリング システム、イベント フロー、アルゴリズム、アニメーション、データ パイプライン、CSS 計算、データベース クエリ、または明確ではない内部動作を持つあらゆるシステムに適用されます。 ソース: petekp/agent-skills。

原文を見る