All 12 formats at a glance
Never manually create a PowerPoint or Google Slide again.
Just give /slides an outline to start.
Use Chart.js to display live, interactive charts.
Paste an image in chat and Claude drops it right into your slide.
Beautiful animations for transitions and illustrations.
The agent checks its work against the design guidelines.
All slides render from a single HTML file.
Pair a tight sentence with a real visual. Use this when you want a screenshot, mock, or chart to do the heavy lifting alongside one clear point.
Use this for KPIs and big numbers. Each stat counts up from zero when the slide appears.
Use this when you need to contrast two options or show tradeoffs side by side.
Use this for a multi-stage process or workflow — three to four steps connected by arrows.
Give it the topic and get the slide plan.
Every format renders under any template.
Visual QA catches any layout issues.
Use this to walk through milestones across quarters or sprints — past, present, and next.
Placeholder description for the past quarter.
Placeholder description for what landed.
Placeholder for the in-flight quarter.
Placeholder for the next bet.
Use this for tutorials and technical walkthroughs where the snippet is the visual.
// in Claude Code:
> /slides
// topic?
> Q4 strategy review
// template?
> default
✓ 8 slides generated
✓ Visual QA passed
→ output/slides/q4-review.htmlUse this to anchor your message with a powerful testimonial or pull-quote.
Placeholder · Quote format
Use this when the deck needs quantitative substance. Charts render with Chart.js and inherit the deck's accent color.
Warm cream paper, ink-black serif headlines, signature red accent. The editorial cover feel.
Pure black with bright accents and sans-serif type. Bold and contemporary — great for tech talks.
Apple-clean white background, sans-serif headlines, generous whitespace. Minimal and refined.
A 6-step workflow that turns one prompt into a polished deck.
Claude reads the workflow and the visual style guide before doing anything else.
2-3 quick questions to lock the angle and audience.
Pull facts, quotes, and stats from your sources.
Build a single self-contained HTML file using the formats.
Render every slide as PNG and inspect for layout bugs.
Open in Chrome. Ready to present or share.
---
name: slides
description: Create a beautiful HTML slide deck. Use when the user wants to make
a presentation, pitch deck, talk slides, or slide deck. Guides them through
content and style, then generates a single self-contained HTML file.
---
# Slides
Create zero-dependency HTML slide decks that run in the browser. Single HTML
file, no build tools, no frameworks.
## Step 1: Clarifying questions
Use AskUserQuestion to ask 4 questions in a single call:
1. "Do you have content ready, or just a topic?"
2. "How many slides?" — Short (5-8) / Medium (10-15) / Long (20+)
3. "Which style?" — Brand / Dark / Light / Dark corporate
4. Pick 1 more based on context (audience, purpose, key takeaway...)
## Step 2: Online research
Use AskUserQuestion to ask: "Want me to research anything?"