Skill detail

presentation

Creates polished standalone HTML slide decks.

MatchDirectReviewed for presentations

Sourcethedesignproject/agent-skillsExternal source

Reported installs116Popularity signal only

Inspect before use

Automated review checks relevance, not safety or endorsement. Read the source instructions before using this skill.

View on skills.sh (opens external page)Read SKILL.md on GitHub (opens external page)

Saved source preview

SKILL.md

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: presentation
description: Creates polished single-file HTML/CSS/JS slide deck presentations with animations, keyboard/click/swipe navigation, and progressive bullet reveal. Use when the user wants to create a presentation, slide deck, pitch deck, or wants to present content as slides.
argument-hint: "[topic]"
---

# Presentation Skill

Creates standalone HTML slide deck presentations with CSS animations, keyboard/click/swipe navigation, bullet reveal, mouse parallax, and polished visual design. Single file, no dependencies, works anywhere.

---

## Step 1: Choose a Mode

Ask the user how they want to work:

- **Full generation**: User provides content/outline upfront → Claude generates the entire presentation in one shot. Best when the user already knows what they want to say.
- **Interactive step-by-step**: Claude scaffolds the framework first, then builds slides one at a time — user reviews each slide before moving to the next. Best when the user is still figuring out the story or wants tight control.

---

## Step 2: Content & Structure (THE MOST IMPORTANT STEP)

Before writing any code, deeply understand what the presentation is actually saying.

Ask the user to provide source material — any of:
- A document, outline, or notes about the topic
- A rough slide-by-slide outline
- Key talking points, stats, or quotes
- An existing presentation to redesign
- A brain dump of everything they want to cover

Then collaboratively build the slide outline:
- For each slide: choose a type, headline, body content, and special elements
- Suggest a narrative arc: **hook → context → key content → details → closing**
- Flag where bullet-reveal slides help (dense content needing progressive disclosure)
- Identify which slides need images/assets vs. pure text
- Confirm final slide count and order before proceeding

**This step makes or breaks the presentation.** Spend the most time here.

### Available slide types

| Type | Class | Use Case |
|---|---|---|
| Title | `.slide-title` | Opening — large heading, subtitle, decorative shapes |
| Speaker/Bio | `.slide-speaker` | Introduce presenter — avatar, name, role, glass card |
| Question | `.slide-familiar` | Audience engagement — large centered question |
| Bullet Reveal | `.slide-learn` | Key points, agendas — progressive reveal with `data-bullets` |
| Tool/Badge Grid | `.slide-setup` | Tools, tech, logos — grid of badge cards |
| Workflow/Flow | `.slide-flow` | Processes, steps — connected boxes with arrows |
| Two-Column | `.slide-llm` | Text + image — split layout |
| Team/Grid | `.slide-speakers` | Meet the team — photo grid with names/roles |
| Glossary | `.slide-gloss` | Definitions — large term + definition |
| Closing/CTA | `.slide-closing` | Final slide — large text, call to action |

For detailed HTML templates of each type, see [slide-types.md](slide-types.md).

---

## Step 3: Design Brief

Gather style direction from the user:
- **Colors**: brand colors, or suggest a palette (5-6 hex values with roles: primary, secondary, accent, background-light, background-dark, text)
- **Fonts**: heading + body font families (Google Fonts or system fonts)
- **Vibe**: minimal / editorial / glassmorphism / bold / corporate
- **Assets**: logos, images, photos to embed

Produce a brief with:
- Color palette with CSS variable names and hex values
- Typography scale (heading-xl, heading-lg, heading-md, subtitle, body-text)
- Font families and weights
- Spacing rhythm (slide padding, element gaps)
- Animation style (subtle vs. dramatic)
- One-sentence visual direction
- Slide-to-theme mapping (which slides get which background color)

For CSS/typography/animation defaults and templates, see [framework-reference.md](framework-reference.md).

---

## Step 4: Generate the Framework

Create a single standalone HTML file with embedded `<style>` and `<script>`.

The file structure is:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=devic

Read the full source on GitHub

Context