Stop Making
PowerPoints
How AI turns a rough outline into a beautiful, interactive HTML deck — no slide software required.
It's not a PowerPoint. It's a website.
Frontend Slides is a Claude Code skill that turns your outline into a self-contained HTML deck — with all the interactivity a normal slide format can't touch.
Click to enlarge
Any image or video expands in place — no separate viewer needed.
Rich embeds
Images, video, and even live links drop straight into a slide.
Live navigation
Hover the nav dots to preview the title of every page before you jump.
Small delights
A laser-pointer cursor and click-to-reveal content — details PowerPoint can't do.
Five steps from idea to deck
You bring the content. The agent handles design, layout, and self-correction.
Install the skill
Send the agent the GitHub link once. Done.
Describe your content
Paste a full outline, rough notes, or just a topic.
Answer 4 questions
Purpose, length, content, density — locks in context up front.
Pick a cover design
Choose from 3 generated title-slide previews.
Full deck generated
The agent screenshots each slide and self-corrects mistakes.
Context up front, or you get slop
Four questions, asked before a single slide is built — because the model needs enough context or it defaults to generic output.
| Question | Options | Why it matters |
|---|---|---|
| Purpose | Pitch / Teaching / Conference talk / Internal | Sets the tone and level of formality before any design choice is made. |
| Length | Short / Medium / Long | Determines pacing and how much ground each slide needs to cover. |
| Content | Ready / Rough notes / Topic only | Tells the agent whether to transcribe, structure, or draft from scratch. |
| Density | Speaker-led / Reading-first | Locks in slide count, type scale, and how much text lives on each slide. |
Feedback without touching code
Once you've got a draft, refining it is just conversation — or a direct annotation on the slide itself.
Screenshot + describe
Show the agent a slide and describe the change in plain language.
Annotate directly
In the Claude or Codex desktop app, mark up the slide itself with targeted comments.
Insert media by file path
Drop files in a folder and send the exact path — sending the image alone won't work. On Mac: Finder → View → Show Path Bar, then right-click "Copy as Pathname."
Present it, or ship it as a real URL
The deck is a single HTML file that holds up on any device — and it doesn't have to stay local.
Open in any browser
No install, no viewer app. Format holds up on laptops, tablets, and phones as-is.
Deploy with Vercel (or Netlify)
Free account, connect once, ship a live link in minutes — the cleaner option when the audience shouldn't have to open a random file.
Just tell the agent: "deploy this deck with Vercel (or Netlify)." That's the whole instruction.
Three things this skill taught its builder
22,000+ GitHub stars later, here's what stood out.
Skills replace apps
No new interface to learn — the capability comes to you, inside the tool you already use.
Skills personalize software
The agent is the middle layer — a user just asks it to change a default, no feature request needed.
HTML is the model's native output
Markdown is friendly to the model on input; HTML is friendly to everyone on output.
You don't start with a skill.
You end with one.
Build the workflow first — tweak it round after round until it hits your standard — and only then freeze it into something an agent can run for anyone.
So here's the question worth sitting with: why does your next presentation have to be a PowerPoint?