Skill 详情

presentation

Creates polished standalone HTML slide decks.

匹配类型直接匹配已针对演示文稿审核

来源thedesignproject/agent-skills外部来源

报告安装量116仅表示受欢迎程度

使用前先检查

自动化审核只检查相关性，不代表安全审查或推荐。使用前请阅读来源中的说明。

在 skills.sh 查看（打开外部页面）在 GitHub 阅读 SKILL.md （打开外部页面）

已保存的来源预览

SKILL.md

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
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

在 GitHub 阅读完整来源