·interactive-study-guide
#

interactive-study-guide

Transform a codebase study guide into a polished interactive web experience. This skill should be used when the user has a completed study guide markdown file (from codebase-study-guide or similar) and wants to turn it into an interactive pedagogical app. Triggers on requests like "make this study guide interactive", "turn this into an interactive experience", "visualize this study guide", "create an interactive version", or when a user has a study guide .md file and wants a richer presentation. Produces a Vite-served single-page app with scroll-driven storytelling, interactive architecture diagrams, animated code walkthroughs, and progressive disclosure.

13Installs·1Trend·@petekp

Installation

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

How to Install interactive-study-guide

Quickly install interactive-study-guide AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/petekp/agent-skills --skill interactive-study-guide
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: petekp/agent-skills.

SKILL.md

View raw

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 |

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/petekp/agent-skills --skill interactive-study-guide
Category
#Documents
Verified
First Seen
2026-02-24
Updated
2026-03-10

Browse more skills from petekp/agent-skills

Quick answers

What is interactive-study-guide?

Transform a codebase study guide into a polished interactive web experience. This skill should be used when the user has a completed study guide markdown file (from codebase-study-guide or similar) and wants to turn it into an interactive pedagogical app. Triggers on requests like "make this study guide interactive", "turn this into an interactive experience", "visualize this study guide", "create an interactive version", or when a user has a study guide .md file and wants a richer presentation. Produces a Vite-served single-page app with scroll-driven storytelling, interactive architecture diagrams, animated code walkthroughs, and progressive disclosure. Source: petekp/agent-skills.

How do I install interactive-study-guide?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/petekp/agent-skills --skill interactive-study-guide Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/petekp/agent-skills