enhance-slides

enhance-slides-plugin

A Claude Code plugin that transforms lecture slides from any format (PPTX, PDF, or HTML) into interactive learning experiences with Canvas visualizations, step-through animations, and challenge quizzes.

What It Does

The /enhance-slides skill takes lecture slides and creates a self-contained interactive HTML deck with:

• Canvas visualizations — trees, graphs, arrays, bar charts drawn with Canvas API
• Step-through animations — Step/Auto Play/Reset controls synced with code highlighting
• Interactive playgrounds — students input values and watch data structures respond
• Inline challenges — predict outcomes, fix bugs, choose the right approach
• Final quiz section — multi-question quiz, trace exercises, predict-output problems
• Standalone exercise apps — self-paced quiz apps with timer, scoring, and submission

Supported Input Formats

Format	What Happens
PPTX	Extracts slide content, plans enhanced deck, builds with interactive visualizations
PDF	Reads pages in chunks, extracts content, builds enhanced deck
HTML	Analyzes existing slides, adds Canvas animations and challenges

For PPTX/PDF sources, the skill doesn't just convert — it enhances: adding depth, analogies, warnings, and "why" explanations that raw slides often lack.

Install

# Add the marketplace
/plugin marketplace add weihaoqu/enhance-slides-plugin

# Install the plugin
/plugin install enhance-slides

Usage

# Enhance from PPTX (extracts content, builds interactive deck)
/enhance-slides path/to/lecture.pptx

# Enhance from PDF
/enhance-slides path/to/slides.pdf

# Enhance from existing HTML deck
/enhance-slides path/to/my-slides.html

# Build a specific part (for incremental review)
/enhance-slides path/to/my-slides.html part 2

# Generate a standalone exercise app
/enhance-slides path/to/my-slides.html exercise

How It Works

1. Extract — reads your source file (PPTX, PDF, or HTML), extracts all content
2. Plan — proposes a 3-part build with enhancement types for each slide, with source mapping
3. Build — implements one part at a time, waiting for your approval between parts

Enhancement Decision Table

Content Type	Enhancement
Algorithm walkthrough	Step-through with Canvas + code sync
Data structure operations	Interactive playground
Code example	Code block with line highlighting
Comparison	Side-by-side Canvas with toggle
After teaching sections	Inline challenge (predict/fix/decide)
Pure definition	Static with formatted callouts

What Gets Generated

Each enhanced deck is a single self-contained HTML file — no build tools, no dependencies, no server needed. Students just open the file in a browser.

• Dark theme (#0f172a background)
• ~24 slides with navigation (arrow keys + buttons)
• Progress bar at top
• All JavaScript encapsulated in IIFEs
• Canvas redraws automatically when navigating between slides

Output File Naming

• sorting.pptx → sorting-enhanced.html
• chapter5.pdf → chapter5-enhanced.html
• trees-explained.html → trees-enhanced.html

Built With This Plugin

15 CS205 Data Structures enhanced decks covering: Linked Lists, Algorithm Analysis, Recursion, Stacks, Queues, ArrayLists, Priority Queues, Heaps, Maps, Hash Tables, Trees, Graphs, BFS, DFS, Shortest Path

License

MIT