システムの内部動作を明らかにする対話型のデバッグ インターフェイスを構築します。 「これがどのように機能するかを理解するのを手伝ってください」、「何が起こっているのかを見せてください」、「状態を視覚化してください」、「デバッグ ビューを構築してください」、「何が起こっているのかわかりません」、または不透明なシステム動作を可視化するためのリクエストを求められた場合に使用します。ステート マシン、データ フロー、イベント システム、アルゴリズム、レンダリング サイクル、アニメーション、CSS 計算、または隠された内部構造を持つあらゆるメカニズムに適用されます。
コマンドラインで explanatory-playground AI スキルを開発環境にすばやくインストール
ソース: petekp/agent-skills。
Build dev-only visualizations that make invisible system behavior visible.
| State machines | Node-edge graph | react-flow | | Data flow | Directed graph / Sankey | react-flow | | Events | Timeline | custom or recharts | | Algorithms | Step animation | custom | | Render cycles | Component tree + diffs | custom | | Animations | Timeline scrubber | custom | | CSS/Layout | Box model overlay | custom |
See references/patterns.md for layouts, code, and implementation details.
システムの内部動作を明らかにする対話型のデバッグ インターフェイスを構築します。 「これがどのように機能するかを理解するのを手伝ってください」、「何が起こっているのかを見せてください」、「状態を視覚化してください」、「デバッグ ビューを構築してください」、「何が起こっているのかわかりません」、または不透明なシステム動作を可視化するためのリクエストを求められた場合に使用します。ステート マシン、データ フロー、イベント システム、アルゴリズム、レンダリング サイクル、アニメーション、CSS 計算、または隠された内部構造を持つあらゆるメカニズムに適用されます。 ソース: petekp/agent-skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/petekp/agent-skills --skill explanatory-playgroundシステムの内部動作を明らかにする対話型のデバッグ インターフェイスを構築します。 「これがどのように機能するかを理解するのを手伝ってください」、「何が起こっているのかを見せてください」、「状態を視覚化してください」、「デバッグ ビューを構築してください」、「何が起こっているのかわかりません」、または不透明なシステム動作を可視化するためのリクエストを求められた場合に使用します。ステート マシン、データ フロー、イベント システム、アルゴリズム、レンダリング サイクル、アニメーション、CSS 計算、または隠された内部構造を持つあらゆるメカニズムに適用されます。 ソース: petekp/agent-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/petekp/agent-skills --skill explanatory-playground インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/petekp/agent-skills