Create beautiful HTML/CSS presentation slides. Use when the user wants to build a slide deck, presentation, or visual slideshow in HTML/CSS. Supports importing from PPTX, applying style presets, and adding animations.
Create polished, interactive HTML/CSS presentation slides with viewport-based layouts, style presets, and smooth animations.
This skill produces self-contained HTML files — one file per slide deck — that run in any browser without dependencies. Slides use viewport units for resolution-independent rendering.
Make a todo list for all the tasks in this workflow and work through them one by one.
From scratch: Ask the user for:
From PPTX: If the user provides a .pptx file, run the extraction script:
python3 ~/.claude/skills/frontend-slides/scripts/extract-pptx.py <file.pptx>
This outputs structured JSON with slide titles, body text, speaker notes, and image references.
Refer to STYLE_PRESETS.md for available presets:
dark-pro — Dark background, vibrant accents (default)light-clean — White background, minimal designgradient-bold — Full-bleed gradient backgroundscorporate — Navy/gray professional paletteneon — Dark with neon highlightsApply the preset's CSS variables to the :root block in the output file.
Use the template in html-template.md as the starting point.
Key rules:
vw, vh, vmin) for all sizing — never px for layout<section class="slide"> inside <div class="deck">viewport-base.css inline in <style>Refer to animation-patterns.md for reusable entrance, transition, and emphasis animations. Apply them via CSS classes or inline style attributes.
Default: fade-in on slide enter, staggered list item reveals.
Write the completed slide deck to the project directory:
<project-root>/slides/<deck-name>.html
Open it in the browser to preview:
open slides/<deck-name>.html # macOS
xdg-open slides/<deck-name>.html # Linux
Ask the user if they want to:
Ctrl+P → Save as PDF, landscape)| Type | Class | Purpose |
|---|---|---|
| Title slide | slide--title | Opening / section divider |
| Content | slide--content | Bullet points, text |
| Two-column | slide--two-col | Side-by-side content |
| Image full | slide--image-full | Full-bleed background image |
| Code | slide--code | Syntax-highlighted code block |
| Quote | slide--quote | Pull quote / highlight |
| Stats | slide--stats | Big numbers / metrics |
| Closing | slide--closing | Thank you / CTA |
<strong> for key terms, not entire sentences<pre><code class="language-*"> — the template includes highlight.js inline styles<aside class="notes"> inside each <section> (hidden from view)