explanatory-playground
✓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.
Instalación
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.
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/claude-code-setup.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground- Fuente
- petekp/claude-code-setup
- Categoría
- {}Análisis de Datos
- Verificado
- ✓
- Primera vez visto
- 2026-02-17
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es explanatory-playground?
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/claude-code-setup.
¿Cómo instalo explanatory-playground?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/petekp/claude-code-setup
Detalles
- Categoría
- {}Análisis de Datos
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-17