frontend-slideslisted

# 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 pa