interactive-study-guide_skill

Overview

This skill transforms a completed study guide markdown file into a polished, interactive single‑page web app served by Vite. It converts each study guide section into purpose-built visual and interactive components (scroll-driven storytelling, diagrams, animated code walkthroughs) while preserving readable prose and progressive enhancement. The result is an editorial-quality learning experience optimized for clarity and pedagogy.

How this skill works

Provide the path to a study guide markdown file; the skill parses the guide into structured sections using heading detection and the expected codebase-study-guide patterns. It scaffolds a Vite project, maps each section to a tailored interactive component (D3 graphs, sticky walkthroughs, expandable cards, checklists), and wires navigation, scroll-driven transitions, and persistence for interactive elements. The output is a local dev project you run with the Vite dev server.

When to use it

• You have a finished study guide markdown from codebase-study-guide or similar.
• You want a richer, interactive presentation for onboarding or documentation reviews.
• You need scroll-driven narrative and visualizations to explain system structure and flows.
• You want a local, editable web app for team walkthroughs or demos.
• You prefer progressive enhancement so content reads without JavaScript.

Best practices

• Keep animations purposeful and explanatory; avoid decorative motion.
• Let prose determine layout—use visuals only where they illuminate structure or flow.
• Respect prefers-reduced-motion and ensure the page is fully usable without JS.
• Follow the editorial design tokens for typography, spacing, and color for visual consistency.
• Test on mobile; use single-column fallbacks and touch-friendly controls.

Example use cases

• Convert a codebase study guide into an interactive onboarding app for new engineers.
• Create a scroll-driven request walkthrough to accompany a design review or RFC.
• Produce an interactive system map that links nodes to deep-dive tabs for architecture sessions.
• Add animated code walkthroughs and checklists for bootcamp-style learning modules.
• Generate a reusable Vite project skeleton that your docs team can iterate on locally.