frontend-slides

# 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: ```css /* =========================================== VIEWPORT FITTING: MANDATORY BASE STYLES These styles MUST be included in every presentation. They ensure slides fit exactly in the viewport. =========================================== */ /* 1. Lock html/body to viewport */ html, body { height: 100%; overflow-x: hidden; } html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } /* 2. Each slide = exact viewport height */ .slide { width: 100vw; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile browsers */ overflow: hidden; /* CRITICAL: Prevent ANY overflow */ scroll-snap-align: start; display: flex; flex-direction: column; position: relative; } /* 3. Content container with flex for centering */ .slide-content { flex: 1; display: flex; flex-direction: column; justify-content: center; max-height: 100%; overflow: hidden; /* Double-protection against overflow */ padding: var(--slide-padding); } /* 4. ALL typography uses clamp() for responsive scaling */ :root { /* Titles scale from mobile to desktop */ --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 text */ --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --small-size: clamp(0.65rem, 1vw, 0.875rem); /* Spacing scales with viewport */ --slide-padding: clamp(1rem, 4vw, 4rem); --content-gap: clamp(0.5rem, 2vw, 2rem); --element-gap: clamp(0.25rem, 1vw, 1rem); } /* 5. Cards/containers use viewport-relative max sizes */ .card, .container, .content-box { max-width: min(90vw, 1000px); max-height: min(80vh, 700px); } /* 6. Lists auto-scale with viewport */ .feature-list, .bullet-list { gap: clamp(0.4rem, 1vh, 1rem); } .feature-list li, .bullet-list li { font-size: var(--body-size); line-height: 1.4; } /* 7. Grids adapt to available space */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(0.5rem, 1.5vw, 1rem); } /* 8. Images constrained to viewport */ img, .image-container { max-width: 100%; max-height: min(50vh, 400px); object-fit: contain; } /* =========================================== RESPONSIVE BREAKPOINTS Aggressive scaling for smaller viewports =========================================== */ /* Short viewports (< 700px height) */ @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); } } /* Very short viewports (< 600px height) */ @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); } /* Hide non-essential elements */ .nav-dots, .keyboard-hint, .decorative { display: none; } } /* Extremely short (landscape phones, < 500px height) */ @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); } } /* Narrow viewports (< 600px width) */ @media (max-width: 600px) { :root { --title-size: clamp(1.25rem, 7vw, 2.5rem); } /* Stack grids vertically */ .grid { grid-template-columns: 1fr; } } /* =========================================== REDUCED MOTION Respect user preferences =========================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } html { scroll-behavior: auto; } } ``` ### Overflow Prevention Checklist Before generating any presentation, mentally verify: 1. ✅ Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;` 2. ✅ All font sizes use `clamp(min, preferred, max)` 3. ✅ All spacing uses `clamp()` or viewport units 4. ✅ Content containers have `max-height` constraints 5. ✅ Images have `max-height: min(50vh, 400px)` or similar 6. ✅ Grids use `auto-fit` with `minmax()` for responsive columns 7. ✅ Breakpoints exist for heights: 700px, 600px, 500px 8. ✅ No fixed pixel heights on content elements 9. ✅ Content per slide respects density limits ### When Content Doesn't Fit If you find yourself with too much content: **DO:** - Split into multiple slides - Reduce bullet points (max 5-6 per slide) - Shorten text (aim for 1-2 lines per bullet) - Use smaller code snippets - Create a "continued" slide **DON'T:** - Reduce font size below readable limits - Remove padding/spacing entirely - Allow any scrolling - Cram content to fit ### Testing Viewport Fit After generating, recommend the user test at these sizes: - Desktop: 1920×1080, 1440×900, 1280×720 - Tablet: 1024×768, 768×1024 (portrait) - Mobile: 375×667, 414×896 - Landscape phone: 667×375, 896×414 --- ## Phase 0: Detect Mode First, determine what the user wants: **Mode A: New Presentation** - User wants to create slides from scratch - Proceed to Phase 1 (Content Discovery) **Mode B: PPT Conversion** - User has a PowerPoint file (.ppt, .pptx) to convert - Proceed to Phase 4 (PPT Extraction) **Mode C: Existing Presentation Enhancement** - User has an HTML presentation and wants to improve it - Read the existing file, understand the structure, then enhance --- ## Phase 1: Content Discovery (New Presentations) Before designing, understand the content. Ask via AskUserQuestion: ### Step 1.1: Presentation Context **Question 1: Purpose** - Header: "Purpose" - Question: "What is this presentation for?" - Options: - "Pitch deck" — Selling an idea, product, or company to investors/clients - "Teaching/Tutorial" — Explaining concepts, how-to guides, educational content - "Conference talk" — Speaking at an event, tech talk, keynote - "Internal presentation" — Team updates, strategy meetings, company updates **Question 2: Slide Count** - Header: "Length" - Question: "Approximately how many slides?" - Options: - "Short (5-10)" — Quick pitch, lightning talk - "Medium (10-20)" — Standard presentation - "Long (20+)" — Deep dive, comprehensive talk **Question 3: Content** - Header: "Content" - Question: "Do you have the content ready, or do you need help structuring it?" - Options: - "I have all content ready" — Just need to design the presentation - "I have rough notes" — Need help organizing into slides - "I have a topic only" — Need help creating the full outline If user has content, ask them to share it (text, bullet points, images, etc.). --- ## Phase 2: Style Discovery (Visual Exploration) **CRITICAL: This is the "show, don't tell" phase.** Most 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. ### How Users Choose Presets Users can select a style in **two ways**: **Option A: Guided Discovery (Default)** - User answers mood questions - Skill generates 3 preview files based on their answers - User views previews in browser and picks their favorite - This is best for users who don't have a specific style in mind **Option B: Direct Selection** - If user already knows what they want, they can request a preset by name - Example: "Use the Bold Signal style" or "I want something like Dark Botanical" - Skip to Phase 3 immediately **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 | ### Step 2.0: Style Path Selection First, ask how the user wants to choose their style: **Question: Style Selection Method** - Header: "Style" - Question: "How would you like to choose your presentation style?" - Options: - "Show me options" — Generate 3 previews based on my needs (recommended for most users) - "I know what I want" — Let me pick from the preset list directly **If "Show me options"** → Continue to Step 2.1 (Mood Selection) **If "I know what I want"** → Show preset picker: **Question: Pick a Preset** - Header: "Preset" - Question: "Which style would you like to use?" - Options: - "Bold Signal" — Vibrant card on dark, confident and high-impact - "Dark Botanical" — Elegant dark with soft abstract shapes - "Notebook Tabs" — Editorial paper look with colorful section tabs - "Pastel Geometry" — Friendly pastels with decorative pills (If user picks one, skip to Phase 3. If they want to see more options, show additional presets or proceed to guided discovery.) ### Step 2.1: Mood Selection (Guided Discovery) **Question 1: Feeling** - Header: "Vibe" - Question: "What feeling should the audience have when viewing your slides?" - Options: - "Impressed/Confident" — Professional, trustworthy, this team knows what they're doing - "Excited/Energized" — Innovative, bold, this is the future - "Calm/Focused" — Clear, thoughtful, easy to follow - "Inspired/Moved" — Emotional, storytelling, memorable - multiSelect: true (can choose up to 2)