explanatory-playground

SKILL.md

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/claude-code-setup。

原文を見る