explanatory-playground

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.

Cree interfaces de depuración interactivas que revelen el comportamiento interno del sistema. Úselo cuando se le solicite "ayudarme a comprender cómo funciona esto", "muéstrame qué está sucediendo", "visualizar el estado", "crear una vista de depuración", "No puedo ver lo que está pasando" o cualquier solicitud para hacer visible el comportamiento opaco del sistema. Se aplica a máquinas de estado, flujo de datos, sistemas de eventos, algoritmos, ciclos de renderizado, animaciones, cálculos CSS o cualquier mecanismo con componentes internos ocultos. Fuente: petekp/agent-skills.