interactive-study-guide
Interactive Study Guide
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.
Guiding Principles
- Restraint over spectacle. Every animation must earn its place by revealing something the static text cannot. Avoid gratuitous motion.
- Content determines form. Each section gets the layout and interactivity best suited to its content type — never force a visualization where prose works better.
- Scroll as narrative. The primary interaction is scrolling. Use scroll-driven reveals, sticky elements, and waypoint transitions to create a reading rhythm.
- Typographic confidence. Large serif headings, measured line lengths, and ample vertical rhythm. The text itself should feel beautiful before any interactivity loads.
- Progressive enhancement. The page is readable and useful even if JavaScript fails. Interactivity layers on top.
Workflow
Step 1: Locate and Parse the Study Guide
Accept a path to the study guide markdown file. Parse it into structured sections using the known template format from codebase-study-guide:
More from petekp/claude-code-setup
code-comments
Write clear, plain-spoken code comments and documentation that lives alongside the code. Use when writing or reviewing code that needs inline documentation—file headers, function docs, architectural decisions, or explanatory comments. Optimized for both human readers and AI coding assistants who benefit from co-located context.
139design-critique
Critique UI/UX designs for clarity, hierarchy, interaction, accessibility, and craft. Use for design reviews, PR feedback on UI changes, evaluating mockups, checking if a component is ship-ready, or when honest feedback is needed on whether something meets a high bar.
46personality-profiler
Generate rich personality profiles from social media data exports (Twitter/X, LinkedIn, Instagram). Use when a user wants to analyze their social media presence, create a personality profile for AI personalization, understand their communication patterns, or extract insights from their digital footprint. Triggers on requests like "analyze my Twitter data", "create a personality profile", "what can you learn about me from my posts", "personalize an AI for me", or when users provide social media export files.
40swiftui
Use when building SwiftUI interfaces for iOS, iPadOS, macOS, or visionOS. Triggers on Liquid Glass adoption, SwiftUI animation/transitions, layout patterns, state management, design tokens, performance optimization, accessibility in SwiftUI, or creating "Apple-level" UI quality.
39deep-research
|
36unix-macos-engineer
Expert Unix and macOS systems engineer for shell scripting, system administration, command-line tools, launchd, Homebrew, networking, and low-level system tasks. Use when the user asks about Unix commands, shell scripts, macOS system configuration, process management, or troubleshooting system issues.
36