frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.
Profile →npx skills add sickn33/agentic-awesome-skills --skill frontend-slides --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 beauti
- When to Use This Skill
- Core Principles
- Design Aesthetics
- Viewport Fitting Rules
- Content Density Limits Per Slide
- Phase 0: Detect Mode
- Mode C: Modification Rules
- Phase 1: Content Discovery (New Presentations)
- Step 1.2: Image Evaluation (if images provided)
- Phase 2: Style Discovery
- Step 2.0: Style Path
- Step 2.1: Mood Selection (Guided Discovery)
- Step 2.2: Generate 3 Style Previews
- Step 2.3: User Picks
What does the frontend-slides skill do?
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill frontend-slides --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.