explanatory-playground
✓Créez des interfaces de débogage interactives qui révèlent le comportement interne du système. À utiliser lorsqu'on vous demande de « m'aider à comprendre comment cela fonctionne », « me montrer ce qui se passe », « visualiser l'état », « créer une vue de débogage », « je ne vois pas ce qui se passe » ou toute demande visant à rendre visible le comportement opaque du système. S'applique aux machines à états, aux flux de données, aux systèmes d'événements, aux algorithmes, aux cycles de rendu, aux animations, aux calculs CSS ou à tout mécanisme avec des composants internes cachés.
Installation
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.
Créez des interfaces de débogage interactives qui révèlent le comportement interne du système. À utiliser lorsqu'on vous demande de « m'aider à comprendre comment cela fonctionne », « me montrer ce qui se passe », « visualiser l'état », « créer une vue de débogage », « je ne vois pas ce qui se passe » ou toute demande visant à rendre visible le comportement opaque du système. S'applique aux machines à états, aux flux de données, aux systèmes d'événements, aux algorithmes, aux cycles de rendu, aux animations, aux calculs CSS ou à tout mécanisme avec des composants internes cachés. Source : petekp/claude-code-setup.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground- Source
- petekp/claude-code-setup
- Catégorie
- {}Analyse de Données
- Vérifié
- ✓
- Première apparition
- 2026-02-17
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que explanatory-playground ?
Créez des interfaces de débogage interactives qui révèlent le comportement interne du système. À utiliser lorsqu'on vous demande de « m'aider à comprendre comment cela fonctionne », « me montrer ce qui se passe », « visualiser l'état », « créer une vue de débogage », « je ne vois pas ce qui se passe » ou toute demande visant à rendre visible le comportement opaque du système. S'applique aux machines à états, aux flux de données, aux systèmes d'événements, aux algorithmes, aux cycles de rendu, aux animations, aux calculs CSS ou à tout mécanisme avec des composants internes cachés. Source : petekp/claude-code-setup.
Comment installer explanatory-playground ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/petekp/claude-code-setup
Détails
- Catégorie
- {}Analyse de Données
- Source
- skills.sh
- Première apparition
- 2026-02-17