frontend-slides

name	frontend-slides
description	Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file. Use when the user wants to build a presentation, convert a PPT to web format, or create slides for a talk, pitch, or demo. Shows 3 visual style previews before building the full deck — no design experience needed.

Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Core Principles

1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
2. Show, Don't Tell — Generate 3 visual previews before building. People discover what they want by seeing options, not describing them.
3. Distinctive Design — No generic slides. Every presentation must feel custom-crafted.
4. Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides ever. Content overflows? Split into multiple slides.

---

Workflow

Phase 1 — Gather Content

Ask the user:

1. "What's the topic and goal? (e.g. investor pitch, product demo, teaching a concept)"
2. "Who is the audience?"
3. "How many slides roughly?"
4. "Paste your content, bullets, or outline — OR share a .pptx file path to convert."

If a .pptx file is provided → jump to Phase 4 (PowerPoint Conversion) first, then return here.

---

Phase 2 — Style Selection (Always Do This)

Ask the user their vibe (multiselect, max 2):

• Impressed / Confident
• Excited / Energized
• Calm / Focused
• Inspired / Moved

Map their vibe to 3 distinct presets from this list and generate one single-slide HTML preview for each:

Preset	Feel
Bold Signal	Dark, high-contrast, confident
Electric Studio	Vibrant neon on dark, energized
Dark Botanical	Dark with organic texture, calm authority
Notebook Tabs	Light, handwritten-feel, approachable
Pastel Geometry	Soft colors, geometric shapes, friendly
Neon Cyber	Cyberpunk grid, glowing text, futuristic
Creative Voltage	Bold gradients, dynamic diagonals
Split Pastel	Two-tone split layout, modern editorial
Paper & Ink	Cream background, serif type, classic
Swiss Modern	Brutalist grid, red + black, no-nonsense
Vintage Editorial	Magazine-style, muted tones, typographic
Minimal Zen	White space, single accent color, clean

Save 3 preview files to .claude-design/slide-previews/ as style-a.html, style-b.html, style-c.html and open them.

Wait for the user to pick one (A, B, or C) — or ask to mix elements from two.

---

Phase 3 — Build the Full Deck

Using the chosen style, generate the complete single-file HTML presentation.

Slide structure rules:

• Every slide headline = one complete insight, not a topic label
  • Bad: "Market Opportunity"
  • Good: "The $4B SMB payroll market is 80% undigitized"
• Body supports the headline — never repeats it
• Max bullets/content per slide type:

Slide Type	Maximum Content
Title	1 heading + 1 subtitle + optional tagline
Content	1 heading + 4–6 bullets OR 2 paragraphs
Feature grid	1 heading + 6 cards max (2×3 or 3×2)
Code	1 heading + 8–10 lines of code
Quote	1 quote (max 3 lines) + attribution
Image	1 heading + 1 image (max 60vh)

Required slides:

1. Title slide
2. Agenda (for decks over 8 slides)
3. Content slides
4. Summary / So what

HTML requirements:

• Fully self-contained — no external CDN, no imports
• Keyboard navigation: arrow keys + spacebar
• Progress indicator
• Speaker notes in hidden <div> (toggle with N key)
• prefers-reduced-motion support

Viewport fitting (mandatory):

• Every .slide: height: 100vh; height: 100dvh; overflow: hidden;
• All font sizes: clamp(min, preferred, max) — never fixed px/rem
• Images: max-height: min(50vh, 400px)
• Media breakpoints at 700px, 600px, 500px height
• Never negate CSS functions directly — use calc(-1 * clamp(...))

Output the complete HTML file. Default filename: presentation.html.

---

Phase 4 — PowerPoint Conversion (if .pptx provided)

1. Run the extractor (auto-installs python-pptx if needed):

   pip install python-pptx -q
   python -c "
   from pptx import Presentation
   import json, sys
   prs = Presentation(sys.argv[1])
   slides = []
   for i, slide in enumerate(prs.slides):
       texts = [shape.text for shape in slide.shapes if shape.has_text_frame]
       slides.append({'slide': i+1, 'content': texts})
   print(json.dumps(slides, indent=2))
   " <path_to_pptx>
   

2. Confirm extracted slide titles, content summaries, and image counts with the user.
3. Proceed to Phase 2 for style selection.
4. Generate HTML preserving all text, slide order, and speaker notes (as HTML comments).

---

Optional Post-Build

Deploy to Vercel (requires Node + Vercel CLI):

vercel deploy ./presentation.html

Export to PDF (requires Node + Playwright):

npx playwright install chromium --with-deps
node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('file://' + require('path').resolve('presentation.html'));
  await page.pdf({ path: 'presentation.pdf', printBackground: true });
  await browser.close();
  console.log('Saved: presentation.pdf');
})();
"

---

Source

Based on frontend-slides by Zara Zhang Rui.