Make Slides: AI-Powered Interactive Teaching Slides

Make Slides is a Claude Code skill that transforms lecture slides (PPTX, PDF, or plain topics) into self-contained, interactive HTML slide decks with Canvas visualizations, step-through animations, and challenge quizzes. No build system, no dependencies – just one HTML file per deck.

What It Does

The skill takes any lecture source material and produces interactive HTML decks that students navigate with arrow keys. Each deck is a single self-contained file with embedded CSS and JavaScript – no external dependencies, no build step, no server needed.

Architecture

The skill is actually two skills working together via a unified /make-slides command:

/make-slides <input>
      |
      v
+------------------+     +------------------+
| slide-generator  | --> | enhance-slides   |
| (Phase A)        |     | (Phase B)        |
| Extract content  |     | Add interactivity|
| Plan structure   |     | Canvas visuals   |
| Generate HTML    |     | Step-throughs    |
+------------------+     +------------------+
                               |
                               v
                    +------------------+
                    | Quality Audit    |
                    | (Phase C)        |
                    | 5-agent review   |
                    +------------------+

Key Design Principles

1. Canvas Over Everything

All visualizations use the HTML5 Canvas API – not SVG, not images, not ASCII art. Canvas provides:

• Smooth animations for step-through walkthroughs
• Color-coded states (green = accept, red = reject, amber = current)
• Interactive elements (click, hover, input-driven)

2. Step-Through Pattern

Complex concepts (algorithms, proofs, constructions) are presented as step-through walkthroughs with Prev/Next buttons:

+------------------------------------------+
|  Canvas visualization (changes each step)|
+------------------------------------------+
|  [<- Prev]  Step 3 / 5  [Next ->]       |
+------------------------------------------+
|  Plain-English explanation of this step   |
+------------------------------------------+

Each step shows both the visual change and a plain-English explanation of what happened and why. This is critical – a visualization without explanation doesn’t teach.

3. One Idea Per Slide

Dense slides get split. A slide should never contain both a definition AND its proof, or both a concept AND an exercise. Students process one thing at a time.

4. Dark Theme Framework

All decks share a consistent dark slate theme:

Enhancement Patterns

The skill matches content types to specific visualization patterns:

Pedagogical Rules

These rules were refined through iterating on CS305 automata theory slides:

1. Replace ASCII with Canvas – ASCII diagrams on dark backgrounds are unreadable
2. State claims before proofs – “Theorem: HALT is undecidable” in a box BEFORE proof steps
3. Explain jargon inline – brief callout box right where the term appears
4. Add “In plain English” columns – technical tables need a human-readable column
5. Three-card layouts for comparisons – side-by-side colored cards (green/amber/red)
6. Cut overly advanced content – if prerequisites haven’t been covered, remove it
7. Canvas walkthroughs for constructions – concrete example with color-coded parts

Self-Loop Fix (Automata Diagrams)

A critical Canvas rendering fix: self-loops on state diagrams must draw as nearly-complete circles, not small arc slivers.

// WRONG: renders as invisible sliver
ctx.arc(x, y, r, 0.3*Math.PI, 0.7*Math.PI);

// CORRECT: nearly complete circle, opening faces the state
ctx.arc(x, y, r, 0.8*Math.PI, 0.2*Math.PI);

Installation

# Clone the repo
git clone https://github.com/weihaoqu/make-slides-skill.git

# Run the installer (copies skills + command to ~/.claude/)
cd make-slides-skill && bash install.sh

Usage

# From Claude Code:
/make-slides path/to/lecture.pptx
/make-slides path/to/chapter.pdf
/make-slides "Turing Machines for CS305"

# Enhance an existing deck:
/make-slides path/to/tm-explained.html

The skill follows a plan-approve-build workflow:

1. Reads source and proposes a slide-by-slide plan
2. Waits for approval
3. Builds in 3 parts with checkpoint approval after each

Deployment

Enhanced decks are self-contained HTML files that can be served from anywhere:

# GitHub Pages
cp deck-enhanced.html /path/to/course-slides/cs305/
git add . && git commit && git push

# EC2 / any static host
scp deck-enhanced.html user@server:/path/to/slides/

How LearnAI Team Could Use This

• Interactive lecture upgrades — Convert existing CS and AI course decks into browser-based lessons with Canvas walkthroughs and checkpoint quizzes.
• Faculty slide production — Give instructors a repeatable Claude Code workflow for turning PPTX, PDF, or topic outlines into teachable HTML decks.
• Theory-heavy courses — Use step-through visualizations for automata, algorithms, proofs, data structures, and finance concepts.
• Course website publishing — Deploy self-contained HTML decks to GitHub Pages without a build pipeline.

Make Slides vs HTML PPT Studio

Both are Claude Code skills that generate HTML slide decks, but they solve different problems:

When to use which:

• Need step-through algorithm animation or interactive playground → Make Slides
• Need a quick pitch deck, conference talk, or themed presentation → HTML PPT Studio
• Need a lecture with Canvas walkthroughs and pedagogical structure → Make Slides
• Need presenter mode with speaker scripts → HTML PPT Studio

Real-World Use Cases

1. CS lectures — Turn static algorithm and automata slides into step-by-step visual explanations.
2. Exam review — Build challenge quizzes and interactive walkthroughs around common misconceptions.
3. Professional training — Convert internal training PDFs into single-file interactive web lessons.
4. Remote teaching — Publish self-contained decks that work in a browser without student setup.
5. Concept demos — Use Canvas playgrounds for data structures, state machines, proofs, and simulations.

Scale

Currently powering 79+ slide decks across 5 courses:

• CS205 Data Structures (15 decks)
• CS305 Theory of Computation (11 decks including TM, UTM, PnP)
• CS310 Advanced Programming
• CS336 Programming Languages
• BF422 Business Finance