frontend-slides

# Frontend Slides Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. ## When to Use This Skill - Use when the user asks to create a presentation, slide deck, or pitch from scratch. - Use when the user wants to convert an existing PPT or PPTX file into a web-based presentation. - Use when designing visually rich, animated HTML content that needs to fit exactly within the viewport. ## Core Principles 1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools. 2. **Show, Don't Tell** — Generate visual previews, not abstract choices. People discover what they want by seeing it. 3. **Distinctive Design** — No generic "AI slop." 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. ## Design Aesthetics You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on: - Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics. - Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly...