frontend-slides

name	frontend-slides
description	Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Frontend Slides Skill

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks.

Core Philosophy

1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
2. Show, Don't Tell — People don't know what they want until they see it. Generate visual previews, not abstract choices.
3. Distinctive Design — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
4. Production Quality — Code should be well-commented, accessible, and performant.
5. Viewport Fitting (CRITICAL) — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever. This is non-negotiable.

---

CRITICAL: Viewport Fitting Requirements

This section is mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.

The Golden Rule

Each slide = exactly one viewport height (100vh/100dvh)
Content overflows? → Split into multiple slides or reduce content
Never scroll within a slide.

Content Density Limits

To guarantee viewport fitting, enforce these limits per slide:

Slide Type	Maximum Content
Title slide	1 heading + 1 subtitle + optional tagline
Content slide	1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs
Feature grid	1 heading + 6 cards maximum (2x3 or 3x2 grid)
Code slide	1 heading + 8-10 lines of code maximum
Quote slide	1 quote (max 3 lines) + attribution
Image slide	1 heading + 1 image (max 60vh height)

If content exceeds these limits → Split into multiple slides

Required CSS Architecture

Every presentation MUST include this base CSS for viewport fitting:

/* VIEWPORT FITTING: MANDATORY BASE STYLES */

html, body {
    height: 100%;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    position: relative;
}

.slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
    padding: var(--slide-padding);
}

:root {
    --title-size: clamp(1.5rem, 5vw, 4rem);
    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
    --small-size: clamp(0.65rem, 1vw, 0.875rem);
    --slide-padding: clamp(1rem, 4vw, 4rem);
    --content-gap: clamp(0.5rem, 2vw, 2rem);
    --element-gap: clamp(0.25rem, 1vw, 1rem);
}

.card, .container, .content-box {
    max-width: min(90vw, 1000px);
    max-height: min(80vh, 700px);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

img, .image-container {
    max-width: 100%;
    max-height: min(50vh, 400px);
    object-fit: contain;
}

@media (max-height: 700px) {
    :root {
        --slide-padding: clamp(0.75rem, 3vw, 2rem);
        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
        --h2-size: clamp(1rem, 3vw, 1.75rem);
    }
}

@media (max-height: 600px) {
    :root {
        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
        --title-size: clamp(1.1rem, 4vw, 2rem);
        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
    }
    .nav-dots, .keyboard-hint, .decorative { display: none; }
}

@media (max-height: 500px) {
    :root {
        --slide-padding: clamp(0.4rem, 2vw, 1rem);
        --title-size: clamp(1rem, 3.5vw, 1.5rem);
        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
        --body-size: clamp(0.65rem, 1vw, 0.85rem);
    }
}

@media (max-width: 600px) {
    :root { --title-size: clamp(1.25rem, 7vw, 2.5rem); }
    .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
    html { scroll-behavior: auto; }
}

When Content Doesn't Fit

DO: Split into multiple slides, reduce bullets (max 5-6), shorten text, create "continued" slides. DON'T: Reduce font below readable limits, remove padding, allow scrolling, cram content.

---

Phase 0: Detect Mode

• Mode A: New Presentation → Phase 1 (Content Discovery)
• Mode B: PPT Conversion → Phase 4 (PPT Extraction)
• Mode C: Existing Enhancement → Read file, understand structure, enhance

---

Phase 1: Content Discovery (New Presentations)

Ask about:

1. Purpose — Pitch deck / Teaching / Conference talk / Internal presentation
2. Slide Count — Short (5-10) / Medium (10-20) / Long (20+)
3. Content — Ready / Rough notes / Topic only

---

Phase 2: Style Discovery (Visual Exploration)

Show, don't tell. Generate visual previews, not abstract choices.

Available Presets

Preset	Vibe	Best For
Bold Signal	Confident, high-impact	Pitch decks, keynotes
Electric Studio	Clean, professional	Agency presentations
Creative Voltage	Energetic, retro-modern	Creative pitches
Dark Botanical	Elegant, sophisticated	Premium brands
Notebook Tabs	Editorial, organized	Reports, reviews
Pastel Geometry	Friendly, approachable	Product overviews
Split Pastel	Playful, modern	Creative agencies
Vintage Editorial	Witty, personality-driven	Personal brands
Neon Cyber	Futuristic, techy	Tech startups
Terminal Green	Developer-focused	Dev tools, APIs
Swiss Modern	Minimal, precise	Corporate, data
Paper & Ink	Literary, thoughtful	Storytelling

Mood → Style Mapping

Mood	Style Options
Impressed/Confident	Bold Signal, Electric Studio, Dark Botanical
Excited/Energized	Creative Voltage, Neon Cyber, Split Pastel
Calm/Focused	Notebook Tabs, Paper & Ink, Swiss Modern
Inspired/Moved	Dark Botanical, Vintage Editorial, Pastel Geometry

Workflow

1. Ask: "Show me options" vs "I know what I want"
2. If guided: ask about desired feeling, generate 3 HTML previews
3. User picks favorite or mixes elements
4. Proceed to generation

Preview Output

Create previews in workspace as single-slide HTML files showing typography, colors, animations, and overall aesthetic. Each ~50-100 lines, self-contained.

NEVER use: Purple gradients on white, Inter/Roboto/system fonts, standard blue primaries, predictable hero layouts.

---

Phase 3: Generate Presentation

File Structure

presentation.html    # Self-contained
assets/              # Images if any

Required Features

• SlidePresentation class — keyboard nav (arrows, space), touch/swipe, mouse wheel, progress bar, nav dots
• Intersection Observer — scroll-triggered animations with .visible class
• Optional enhancements — custom cursor, particles, parallax, 3D tilt, magnetic buttons, counter animations

Code Quality

• Well-commented sections
• Semantic HTML, ARIA labels
• Keyboard accessible
• Reduced motion support
• All sizes use clamp()

---

Phase 4: PPT Conversion

1. Extract content with python-pptx (text, images, notes)
2. Confirm extracted content with user
3. Style selection (Phase 2)
4. Generate HTML preserving all assets

---

Phase 5: Delivery

1. Clean up temporary preview files
2. Open presentation in browser
3. Provide summary with navigation instructions and customization tips

---

Effect → Feeling Reference

Feeling	Techniques
Dramatic/Cinematic	Slow fades (1-1.5s), scale transitions, dark + spotlight, parallax
Techy/Futuristic	Neon glow, particles, grid patterns, monospace accents, glitch effects
Playful/Friendly	Bouncy easing, rounded corners, pastels, floating animations
Professional/Corporate	Subtle fast animations (200-300ms), clean sans-serif, precise spacing
Calm/Minimal	Very slow subtle motion, high whitespace, muted palette, serif typography
Editorial/Magazine	Strong type hierarchy, pull quotes, grid-breaking layouts, B&W + one accent

---

Style Presets Reference

See STYLE_PRESETS.md in this skill directory for full color specs, font pairings, and signature elements for all 12 presets.