·interactive-study-guide
#

interactive-study-guide

Transformez un guide d'étude de base de code en une expérience Web interactive raffinée. Cette compétence doit être utilisée lorsque l'utilisateur dispose d'un fichier de démarque de guide d'étude terminé (à partir de codebase-study-guide ou similaire) et souhaite le transformer en une application pédagogique interactive. Se déclenche sur des requêtes telles que « rendre ce guide d'étude interactif », « transformer cela en une expérience interactive », « visualiser ce guide d'étude », « créer une version interactive » ou lorsqu'un utilisateur dispose d'un fichier .md de guide d'étude et souhaite une présentation plus riche. Produit une application d'une seule page diffusée par Vite avec une narration par défilement, des diagrammes d'architecture interactifs, des procédures pas à pas de code animées et une divulgation progressive.

9Installations·1Tendance·@petekp

Installation

$npx skills add https://github.com/petekp/claude-code-setup --skill interactive-study-guide

Comment installer interactive-study-guide

Installez rapidement le skill IA interactive-study-guide dans votre environnement de développement via la ligne de commande

  1. Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
  2. Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/petekp/claude-code-setup --skill interactive-study-guide
  3. Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Source : petekp/claude-code-setup.

Transform a static study guide markdown file into an immersive, interactive learning experience served as a local web app. The output should feel like a NYT interactive feature or a Pudding.cool essay — editorial typography, generous whitespace, purposeful animation, and visualizations that reveal structure rather than decorate.

Accept a path to the study guide markdown file. Parse it into structured sections using the known template format from codebase-study-guide:

| Purpose | ## 1. Why This Exists | Prose with problem/approach/users | | Threshold Concepts | ## 2. The Big Ideas | Named concepts with code locations | | System Map | ## 3. System Map | Mermaid diagram + table | | Request Walkthrough | ## 4. Walking Through a Request | Sequence diagram + annotated code steps |

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 interactive-study-guide
Catégorie
#Documents
Vérifié
Première apparition
2026-03-10
Mis à jour
2026-03-10

Browse more skills from petekp/claude-code-setup

Réponses rapides

Qu'est-ce que interactive-study-guide ?

Transformez un guide d'étude de base de code en une expérience Web interactive raffinée. Cette compétence doit être utilisée lorsque l'utilisateur dispose d'un fichier de démarque de guide d'étude terminé (à partir de codebase-study-guide ou similaire) et souhaite le transformer en une application pédagogique interactive. Se déclenche sur des requêtes telles que « rendre ce guide d'étude interactif », « transformer cela en une expérience interactive », « visualiser ce guide d'étude », « créer une version interactive » ou lorsqu'un utilisateur dispose d'un fichier .md de guide d'étude et souhaite une présentation plus riche. Produit une application d'une seule page diffusée par Vite avec une narration par défilement, des diagrammes d'architecture interactifs, des procédures pas à pas de code animées et une divulgation progressive. Source : petekp/claude-code-setup.

Comment installer interactive-study-guide ?

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 interactive-study-guide Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Où se trouve le dépôt source ?

https://github.com/petekp/claude-code-setup