Frontend Slides

1---
2name: frontend-slides
3description: 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.
4---
5 
6# Frontend Slides Skill
7 
8Create 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.
9 
10## Core Philosophy
11 
121. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.
132. **Show, Don't Tell** — People don't know what they want until they see it. Generate visual previews, not abstract choices.
143. **Distinctive Design** — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
154. **Production Quality** — Code should be well-commented, accessible, and performant.
165. **Viewport Fitting (CRITICAL)** — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever. This is non-negotiable.
17 
18---
19 
20## CRITICAL: Viewport Fitting Requirements
21 
22**This section is mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.**
23 
24### The Golden Rule
25 
26```
27Each slide = exactly one viewport height (100vh/100dvh)
28Content overflows? → Split into multiple slides or reduce content
29Never scroll within a slide.
30```
31 
32### Content Density Limits
33 
34To guarantee viewport fitting, enforce these limits per slide:
35 
36| Slide Type | Maximum Content |
37|------------|-----------------|
38| Title slide | 1 heading + 1 subtitle + optional tagline |
39| Content slide | 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs |
40| Feature grid | 1 heading + 6 cards maximum (2x3 or 3x2 grid) |
41| Code slide | 1 heading + 8-10 lines of code maximum |
42| Quote slide | 1 quote (max 3 lines) + attribution |
43| Image slide | 1 heading + 1 image (max 60vh height) |
44 
45**If content exceeds these limits → Split into multiple slides**
46 
47### Required CSS Architecture
48 
49Every presentation MUST include this base CSS for viewport fitting:
50 
51```css
52/* ===========================================
53   VIEWPORT FITTING: MANDATORY BASE STYLES
54   These styles MUST be included in every presentation.
55   They ensure slides fit exactly in the viewport.
56   =========================================== */
57 
58/* 1. Lock html/body to viewport */
59html, body {
60    height: 100%;
61    overflow-x: hidden;
62}
63 
64html {
65    scroll-snap-type: y mandatory;
66    scroll-behavior: smooth;
67}
68 
69/* 2. Each slide = exact viewport height */
70.slide {
71    width: 100vw;
72    height: 100vh;
73    height: 100dvh; /* Dynamic viewport height for mobile browsers */
74    overflow: hidden; /* CRITICAL: Prevent ANY overflow */
75    scroll-snap-align: start;
76    display: flex;
77    flex-direction: column;
78    position: relative;
79}
80 
81/* 3. Content container with flex for centering */
82.slide-content {
83    flex: 1;
84    display: flex;
85    flex-direction: column;
86    justify-content: center;
87    max-height: 100%;
88    overflow: hidden; /* Double-protection against overflow */
89    padding: var(--slide-padding);
90}
91 
92/* 4. ALL typography uses clamp() for responsive scaling */
93:root {
94    /* Titles scale from mobile to desktop */
95    --title-size: clamp(1.5rem, 5vw, 4rem);
96    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
97    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
98 
99    /* Body text */
100    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
101    --small-size: clamp(0.65rem, 1vw, 0.875rem);
102 
103    /* Spacing scales with viewport */
104    --slide-padding: clamp(1rem, 4vw, 4rem);
105    --content-gap: clamp(0.5rem, 2vw, 2rem);
106    --element-gap: clamp(0.25rem, 1vw, 1rem);
107}
108 
109/* 5. Cards/containers use viewport-relative max sizes */
110.card, .container, .content-box {
111    max-width: min(90vw, 1000px);
112    max-height: min(80vh, 700px);
113}
114 
115/* 6. Lists auto-scale with viewport */
116.feature-list, .bullet-list {
117    gap: clamp(0.4rem, 1vh, 1rem);
118}
119 
120.feature-list li, .bullet-list li {
121    font-size: var(--body-size);
122    line-height: 1.4;
123}
124 
125/* 7. Grids adapt to available space */
126.grid {
127    display: grid;
128    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
129    gap: clamp(0.5rem, 1.5vw, 1rem);
130}
131 
132/* 8. Images constrained to viewport */
133img, .image-container {
134    max-width: 100%;
135    max-height: min(50vh, 400px);
136    object-fit: contain;
137}
138 
139/* ===========================================
140   RESPONSIVE BREAKPOINTS
141   Aggressive scaling for smaller viewports
142   =========================================== */
143 
144/* Short viewports (< 700px height) */
145@media (max-height: 700px) {
146    :root {
147        --slide-padding: clamp(0.75rem, 3vw, 2rem);
148        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
149        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
150        --h2-size: clamp(1rem, 3vw, 1.75rem);
151    }
152}
153 
154/* Very short viewports (< 600px height) */
155@media (max-height: 600px) {
156    :root {
157        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
158        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
159        --title-size: clamp(1.1rem, 4vw, 2rem);
160        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
161    }
162 
163    /* Hide non-essential elements */
164    .nav-dots, .keyboard-hint, .decorative {
165        display: none;
166    }
167}
168 
169/* Extremely short (landscape phones, < 500px height) */
170@media (max-height: 500px) {
171    :root {
172        --slide-padding: clamp(0.4rem, 2vw, 1rem);
173        --title-size: clamp(1rem, 3.5vw, 1.5rem);
174        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
175        --body-size: clamp(0.65rem, 1vw, 0.85rem);
176    }
177}
178 
179/* Narrow viewports (< 600px width) */
180@media (max-width: 600px) {
181    :root {
182        --title-size: clamp(1.25rem, 7vw, 2.5rem);
183    }
184 
185    /* Stack grids vertically */
186    .grid {
187        grid-template-columns: 1fr;
188    }
189}
190 
191/* ===========================================
192   REDUCED MOTION
193   Respect user preferences
194   =========================================== */
195@media (prefers-reduced-motion: reduce) {
196    *, *::before, *::after {
197        animation-duration: 0.01ms !important;
198        transition-duration: 0.2s !important;
199    }
200 
201    html {
202        scroll-behavior: auto;
203    }
204}
205```
206 
207### Overflow Prevention Checklist
208 
209Before generating any presentation, mentally verify:
210 
2111. ✅ Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;`
2122. ✅ All font sizes use `clamp(min, preferred, max)`
2133. ✅ All spacing uses `clamp()` or viewport units
2144. ✅ Content containers have `max-height` constraints
2155. ✅ Images have `max-height: min(50vh, 400px)` or similar
2166. ✅ Grids use `auto-fit` with `minmax()` for responsive columns
2177. ✅ Breakpoints exist for heights: 700px, 600px, 500px
2188. ✅ No fixed pixel heights on content elements
2199. ✅ Content per slide respects density limits
220 
221### When Content Doesn't Fit
222 
223If you find yourself with too much content:
224 
225**DO:**
226- Split into multiple slides
227- Reduce bullet points (max 5-6 per slide)
228- Shorten text (aim for 1-2 lines per bullet)
229- Use smaller code snippets
230- Create a "continued" slide
231 
232**DON'T:**
233- Reduce font size below readable limits
234- Remove padding/spacing entirely
235- Allow any scrolling
236- Cram content to fit
237 
238### Testing Viewport Fit
239 
240After generating, recommend the user test at these sizes:
241- Desktop: 1920×1080, 1440×900, 1280×720
242- Tablet: 1024×768, 768×1024 (portrait)
243- Mobile: 375×667, 414×896
244- Landscape phone: 667×375, 896×414
245 
246---
247 
248## Phase 0: Detect Mode
249 
250First, determine what the user wants:
251 
252**Mode A: New Presentation**
253- User wants to create slides from scratch
254- Proceed to Phase 1 (Content Discovery)
255 
256**Mode B: PPT Conversion**
257- User has a PowerPoint file (.ppt, .pptx) to convert
258- Proceed to Phase 4 (PPT Extraction)
259 
260**Mode C: Existing Presentation Enhancement**
261- User has an HTML presentation and wants to improve it
262- Read the existing file, understand the structure, then enhance
263 
264---
265 
266## Phase 1: Content Discovery (New Presentations)
267 
268Before designing, understand the content. Ask via AskUserQuestion:
269 
270### Step 1.1: Presentation Context
271 
272**Question 1: Purpose**
273- Header: "Purpose"
274- Question: "What is this presentation for?"
275- Options:
276  - "Pitch deck" — Selling an idea, product, or company to investors/clients
277  - "Teaching/Tutorial" — Explaining concepts, how-to guides, educational content
278  - "Conference talk" — Speaking at an event, tech talk, keynote
279  - "Internal presentation" — Team updates, strategy meetings, company updates
280 
281**Question 2: Slide Count**
282- Header: "Length"
283- Question: "Approximately how many slides?"
284- Options:
285  - "Short (5-10)" — Quick pitch, lightning talk
286  - "Medium (10-20)" — Standard presentation
287  - "Long (20+)" — Deep dive, comprehensive talk
288 
289**Question 3: Content**
290- Header: "Content"
291- Question: "Do you have the content ready, or do you need help structuring it?"
292- Options:
293  - "I have all content ready" — Just need to design the presentation
294  - "I have rough notes" — Need help organizing into slides
295  - "I have a topic only" — Need help creating the full outline
296 
297If user has content, ask them to share it (text, bullet points, images, etc.).
298 
299---
300 
301## Phase 2: Style Discovery (Visual Exploration)
302 
303**CRITICAL: This is the "show, don't tell" phase.**
304 
305Most people can't articulate design preferences in words. Instead of asking "do you want minimalist or bold?", we generate mini-previews and let them react.
306 
307### How Users Choose Presets
308 
309Users can select a style in **two ways**:
310 
311**Option A: Guided Discovery (Default)**
312- User answers mood questions
313- Skill generates 3 preview files based on their answers
314- User views previews in browser and picks their favorite
315- This is best for users who don't have a specific style in mind
316 
317**Option B: Direct Selection**
318- If user already knows what they want, they can request a preset by name
319- Example: "Use the Bold Signal style" or "I want something like Dark Botanical"
320- Skip to Phase 3 immediately
321 
322**Available Presets:**
323| Preset | Vibe | Best For |
324|--------|------|----------|
325| Bold Signal | Confident, high-impact | Pitch decks, keynotes |
326| Electric Studio | Clean, professional | Agency presentations |
327| Creative Voltage | Energetic, retro-modern | Creative pitches |
328| Dark Botanical | Elegant, sophisticated | Premium brands |
329| Notebook Tabs | Editorial, organized | Reports, reviews |
330| Pastel Geometry | Friendly, approachable | Product overviews |
331| Split Pastel | Playful, modern | Creative agencies |
332| Vintage Editorial | Witty, personality-driven | Personal brands |
333| Neon Cyber | Futuristic, techy | Tech startups |
334| Terminal Green | Developer-focused | Dev tools, APIs |
335| Swiss Modern | Minimal, precise | Corporate, data |
336| Paper & Ink | Literary, thoughtful | Storytelling |
337 
338### Step 2.0: Style Path Selection
339 
340First, ask how the user wants to choose their style:
341 
342**Question: Style Selection Method**
343- Header: "Style"
344- Question: "How would you like to choose your presentation style?"
345- Options:
346  - "Show me options" — Generate 3 previews based on my needs (recommended for most users)
347  - "I know what I want" — Let me pick from the preset list directly
348 
349**If "Show me options"** → Continue to Step 2.1 (Mood Selection)
350 
351**If "I know what I want"** → Show preset picker:
352 
353**Question: Pick a Preset**
354- Header: "Preset"
355- Question: "Which style would you like to use?"
356- Options:
357  - "Bold Signal" — Vibrant card on dark, confident and high-impact
358  - "Dark Botanical" — Elegant dark with soft abstract shapes
359  - "Notebook Tabs" — Editorial paper look with colorful section tabs
360  - "Pastel Geometry" — Friendly pastels with decorative pills
361 
362(If user picks one, skip to Phase 3. If they want to see more options, show additional presets or proceed to guided discovery.)
363 
364### Step 2.1: Mood Selection (Guided Discovery)
365 
366**Question 1: Feeling**
367- Header: "Vibe"
368- Question: "What feeling should the audience have when viewing your slides?"
369- Options:
370  - "Impressed/Confident" — Professional, trustworthy, this team knows what they're doing
371  - "Excited/Energized" — Innovative, bold, this is the future
372  - "Calm/Focused" — Clear, thoughtful, easy to follow
373  - "Inspired/Moved" — Emotional, storytelling, memorable
374- multiSelect: true (can choose up to 2)
375 
376### Step 2.2: Generate Style Previews
377 
378Based on their mood selection, generate **3 distinct style previews** as mini HTML files in a temporary directory. Each preview should be a single title slide showing:
379 
380- Typography (font choices, heading/body hierarchy)
381- Color palette (background, accent, text colors)
382- Animation style (how elements enter)
383- Overall aesthetic feel
384 
385**Preview Styles to Consider (pick 3 based on mood):**
386 
387| Mood | Style Options |
388|------|---------------|
389| Impressed/Confident | "Bold Signal", "Electric Studio", "Dark Botanical" |
390| Excited/Energized | "Creative Voltage", "Neon Cyber", "Split Pastel" |
391| Calm/Focused | "Notebook Tabs", "Paper & Ink", "Swiss Modern" |
392| Inspired/Moved | "Dark Botanical", "Vintage Editorial", "Pastel Geometry" |
393 
394**IMPORTANT: Never use these generic patterns:**
395- Purple gradients on white backgrounds
396- Inter, Roboto, or system fonts
397- Standard blue primary colors
398- Predictable hero layouts
399 
400**Instead, use distinctive choices:**
401- Unique font pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.)
402- Cohesive color themes with personality
403- Atmospheric backgrounds (gradients, subtle patterns, depth)
404- Signature animation moments
405 
406### Step 2.3: Present Previews
407 
408Create the previews in: `.claude-design/slide-previews/`
409 
410```
411.claude-design/slide-previews/
412├── style-a.html   # First style option
413├── style-b.html   # Second style option
414├── style-c.html   # Third style option
415└── assets/        # Any shared assets
416```
417 
418Each preview file should be:
419- Self-contained (inline CSS/JS)
420- A single "title slide" showing the aesthetic
421- Animated to demonstrate motion style
422- ~50-100 lines, not a full presentation
423 
424Present to user:
425```
426I've created 3 style previews for you to compare:
427 
428**Style A: [Name]** — [1 sentence description]
429**Style B: [Name]** — [1 sentence description]
430**Style C: [Name]** — [1 sentence description]
431 
432Open each file to see them in action:
433- .claude-design/slide-previews/style-a.html
434- .claude-design/slide-previews/style-b.html
435- .claude-design/slide-previews/style-c.html
436 
437Take a look and tell me:
4381. Which style resonates most?
4392. What do you like about it?
4403. Anything you'd change?
441```
442 
443Then use AskUserQuestion:
444 
445**Question: Pick Your Style**
446- Header: "Style"
447- Question: "Which style preview do you prefer?"
448- Options:
449  - "Style A: [Name]" — [Brief description]
450  - "Style B: [Name]" — [Brief description]
451  - "Style C: [Name]" — [Brief description]
452  - "Mix elements" — Combine aspects from different styles
453 
454If "Mix elements", ask for specifics.
455 
456---
457 
458## Phase 3: Generate Presentation
459 
460Now generate the full presentation based on:
461- Content from Phase 1
462- Style from Phase 2
463 
464### File Structure
465 
466For single presentations:
467```
468presentation.html    # Self-contained presentation
469assets/              # Images, if any
470```
471 
472For projects with multiple presentations:
473```
474[presentation-name].html
475[presentation-name]-assets/
476```
477 
478### HTML Architecture
479 
480Follow this structure for all presentations:
481 
482```html
483<!DOCTYPE html>
484<html lang="en">
485<head>
486    <meta charset="UTF-8">
487    <meta name="viewport" content="width=device-width, initial-scale=1.0">
488    <title>Presentation Title</title>
489 
490    <!-- Fonts (use Fontshare or Google Fonts) -->
491    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=...">
492 
493    <style>
494        /* ===========================================
495           CSS CUSTOM PROPERTIES (THEME)
496           Easy to modify: change these to change the whole look
497           =========================================== */
498        :root {
499            /* Colors */
500            --bg-primary: #0a0f1c;
501            --bg-secondary: #111827;
502            --text-primary: #ffffff;
503            --text-secondary: #9ca3af;
504            --accent: #00ffcc;
505            --accent-glow: rgba(0, 255, 204, 0.3);
506 
507            /* Typography - MUST use clamp() for responsive scaling */
508            --font-display: 'Clash Display', sans-serif;
509            --font-body: 'Satoshi', sans-serif;
510            --title-size: clamp(2rem, 6vw, 5rem);
511            --subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
512            --body-size: clamp(0.75rem, 1.2vw, 1rem);
513 
514            /* Spacing - MUST use clamp() for responsive scaling */
515            --slide-padding: clamp(1.5rem, 4vw, 4rem);
516            --content-gap: clamp(1rem, 2vw, 2rem);
517 
518            /* Animation */
519            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
520            --duration-normal: 0.6s;
521        }
522 
523        /* ===========================================
524           BASE STYLES
525           =========================================== */
526        * {
527            margin: 0;
528            padding: 0;
529            box-sizing: border-box;
530        }
531 
532        html {
533            scroll-behavior: smooth;
534            scroll-snap-type: y mandatory;
535            height: 100%;
536        }
537 
538        body {
539            font-family: var(--font-body);
540            background: var(--bg-primary);
541            color: var(--text-primary);
542            overflow-x: hidden;
543            height: 100%;
544        }
545 
546        /* ===========================================
547           SLIDE CONTAINER
548           CRITICAL: Each slide MUST fit exactly in viewport
549           - Use height: 100vh (NOT min-height)
550           - Use overflow: hidden to prevent scroll
551           - Content must scale with clamp() values
552           =========================================== */
553        .slide {
554            width: 100vw;
555            height: 100vh; /* EXACT viewport height - no scrolling */
556            height: 100dvh; /* Dynamic viewport height for mobile */
557            padding: var(--slide-padding);
558            scroll-snap-align: start;
559            display: flex;
560            flex-direction: column;
561            justify-content: center;
562            position: relative;
563            overflow: hidden; /* Prevent any content overflow */
564        }
565 
566        /* Content wrapper that prevents overflow */
567        .slide-content {
568            flex: 1;
569            display: flex;
570            flex-direction: column;
571            justify-content: center;
572            max-height: 100%;
573            overflow: hidden;
574        }
575 
576        /* ===========================================
577           RESPONSIVE BREAKPOINTS
578           Adjust content for different screen sizes
579           =========================================== */
580        @media (max-height: 600px) {
581            :root {
582                --slide-padding: clamp(1rem, 3vw, 2rem);
583                --content-gap: clamp(0.5rem, 1.5vw, 1rem);
584            }
585        }
586 
587        @media (max-width: 768px) {
588            :root {
589                --title-size: clamp(1.5rem, 8vw, 3rem);
590            }
591        }
592 
593        @media (max-height: 500px) and (orientation: landscape) {
594            /* Extra compact for landscape phones */
595            :root {
596                --title-size: clamp(1.25rem, 5vw, 2rem);
597                --slide-padding: clamp(0.75rem, 2vw, 1.5rem);
598            }
599        }
600 
601        /* ===========================================
602           ANIMATIONS
603           Trigger via .visible class (added by JS on scroll)
604           =========================================== */
605        .reveal {
606            opacity: 0;
607            transform: translateY(30px);
608            transition: opacity var(--duration-normal) var(--ease-out-expo),
609                        transform var(--duration-normal) var(--ease-out-expo);
610        }
611 
612        .slide.visible .reveal {
613            opacity: 1;
614            transform: translateY(0);
615        }
616 
617        /* Stagger children */
618        .reveal:nth-child(1) { transition-delay: 0.1s; }
619        .reveal:nth-child(2) { transition-delay: 0.2s; }
620        .reveal:nth-child(3) { transition-delay: 0.3s; }
621        .reveal:nth-child(4) { transition-delay: 0.4s; }
622 
623        /* ... more styles ... */
624    </style>
625</head>
626<body>
627    <!-- Progress bar (optional) -->
628    <div class="progress-bar"></div>
629 
630    <!-- Navigation dots (optional) -->
631    <nav class="nav-dots">
632        <!-- Generated by JS -->
633    </nav>
634 
635    <!-- Slides -->
636    <section class="slide title-slide">
637        <h1 class="reveal">Presentation Title</h1>
638        <p class="reveal">Subtitle or author</p>
639    </section>
640 
641    <section class="slide">
642        <h2 class="reveal">Slide Title</h2>
643        <p class="reveal">Content...</p>
644    </section>
645 
646    <!-- More slides... -->
647 
648    <script>
649        /* ===========================================
650           SLIDE PRESENTATION CONTROLLER
651           Handles navigation, animations, and interactions
652           =========================================== */
653 
654        class SlidePresentation {
655            constructor() {
656                // ... initialization
657            }
658 
659            // ... methods
660        }
661 
662        // Initialize
663        new SlidePresentation();
664    </script>
665</body>
666</html>
667```
668 
669### Required JavaScript Features
670 
671Every presentation should include:
672 
6731. **SlidePresentation Class** — Main controller
674   - Keyboard navigation (arrows, space)
675   - Touch/swipe support
676   - Mouse wheel navigation
677   - Progress bar updates
678   - Navigation dots
679 
6802. **Intersection Observer** — For scroll-triggered animations
681   - Add `.visible` class when slides enter viewport
682   - Trigger CSS animations efficiently
683 
6843. **Optional Enhancements** (based on style):
685   - Custom cursor with trail
686   - Particle system background (canvas)
687   - Parallax effects
688   - 3D tilt on hover
689   - Magnetic buttons
690   - Counter animations
691 
692### Code Quality Requirements
693 
694**Comments:**
695Every section should have clear comments explaining:
696- What it does
697- Why it exists
698- How to modify it
699 
700```javascript
701/* ===========================================
702   CUSTOM CURSOR
703   Creates a stylized cursor that follows mouse with a trail effect.
704   - Uses lerp (linear interpolation) for smooth movement
705   - Grows larger when hovering over interactive elements
706   =========================================== */
707class CustomCursor {
708    constructor() {
709        // ...
710    }
711}
712```
713 
714**Accessibility:**
715- Semantic HTML (`<section>`, `<nav>`, `<main>`)
716- Keyboard navigation works
717- ARIA labels where needed
718- Reduced motion support
719 
720```css
721@media (prefers-reduced-motion: reduce) {
722    .reveal {
723        transition: opacity 0.3s ease;
724        transform: none;
725    }
726}
727```
728 
729**Responsive & Viewport Fitting (CRITICAL):**
730 
731**See the "CRITICAL: Viewport Fitting Requirements" section above for complete CSS and guidelines.**
732 
733Quick reference:
734- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
735- All typography and spacing must use `clamp()`
736- Respect content density limits (max 4-6 bullets, max 6 cards, etc.)
737- Include breakpoints for heights: 700px, 600px, 500px
738- When content doesn't fit → split into multiple slides, never scroll
739 
740---
741 
742## Phase 4: PPT Conversion
743 
744When converting PowerPoint files:
745 
746### Step 4.1: Extract Content
747 
748Use Python with `python-pptx` to extract:
749 
750```python
751from pptx import Presentation
752from pptx.util import Inches, Pt
753import json
754import os
755import base64
756 
757def extract_pptx(file_path, output_dir):
758    """
759    Extract all content from a PowerPoint file.
760    Returns a JSON structure with slides, text, and images.
761    """
762    prs = Presentation(file_path)
763    slides_data = []
764 
765    # Create assets directory
766    assets_dir = os.path.join(output_dir, 'assets')
767    os.makedirs(assets_dir, exist_ok=True)
768 
769    for slide_num, slide in enumerate(prs.slides):
770        slide_data = {
771            'number': slide_num + 1,
772            'title': '',
773            'content': [],
774            'images': [],
775            'notes': ''
776        }
777 
778        for shape in slide.shapes:
779            # Extract title
780            if shape.has_text_frame:
781                if shape == slide.shapes.title:
782                    slide_data['title'] = shape.text
783                else:
784                    slide_data['content'].append({
785                        'type': 'text',
786                        'content': shape.text
787                    })
788 
789            # Extract images
790            if shape.shape_type == 13:  # Picture
791                image = shape.image
792                image_bytes = image.blob
793                image_ext = image.ext
794                image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}"
795                image_path = os.path.join(assets_dir, image_name)
796 
797                with open(image_path, 'wb') as f:
798                    f.write(image_bytes)
799 
800                slide_data['images'].append({
801                    'path': f"assets/{image_name}",
802                    'width': shape.width,
803                    'height': shape.height
804                })
805 
806        # Extract notes
807        if slide.has_notes_slide:
808            notes_frame = slide.notes_slide.notes_text_frame
809            slide_data['notes'] = notes_frame.text
810 
811        slides_data.append(slide_data)
812 
813    return slides_data
814```
815 
816### Step 4.2: Confirm Content Structure
817 
818Present the extracted content to the user:
819 
820```
821I've extracted the following from your PowerPoint:
822 
823**Slide 1: [Title]**
824- [Content summary]
825- Images: [count]
826 
827**Slide 2: [Title]**
828- [Content summary]
829- Images: [count]
830 
831...
832 
833All images have been saved to the assets folder.
834 
835Does this look correct? Should I proceed with style selection?
836```
837 
838### Step 4.3: Style Selection
839 
840Proceed to Phase 2 (Style Discovery) with the extracted content in mind.
841 
842### Step 4.4: Generate HTML
843 
844Convert the extracted content into the chosen style, preserving:
845- All text content
846- All images (referenced from assets folder)
847- Slide order
848- Any speaker notes (as HTML comments or separate file)
849 
850---
851 
852## Phase 5: Delivery
853 
854### Final Output
855 
856When the presentation is complete:
857 
8581. **Clean up temporary files**
859   - Delete `.claude-design/slide-previews/` if it exists
860 
8612. **Open the presentation**
862   - Use `open [filename].html` to launch in browser
863 
8643. **Provide summary**
865```
866Your presentation is ready!
867 
868📁 File: [filename].html
869🎨 Style: [Style Name]
870📊 Slides: [count]
871 
872**Navigation:**
873- Arrow keys (← →) or Space to navigate
874- Scroll/swipe also works
875- Click the dots on the right to jump to a slide
876 
877**To customize:**
878- Colors: Look for `:root` CSS variables at the top
879- Fonts: Change the Fontshare/Google Fonts link
880- Animations: Modify `.reveal` class timings
881 
882Would you like me to make any adjustments?
883```
884 
885---
886 
887## Style Reference: Effect → Feeling Mapping
888 
889Use this guide to match animations to intended feelings:
890 
891### Dramatic / Cinematic
892- Slow fade-ins (1-1.5s)
893- Large scale transitions (0.9 → 1)
894- Dark backgrounds with spotlight effects
895- Parallax scrolling
896- Full-bleed images
897 
898### Techy / Futuristic
899- Neon glow effects (box-shadow with accent color)
900- Particle systems (canvas background)
901- Grid patterns
902- Monospace fonts for accents
903- Glitch or scramble text effects
904- Cyan, magenta, electric blue palette
905 
906### Playful / Friendly
907- Bouncy easing (spring physics)
908- Rounded corners (large radius)
909- Pastel or bright colors
910- Floating/bobbing animations
911- Hand-drawn or illustrated elements
912 
913### Professional / Corporate
914- Subtle, fast animations (200-300ms)
915- Clean sans-serif fonts
916- Navy, slate, or charcoal backgrounds
917- Precise spacing and alignment
918- Minimal decorative elements
919- Data visualization focus
920 
921### Calm / Minimal
922- Very slow, subtle motion
923- High whitespace
924- Muted color palette
925- Serif typography
926- Generous padding
927- Content-focused, no distractions
928 
929### Editorial / Magazine
930- Strong typography hierarchy
931- Pull quotes and callouts
932- Image-text interplay
933- Grid-breaking layouts
934- Serif headlines, sans-serif body
935- Black and white with one accent
936 
937---
938 
939## Animation Patterns Reference
940 
941### Entrance Animations
942 
943```css
944/* Fade + Slide Up (most common) */
945.reveal {
946    opacity: 0;
947    transform: translateY(30px);
948    transition: opacity 0.6s var(--ease-out-expo),
949                transform 0.6s var(--ease-out-expo);
950}
951 
952.visible .reveal {
953    opacity: 1;
954    transform: translateY(0);
955}
956 
957/* Scale In */
958.reveal-scale {
959    opacity: 0;
960    transform: scale(0.9);
961    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
962}
963 
964/* Slide from Left */
965.reveal-left {
966    opacity: 0;
967    transform: translateX(-50px);
968    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
969}
970 
971/* Blur In */
972.reveal-blur {
973    opacity: 0;
974    filter: blur(10px);
975    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
976}
977```
978 
979### Background Effects
980 
981```css
982/* Gradient Mesh */
983.gradient-bg {
984    background:
985        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
986        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
987        var(--bg-primary);
988}
989 
990/* Noise Texture */
991.noise-bg {
992    background-image: url("data:image/svg+xml,..."); /* Inline SVG noise */
993}
994 
995/* Grid Pattern */
996.grid-bg {
997    background-image:
998        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
999        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
1000    background-size: 50px 50px;
1001}
1002```
1003 
1004### Interactive Effects
1005 
1006```javascript
1007/* 3D Tilt on Hover */
1008class TiltEffect {
1009    constructor(element) {
1010        this.element = element;
1011        this.element.style.transformStyle = 'preserve-3d';
1012        this.element.style.perspective = '1000px';
1013        this.bindEvents();
1014    }
1015 
1016    bindEvents() {
1017        this.element.addEventListener('mousemove', (e) => {
1018            const rect = this.element.getBoundingClientRect();
1019            const x = (e.clientX - rect.left) / rect.width - 0.5;
1020            const y = (e.clientY - rect.top) / rect.height - 0.5;
1021 
1022            this.element.style.transform = `
1023                rotateY(${x * 10}deg)
1024                rotateX(${-y * 10}deg)
1025            `;
1026        });
1027 
1028        this.element.addEventListener('mouseleave', () => {
1029            this.element.style.transform = 'rotateY(0) rotateX(0)';
1030        });
1031    }
1032}
1033```
1034 
1035---
1036 
1037## Troubleshooting
1038 
1039### Common Issues
1040 
1041**Fonts not loading:**
1042- Check Fontshare/Google Fonts URL
1043- Ensure font names match in CSS
1044 
1045**Animations not triggering:**
1046- Verify Intersection Observer is running
1047- Check that `.visible` class is being added
1048 
1049**Scroll snap not working:**
1050- Ensure `scroll-snap-type` on html/body
1051- Each slide needs `scroll-snap-align: start`
1052 
1053**Mobile issues:**
1054- Disable heavy effects at 768px breakpoint
1055- Test touch events
1056- Reduce particle count or disable canvas
1057 
1058**Performance issues:**
1059- Use `will-change` sparingly
1060- Prefer `transform` and `opacity` animations
1061- Throttle scroll/mousemove handlers
1062 
1063---
1064 
1065## Related Skills
1066 
1067- **learn** — Generate FORZARA.md documentation for the presentation
1068- **frontend-design** — For more complex interactive pages beyond slides
1069- **design-and-refine:design-lab** — For iterating on component designs
1070 
1071---
1072 
1073## Example Session Flow
1074 
10751. User: "I want to create a pitch deck for my AI startup"
10762. Skill asks about purpose, length, content
10773. User shares their bullet points and key messages
10784. Skill asks about desired feeling (Impressed + Excited)
10795. Skill generates 3 style previews
10806. User picks Style B (Neon Cyber), asks for darker background
10817. Skill generates full presentation with all slides
10828. Skill opens the presentation in browser
10839. User requests tweaks to specific slides
108410. Final presentation delivered
1085 
1086---
1087 
1088## Conversion Session Flow
1089 
10901. User: "Convert my slides.pptx to a web presentation"
10912. Skill extracts content and images from PPT
10923. Skill confirms extracted content with user
10934. Skill asks about desired feeling/style
10945. Skill generates style previews
10956. User picks a style
10967. Skill generates HTML presentation with preserved assets
10978. Final presentation delivered
1098