/slides

> Create animation-rich HTML presentations as zero-dependency single files.

Purpose

Build complete HTML slide presentations from scratch (given a topic or outline) or convert existing PowerPoint files. Uses a progressive disclosure pipeline: first discover content structure, then discover visual style, then generate the final output. Produces a single self-contained HTML file with CSS animations, transitions, and keyboard navigation. Includes anti-AI-slop guardrails to prevent generic bullet points, stock phrases, and over-animated nonsense.

Usage

bash
# Create from topic
/slides --topic "RAG Pipeline Architecture" --audience engineers

# Create from outline
/slides --outline outline.md --style dark --animations minimal

# Convert PowerPoint to HTML
/slides --convert deck.pptx

# Convert with style override
/slides --convert deck.pptx --style "glassmorphic dark" --enhance

# Create with specific slide count
/slides --topic "Q1 Results" --audience executives --slides 12

# Preview mode (generate 3 slides first)
/slides --topic "API Design" --preview

Arguments

| Flag | Type | Default | Description | |------|------|---------|-------------| | --topic | string | — | Presentation topic (for from-scratch generation) | | --outline | string | — | Path to markdown outline file | | --convert | string | — | Path to PowerPoint file (.pptx) to convert | | --audience | string | general | Target audience: engineers, executives, sales, general | | --style | string | clean | Visual style: clean, dark, glassmorphic, minimal, bold, or custom CSS description | | --animations | enum | moderate | Animation level: none, minimal, moderate, rich | | --slides | int | auto | Target slide count | | --enhance | flag | false | Enhance converted slides (improve layout, add animations) | | --preview | flag | false | Generate first 3 slides for review before completing | | --output | string | presentation.html | Output file path | | --aspect | enum | 16:9 | Aspect ratio: 16:9, 4:3 | | --notes | flag | false | Include speaker notes (visible with N key) |

Workflow

Phase 1: Content Discovery

1. Input analysis — Parse the topic, outline, or PowerPoint content. Extract key messages, data points, and narrative structure.
2. Structure — Organize into a slide outline: title slide, section headers, content slides, and closing. Apply the story arc: hook, context, core content, takeaway.
3. Content rules — Apply anti-AI-slop guardrails:

• No "In today's world..." or "Let's dive in" or "game-changer"
• Maximum 5 bullet points per slide (prefer 3)
• Every slide must have ONE clear takeaway
• Data slides must have actual data, not vague claims
• No orphan slides (every slide connects to the narrative)

Phase 2: Style Discovery

1. Audience calibration — Adjust density, jargon level, and visual style for the target audience. Engineers get technical detail. Executives get high-level with numbers.
2. Visual system — Define: color palette, typography scale, spacing system, and animation library. Derive from --style parameter.
3. Animation design — Map animations to content purpose: entrance (reveal information progressively), emphasis (highlight key point), transition (move between topics). Never animate for decoration.

Phase 3: Generation

1. Generate HTML — Build a single self-contained HTML file. Inline all CSS and JavaScript. No external dependencies. Include: slide navigation (arrow keys, click), progress indicator, fullscreen toggle (F key), speaker notes toggle (N key).
2. Animate — Apply CSS animations per the design. Use @keyframes and CSS transitions. Respect prefers-reduced-motion.
3. Polish — Final quality checks: consistent spacing, readable font sizes (minimum 24px body), proper contrast ratios, mobile-responsive, print stylesheet.
4. Output — Write the HTML file. Report slide count, file size, and feature list.

Examples

From-scratch presentation

/slides --topic "RAG Pipeline Architecture" --audience engineers --style dark --animations moderate

## Slides — RAG Pipeline Architecture

### Content Structure (12 slides)
1. Title: "RAG Pipeline Architecture"
2. Problem: Why vanilla LLMs fail on domain knowledge
3. Architecture overview: Retrieve → Augment → Generate
4. Retrieval deep-dive: Chunking strategies
5. Retrieval deep-dive: Embedding models + vector stores
6. Augmentation: Context assembly and ranking
7. Generation: Prompt construction with retrieved context
8. Evaluation: How to measure RAG quality
9. Failure modes: Common RAG pitfalls
10. Production considerations: Caching, latency, cost
11. Case study: Real metrics from production deployment
12. Takeaway + Resources

### Anti-slop checks
- ✓ No generic openers
- ✓ All slides have single takeaway
- ✓ Data slides contain specific numbers
- ✓ Animations serve content purpose

### Output
- File: presentation.html (47 KB)
- Slides: 12
- Animations: 23 (entrance: 15, emphasis: 5, transition: 3)
- Navigation: arrow keys, click, touch swipe
- Features: fullscreen (F), speaker notes (N), progress bar

Output

markdown
## Presentation Generated

- **File**: <path>.html
- **Slides**: N
- **File size**: N KB (zero dependencies)
- **Style**: <style>
- **Animations**: N total
- **Audience**: <audience>
- **Navigation**: Arrow keys, click, touch, fullscreen (F), notes (N)

### Slide Outline
1. <title> — <takeaway>
2. ...

### Quality Checks
- Anti-slop: PASS
- Contrast: PASS (WCAG AA)
- Motion: PASS (respects prefers-reduced-motion)
- Print: PASS (print stylesheet included)

Dependencies

• Content source (topic, outline, or .pptx file)
• For PowerPoint conversion: ability to parse .pptx XML
• File system for writing output HTML
• No runtime dependencies in the output file (fully self-contained)