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.

Costruisci interfacce di debug interattive che rivelano il comportamento interno del sistema. Da utilizzare quando viene richiesto "aiutami a capire come funziona", "mostrami cosa sta succedendo", "visualizza lo stato", "crea una vista di debug", "non riesco a vedere cosa sta succedendo" o qualsiasi richiesta per rendere visibile il comportamento opaco del sistema. Si applica a macchine a stati, flusso di dati, sistemi di eventi, algoritmi, cicli di rendering, animazioni, calcoli CSS o qualsiasi meccanismo con interni nascosti. Fonte: petekp/agent-skills.