Frontend Slides

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:

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:

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.