Agent skill · design visual · aiskillstore
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.
Why this skill is useful
Provides specific design principles and viewport fitting rules for creating unique, animation-rich HTML presentations that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration. Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-slides