explanatory-playground
✓建構揭示內部系統行為的互動式調試介面。當被要求「幫助我理解這是如何運作的」、「告訴我發生了什麼」、「視覺化狀態」、「建立偵錯視圖」、「我看不到發生了什麼」或任何使不透明的系統行為可見的請求時使用。適用於狀態機、資料流、事件系統、演算法、渲染週期、動畫、CSS 計算或任何具有隱藏內部結構的機制。
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。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground- 分類
- {}資料分析
- 認證
- ✓
- 收錄時間
- 2026-02-17
- 更新時間
- 2026-02-18
快速解答
什麼是 explanatory-playground？
建構揭示內部系統行為的互動式調試介面。當被要求「幫助我理解這是如何運作的」、「告訴我發生了什麼」、「視覺化狀態」、「建立偵錯視圖」、「我看不到發生了什麼」或任何使不透明的系統行為可見的請求時使用。適用於狀態機、資料流、事件系統、演算法、渲染週期、動畫、CSS 計算或任何具有隱藏內部結構的機制。 來源：petekp/claude-code-setup。
如何安裝 explanatory-playground？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/petekp/claude-code-setup
詳情
- 分類
- {}資料分析
- 來源
- skills.sh
- 收錄時間
- 2026-02-17