·explanatory-playground
{}

explanatory-playground

✓
petekp/agent-skillsGitHub: petekp/agent-skillsSource: petekp/agent-skills

Build interactive debugging interfaces that reveal internal system behavior. Use when asked to "help me understand how this works", "show me what's happening", "visualize the state", "build a debug view", "I can't see what's going on", or any request to make opaque system behavior visible. Applies to state machines, data flow, event systems, algorithms, render cycles, animations, CSS calculations, or any mechanism with hidden internals.

petekp·explanatory·playground
11Installs·0Trend·@petekp

Installation

GitHub: petekp/agent-skills
$npx skills add https://github.com/petekp/agent-skills --skill explanatory-playground

How to Install explanatory-playground

Quickly install explanatory-playground AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/petekp/agent-skills --skill explanatory-playground
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: petekp/agent-skills.

SKILL.md

View raw

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.

Build interactive debugging interfaces that reveal internal system behavior. Use when asked to "help me understand how this works", "show me what's happening", "visualize the state", "build a debug view", "I can't see what's going on", or any request to make opaque system behavior visible. Applies to state machines, data flow, event systems, algorithms, render cycles, animations, CSS calculations, or any mechanism with hidden internals. Source: petekp/agent-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/petekp/agent-skills --skill explanatory-playground
Source
petekp/agent-skills
Category
{}Data Analysis
Verified
✓
First Seen
2026-02-24
Updated
2026-03-11
URL
https://www.learn-skills.dev/en/skills/petekp/agent-skills/explanatory-playground

Browse more skills from petekp/agent-skills

Quick answers

What is explanatory-playground?

Build interactive debugging interfaces that reveal internal system behavior. Use when asked to "help me understand how this works", "show me what's happening", "visualize the state", "build a debug view", "I can't see what's going on", or any request to make opaque system behavior visible. Applies to state machines, data flow, event systems, algorithms, render cycles, animations, CSS calculations, or any mechanism with hidden internals. Source: petekp/agent-skills.

How do I install explanatory-playground?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/petekp/agent-skills --skill explanatory-playground Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/petekp/agent-skills

Details

Category
{}Data Analysis
Source
skills.sh
First Seen
2026-02-24

Related Skills

macos-app-design
151 Installs
typography
111 Installs
unix-macos-engineer
46 Installs
interaction-design
32 Installs
autonomous-agent-readiness
29 Installs
capture-learning
27 Installs