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.
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.
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=device-width, initial-scale=1.0">
<title>[Presentation Title]</title>
[Google Fonts link]
<style>
/* Reset, design tokens, slide system, themes, shapes,
animations, typography, UI chrome, slide-specific styles,
responsive breakpoint */
</style>
</head>
<body>
<div class="presentation">
<!-- Slides go here -->
</div>
<!-- Progress bar, slide counter, nav hint -->
<script>
/* IIFE-based navigation engine */
</script>
</body>
</html>
For the complete CSS architecture and JS navigation engine templates, see framework-reference.md.
Step 5: Build Slides
Using the templates from slide-types.md:
- Full generation mode: Create all slides at once based on the outline from Step 2
- Interactive mode: One slide at a time — write the HTML, let the user review, adjust, then move to the next
For every slide:
- Use the appropriate
section.slide with theme class (.slide--primary, .slide--secondary, .slide--light)
- Set
data-theme="dark" or data-theme="light" for nav UI color adaptation
- Add
.anim classes to all content elements for entrance animations
- Apply stagger delays (
.anim-d1 through .anim-d8) in visual reading order
- Add decorative shapes with entrance directions (
.shape-enter-left, etc.)
- Include
.slide-footer with consistent content on every slide
- For bullet-reveal slides: set
data-bullets="N" and use <li data-bullet="N"> elements
Step 6: Polish & Review
Checklist before delivery:
Step 7: Export
Default: standalone HTML — single file with base64-embedded images and assets. Works anywhere, no server needed.
To embed images as base64:
<img src="data:image/png;base64,[base64-data]" alt="...">
Optionally offer:
- Dev version: external image references for easier editing
- Individual slides: separate HTML files per slide for modular use
Key Patterns
For design patterns, animation tips, and hard-won insights from building presentations with this framework, see learnings.md.
Quick reference
- Easing:
cubic-bezier(0.16, 1, 0.3, 1) (expo-out) for all transitions
- Stagger:
.anim-d1 (0.1s) through .anim-d8 (1.1s)
- Shapes: absolute positioned,
mix-blend-mode: overlay, floating keyframe animations
- Glass:
backdrop-filter: blur(28px) + semi-transparent white + subtle border
- Typography:
clamp() for fluid sizing across projector/laptop/tablet
- Parallax:
--mx/--my CSS variables tracked on mousemove
- Transitions: 700ms lockout via
isTransitioning flag
1---2name: presentation3description: 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.4---5
6# Presentation Skill
7
8Creates 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.
9
10---
11
12## Step 1: Choose a Mode
13
14Ask the user how they want to work:
15
16- **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.
17- **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.
18
19---
20
21## Step 2: Content & Structure (THE MOST IMPORTANT STEP)
22
23Before writing any code, deeply understand what the presentation is actually saying.
24
25Ask the user to provide source material — any of:
26- A document, outline, or notes about the topic
27- A rough slide-by-slide outline
28- Key talking points, stats, or quotes
29- An existing presentation to redesign
30- A brain dump of everything they want to cover
31
32Then collaboratively build the slide outline:
33- For each slide: choose a type, headline, body content, and special elements
34- Suggest a narrative arc: **hook → context → key content → details → closing**
35- Flag where bullet-reveal slides help (dense content needing progressive disclosure)
36- Identify which slides need images/assets vs. pure text
37- Confirm final slide count and order before proceeding
38
39**This step makes or breaks the presentation.** Spend the most time here.
40
41### Available slide types
42
43| Type | Class | Use Case |
44|---|---|---|
45| Title | `.slide-title` | Opening — large heading, subtitle, decorative shapes |
46| Speaker/Bio | `.slide-speaker` | Introduce presenter — avatar, name, role, glass card |
47| Question | `.slide-familiar` | Audience engagement — large centered question |
48| Bullet Reveal | `.slide-learn` | Key points, agendas — progressive reveal with `data-bullets` |
49| Tool/Badge Grid | `.slide-setup` | Tools, tech, logos — grid of badge cards |
50| Workflow/Flow | `.slide-flow` | Processes, steps — connected boxes with arrows |
51| Two-Column | `.slide-llm` | Text + image — split layout |
52| Team/Grid | `.slide-speakers` | Meet the team — photo grid with names/roles |
53| Glossary | `.slide-gloss` | Definitions — large term + definition |
54| Closing/CTA | `.slide-closing` | Final slide — large text, call to action |
55
56For detailed HTML templates of each type, see [slide-types.md](slide-types.md).
57
58---
59
60## Step 3: Design Brief
61
62Gather style direction from the user:
63- **Colors**: brand colors, or suggest a palette (5-6 hex values with roles: primary, secondary, accent, background-light, background-dark, text)
64- **Fonts**: heading + body font families (Google Fonts or system fonts)
65- **Vibe**: minimal / editorial / glassmorphism / bold / corporate
66- **Assets**: logos, images, photos to embed
67
68Produce a brief with:
69- Color palette with CSS variable names and hex values
70- Typography scale (heading-xl, heading-lg, heading-md, subtitle, body-text)
71- Font families and weights
72- Spacing rhythm (slide padding, element gaps)
73- Animation style (subtle vs. dramatic)
74- One-sentence visual direction
75- Slide-to-theme mapping (which slides get which background color)
76
77For CSS/typography/animation defaults and templates, see [framework-reference.md](framework-reference.md).
78
79---
80
81## Step 4: Generate the Framework
82
83Create a single standalone HTML file with embedded `<style>` and `<script>`.
84
85The file structure is:
86```
87<!DOCTYPE html>
88<html lang="en">
89<head>
90 <meta charset="UTF-8">
91 <meta name="viewport" content="width=device-width, initial-scale=1.0">
92 <title>[Presentation Title]</title>
93 [Google Fonts link]
94 <style>
95 /* Reset, design tokens, slide system, themes, shapes,
96 animations, typography, UI chrome, slide-specific styles,
97 responsive breakpoint */
98 </style>
99</head>
100<body>
101 <div class="presentation">
102 <!-- Slides go here -->
103 </div>
104 <!-- Progress bar, slide counter, nav hint -->
105 <script>
106 /* IIFE-based navigation engine */
107 </script>
108</body>
109</html>
110```
111
112For the complete CSS architecture and JS navigation engine templates, see [framework-reference.md](framework-reference.md).
113
114---
115
116## Step 5: Build Slides
117
118Using the templates from [slide-types.md](slide-types.md):
119
120- **Full generation mode:** Create all slides at once based on the outline from Step 2
121- **Interactive mode:** One slide at a time — write the HTML, let the user review, adjust, then move to the next
122
123For every slide:
1241. Use the appropriate `section.slide` with theme class (`.slide--primary`, `.slide--secondary`, `.slide--light`)
1252. Set `data-theme="dark"` or `data-theme="light"` for nav UI color adaptation
1263. Add `.anim` classes to all content elements for entrance animations
1274. Apply stagger delays (`.anim-d1` through `.anim-d8`) in visual reading order
1285. Add decorative shapes with entrance directions (`.shape-enter-left`, etc.)
1296. Include `.slide-footer` with consistent content on every slide
1307. For bullet-reveal slides: set `data-bullets="N"` and use `<li data-bullet="N">` elements
131
132---
133
134## Step 6: Polish & Review
135
136Checklist before delivery:
137- [ ] All `.anim` classes present on content elements
138- [ ] Stagger delays follow visual reading order
139- [ ] Decorative shapes don't overlap content (use `z-index` layering)
140- [ ] Color contrast is correct on all slide themes
141- [ ] Bullet reveal count matches `data-bullets` attribute
142- [ ] Responsive layout works at 768px breakpoint
143- [ ] Navigation works: keyboard (arrows, Space, PgUp/Dn, Home, End), click (left 30% = back, right 70% = forward), and touch/swipe (>50px threshold)
144- [ ] Progress bar and slide counter update correctly
145- [ ] Header/footer chrome consistent across slides
146- [ ] All fonts load correctly (Google Fonts or fallbacks)
147
148---
149
150## Step 7: Export
151
152**Default: standalone HTML** — single file with base64-embedded images and assets. Works anywhere, no server needed.
153
154To embed images as base64:
155```html
156<img src="data:image/png;base64,[base64-data]" alt="...">
157```
158
159Optionally offer:
160- **Dev version**: external image references for easier editing
161- **Individual slides**: separate HTML files per slide for modular use
162
163---
164
165## Key Patterns
166
167For design patterns, animation tips, and hard-won insights from building presentations with this framework, see [learnings.md](learnings.md).
168
169### Quick reference
170
171- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (expo-out) for all transitions
172- **Stagger**: `.anim-d1` (0.1s) through `.anim-d8` (1.1s)
173- **Shapes**: absolute positioned, `mix-blend-mode: overlay`, floating keyframe animations
174- **Glass**: `backdrop-filter: blur(28px)` + semi-transparent white + subtle border
175- **Typography**: `clamp()` for fluid sizing across projector/laptop/tablet
176- **Parallax**: `--mx`/`--my` CSS variables tracked on mousemove
177- **Transitions**: 700ms lockout via `isTransitioning` flag
thedesignproject