Is the output mobile-responsive?

Yes, the generated guides are built with a mobile-first approach, featuring single-column layouts and touch-friendly navigation for small screens.

Can I customize the design of the generated guide?

Yes, the skill uses a standardized design system (design-system.md) and CSS tokens that can be easily modified within the generated Vite project to match your branding.

What technologies are used in the generated web app?

The skill scaffolds a modern Vite project using D3.js for interactive visualizations, Prism.js for syntax highlighting, and a custom editorial design system for typography and layout.

What input does this skill require?

It requires a Markdown study guide file, preferably following the structure of the codebase-study-guide template, though it can adapt to other formats by detecting heading content.

Interactive Study Guide

Name: Interactive Study Guide
Author: petekp

bypetekp

•

学习与文档

Transforms static Markdown documentation into immersive, editorial-grade web experiences with scroll-driven storytelling and interactive visualizations.

The Interactive Study Guide skill bridges the gap between dense technical documentation and effective learning by converting Markdown study guides into high-fidelity, Vite-powered single-page applications. Drawing inspiration from editorial features like those on Pudding.cool, it replaces static text with purposeful interactions including interactive D3 system maps, scroll-synced request walkthroughs, and animated code highlights. This tool is specifically designed for developers and teams who need to onboard others to complex codebases, providing a polished, pedagogical layer that reveals system architecture through progressive disclosure and high-end typographic design.

主要功能

01Automated Vite project scaffolding with integrated D3.js and Prism.js support.

02Persistent learning checklists with local storage to track onboarding progress.

03Scroll-driven narrative storytelling with sticky panels and waypoint-triggered reveals.

042 GitHub stars

05Interactive D3 force-directed graphs for visualizing architectural dependencies.

06Animated, step-by-step code walkthroughs with integrated syntax highlighting.

使用场景

01Transforming internal architecture documentation into engaging, interactive educational tools.

02Building public-facing interactive explainers for open-source libraries and frameworks.

03Creating high-impact onboarding experiences for new engineering hires on complex legacy systems.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petekp/agent-skills interactive-study-guide

For use in Claude.ai and ChatGPT

Download Skill