# Frontend Slides

Create animation-rich browser-based HTML presentations from scratch, enhance existing...

- Repository: https://github.com/OpenBMB/PilotDeck (4947 stars)
- Category: Design
- License: AGPL-3.0
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add OpenBMB/PilotDeck --skill frontend-slides -g -a claude-code -y`
Codex: `npx skills add OpenBMB/PilotDeck --skill frontend-slides -g -a codex -y`
Cursor: `npx skills add OpenBMB/PilotDeck --skill frontend-slides -g -a cursor -y`
Gemini CLI: `npx skills add OpenBMB/PilotDeck --skill frontend-slides -g -a gemini-cli -y`

## Description

Create animation-rich browser-based HTML presentations from scratch, enhance existing HTML decks, or convert PowerPoint files into web presentations. Use only when the requested deliverable is HTML or a browser presentation; do not use when the user needs an editable native .pptx file.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

## 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. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:

The rest: https://github.com/OpenBMB/PilotDeck/blob/HEAD/skills/frontend-slides/SKILL.md