---
name: revealjs-presenter
description: Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication. Use when creating slide decks, pitch presentations, technical talks, or any reveal.js output.
license: MIT
metadata:
author: jwynia
version: "1.0"
type: generator
mode: generative
domain: documents
---
# RevealJS Presenter Skill
## When to Use This Skill
Use this skill when:
- Creating a RevealJS presentation from content/outline
- Converting document content into slide format
- Building a pitch deck, technical talk, or educational presentation
- User requests "slides," "presentation," "deck," or mentions RevealJS
This skill produces a single self-contained HTML file with embedded CSS and CDN references.
---
## Part 1: RevealJS Foundation
### 1.1 Required Configuration
Always initialize RevealJS with these settings:
```javascript
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
backgroundTransition: 'fade',
width: 1920,
height: 1080,
margin: 0.08,
minScale: 0.2,
maxScale: 2.0
});
```
**Why these values:**
- `center: true` — Let RevealJS handle vertical centering. Do not fight this with flexbox on sections.
- `width: 1920, height: 1080` — Standard HD ratio. Content scales automatically.
- `margin: 0.08` — Provides breathing room at viewport edges.
- `transition: 'fade'` — Professional, non-distracting. Avoid 'zoom', 'convex', etc.
### 1.2 Base HTML Structure
```html
[PRESENTATION TITLE]
```
### 1.3 Base CSS Reset
Apply these styles to normalize RevealJS behavior:
```css
/* === RESET & NORMALIZATION === */
.reveal {
font-family: var(--font-body);
font-weight: 400;
color: var(--text-primary);
}
.reveal .slides section {
text-align: left;
padding: 60px;
box-sizing: border-box;
}
.reveal .slides section.centered {
text-align: center;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--text-primary);
text-transform: none;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 0.5em 0;
}
.reveal p {
margin: 0 0 1em 0;
line-height: 1.5;
}
.reveal ul, .reveal ol {
margin: 0;
padding: 0;
list-style-position: outside;
margin-left: 1.5em;
}
.reveal li {
margin-bottom: 0.5em;
line-height: 1.4;
}
```
---
## Part 2: Theme Selection
**Themes are complete specifications.** Before generating any slides, read the appropriate theme file from the `themes/` directory. Themes control both visual styling AND content strategy.
### 2.1 What Themes Control
Each theme file specifies:
1. **CSS Variables** — Colors, typography sizes, spacing, fonts
2. **Typography Application** — How CSS variables apply to elements
3. **Word Limits** — Maximum words per slide type
4. **Slide Type Preferences** — Which types to prefer, use sparingly, or avoid
5. **Content Rhythm** — Impact vs information slide ratios
6. **Structure Rules** — Max bullets, card counts, splitting guidance
### 2.2 Default Theme
Use `themes/bold.md` unless the user specifies otherwise.
### 2.3 How to Apply a Theme
1. Read the entire theme file before generating slides
2. Follow the theme's **Content Strategy** section for word limits and slide type choices
3. Include all CSS from the theme's variables and typography sections
4. Combine with the base CSS reset from Part 1.3
### 2.4 Available Themes
| Theme | File | Content Approach |
|-------|------|------------------|
| Bold | `themes/bold.md` | Minimal words, dramatic impact, simple structures, 40%+ impact slides |
| Corporate | `themes/corporate.md` | Information-dense, detailed content, complex structures allowed |
Future themes may include `minimal.md` (clean, understated design).
---
## Part 3: Core Components
### 3.1 The Bar (Accent Element)
A horizontal bar used as a visual anchor and section indicator.
```css
.bar {
width: var(--bar-width);
height: var(--bar-height);
background: var(--accent-1);
margin-bottom: var(--space-md);
}
.bar-accent-2 { background: var(--accent-2); }
.bar-accent-3 { background: var(--accent-3); }
.bar-accent-4 { background: var(--accent-4); }
.centered .bar {
margin-left: auto;
margin-right: auto;
}
```
**Usage:**
```html
```
**When to use:** Corporate presentations, conference talks, any context where persistent branding helps.
**Mistakes:** Too much information, large font size, distracting from content.
---
## Part 4: Slide Types
Each slide type includes: HTML structure, when to use, and common mistakes.
### 4.1 Title Slide
The opening slide. Sets tone and context.
```html
Category or Context
Presentation Title
Subtitle or tagline goes here
```
**When to use:** Opening slide only.
**Mistakes:** Too much text, including agenda, adding logos/footer clutter.
### 4.2 Section Break
Transitions between major sections. Creates visual pause and establishes section identity through color.
```html
Section Title
Optional brief context
```
**Color rotation for visual rhythm:**
Vary section break backgrounds to create distinct visual identities for each major topic. Suggested rotation:
| Section | Background | Bar Accent |
|---------|------------|------------|
| 1 (Problem/Context) | `var(--bg-dark)` | `bar-accent-3` |
| 2 (Solution) | `var(--accent-1)` | `bar-accent-2` |
| 3 (Details) | `var(--accent-2)` | default |
| 4 (Future/CTA) | `var(--bg-dark)` | `bar-accent-2` |
**Example with accent background:**
```html
The Problem
Why the current paradigm is broken.
```
**When to use:** Between major sections (3-5 per presentation typically).
**Mistakes:** Using for every topic change, adding content beyond the section name, using the same color for all section breaks.
### 4.3 Single Word / Phrase
Maximum impact. One idea, massive type.
```html
Simplify.
```
**When to use:** Emphasizing a key concept, creating a moment, transitional pause.
**Mistakes:** Overuse (more than 2-3 per presentation), using for concepts that need explanation.
### 4.4 Hero Stat
The dramatic data moment. ONE number dominates.
```html
Context Label
87%
of users completed onboarding
```
**When to use:** Your most important data point. Usually only 1-2 per presentation.
**Mistakes:** Using hero treatment for every stat, burying in other content.
### 4.5 Standard Stat
Prominent data, but not the hero moment.
```html
Expected Outcome
50%
reduction in development time
```
**When to use:** Supporting data points, secondary metrics.
**Mistakes:** Making all stats the same size, no context labels.
### 4.6 Stat Cluster
2-3 related statistics shown together for comparison.
```html
Key Metrics
50%
faster development
75%
prototype success
30%
reduced overhead
```
**When to use:** Comparing related metrics, showing before/after, dashboard-style summary.
**Mistakes:** More than 3 stats, mixing unrelated data.
### 4.7 Quote
Attributed quotation with visual emphasis.
```html
"The best interface is no interface."
— Golden Krishna
```
**When to use:** Expert authority, memorable phrases, user testimonials.
**Mistakes:** Long quotes (aim for under 20 words), missing attribution.
### 4.8 Single Assertion (Impact Statement)
A dramatic statement that deserves its own slide. Uses impact typography with optional inline highlights.
```html
AI agents are the primary developers.
```
**With hero treatment:**
```html
Languages built for humans
create failure modes for AI.
```
**With context label:**
```html
The Inversion
Human interaction becomes the refinement layer.
```
**When to use:** Thesis statements, paradigm shifts, key assertions that define your argument. The moments where you want the audience to pause and absorb a single idea.
**Mistakes:** Overuse (2-4 per presentation max), adding supporting text, using for minor points, forgetting highlights for emphasis.
### 4.9 Assertion + Evidence
The workhorse slide. Clear claim supported by visual proof.
```html
User engagement increased 43% after redesign
Key insight or context that supports the assertion goes here. Keep it brief.
```
**When to use:** Most content slides. Default choice when presenting information.
**Mistakes:** Burying assertion in body text, no visual evidence, bullet lists instead of visuals.
### 4.10 Card Grid (2-4 items)
Multiple items with equal visual weight.
```html
Platform Capabilities
Intelligent Agents
AI-powered assistants that reason across organizational knowledge
Context Networks
Unified access to information across all systems
Custom Applications
Accelerated development with built-in AI
Automated Workflows
Event-driven processes without manual triggers
```
**When to use:** Features, benefits, options, categories—items with equal importance.
**Mistakes:** More than 4 items (split into multiple slides), walls of text in cards.
### 4.11 Timeline / Phases
Sequential progression over time.
```html
Implementation Roadmap
01
Foundation
Months 1–3
Core infrastructure and tooling
02
Integration
Months 4–6
Platform connections
03
Intelligence
Months 7–9
Advanced capabilities
04
Maturity
Months 10–12
Optimization
```
**When to use:** Project phases, historical progression, step-by-step processes.
**Mistakes:** More than 5 phases (simplify or split), too much detail per phase.
### 4.12 Comparison (A vs B)
Direct contrast between two options or states.
```html
Before & After
Before
Manual Process
Hours of repetitive work, prone to errors, inconsistent results
After
Automated Workflow
Minutes to complete, accurate, consistent every time
```
**When to use:** Problem/solution, old/new, us/them comparisons.
**Mistakes:** Unfair comparisons, too much text, more than 2 items.
### 4.13 Icon Grid
Concept cluster with visual anchors. Icons provide scannable landmarks.
```html
Core Principles
Security
Enterprise-grade protection
Scalability
Grows with your needs
Simplicity
Easy to use and maintain
```
**When to use:** Principles, values, feature categories—abstract concepts that benefit from visual anchors.
**Mistakes:** Generic icons that don't aid understanding, too many items.
### 4.14 Code Block
For technical presentations. Syntax highlighting required.
```html
API Integration
// Initialize the client
const client = new MagicConstructor({
apiKey: process.env.SECRET_KEY,
workspace: 'production'
});
// Query with context
const result = await client.query({
prompt: "Summarize Q3 sales",
context: ['sales-data', 'quarterly-reports']
});
Full documentation at docs.coolproject.io
```
**CSS for code blocks:**
```css
.reveal pre {
font-family: var(--font-mono);
font-size: var(--size-small);
background: var(--bg-dark);
color: var(--text-on-dark);
padding: var(--space-md);
border-radius: var(--card-radius);
text-align: left;
width: 100%;
box-sizing: border-box;
}
.reveal pre code {
font-family: inherit;
line-height: 1.6;
}
```
**When to use:** Technical talks, API demos, implementation examples.
**Mistakes:** Too much code (max ~15 lines), no syntax highlighting, showing boilerplate.
### 4.15 Image with Caption
Full or large image with minimal text.
```html
New dashboard interface
```
**When to use:** Product screenshots, photos, diagrams that need to dominate.
**Mistakes:** Small images with lots of surrounding text, poor image quality.
### 4.16 Breath Slide
Minimal content. Creates pause, lets audience process.
```html
Key Takeaway
Complexity is the enemy of execution.
```
**When to use:** After dense sections, before major transitions, emphasizing key messages.
**Mistakes:** Adding more content, using too frequently.
### 4.17 Closing / CTA
Final slide. Clear next step.
```html
Ready to Begin?
Contact us at hello@example.com
example.com/demo
```
**When to use:** Final slide.
**Mistakes:** No clear CTA, too much contact info, "Questions?" as the only content.
---
## Part 5: Inline Visualizations
For presentation-specific diagrams that don't require external tools.
### 5.1 Process Flow (Horizontal)
```html
Input
→
Process
→
Output
```
```css
.process-flow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
}
.process-step {
text-align: center;
}
.process-node {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto var(--space-xs);
}
.process-arrow {
font-size: 2rem;
color: var(--text-muted);
}
.process-label {
font-size: var(--size-body);
font-weight: 500;
}
```
### 5.2 Simple Bar Chart (SVG)
```html
```
### 5.3 Concept Relationship (Hub and Spoke)
```html
```
### 5.4 When to Use External Tools
Use inline SVG/HTML for:
- Simple process flows (3-5 steps)
- Basic bar/line comparisons
- Concept diagrams (hub-spoke, venn-like)
- Icon-based illustrations
Use external tools (Chart.js, D3, Mermaid) for:
- Data with more than 5-7 points
- Interactive visualizations
- Complex relationships
- Precise data representation
---
## Part 6: Universal Content Principles
These principles apply regardless of theme. For specific word limits, slide type preferences, and rhythm rules, consult the theme file (Part 2).
### 6.1 One Concept Per Slide
Every slide should answer: **"What is the ONE thing I want them to take from this?"**
If you can't answer in one sentence, split the slide.
### 6.2 Assertion-Evidence Structure
Replace bullet points with:
1. **Assertion:** Complete sentence stating the point (as headline)
2. **Evidence:** Visual that supports the assertion
**Instead of:**
```
Benefits:
• Faster development
• Better quality
• Lower costs
```
**Use three separate slides:**
- "Development time drops 50% with automated tooling" + chart
- "Defect rates decreased after implementation" + data
- "Total cost of ownership reduced by $2M annually" + comparison
### 6.3 Slide Count Guidance
- 1 slide per minute of speaking time is a rough maximum
- 20-minute talk = 15-25 slides typical
- More slides with less content each is better than fewer dense slides
- Section breaks and breath slides count toward total
### 6.4 Progressive Disclosure
For complex information, reveal sequentially using RevealJS fragments:
```html
Three Key Factors
Factor One
Explanation here
Factor Two
Explanation here
Factor Three
Explanation here
```
### 6.5 Word Limits and Rhythm
**Consult the theme file** for specific word limits per slide type and content rhythm rules. These vary significantly between themes:
- **Bold theme:** Strict limits (~12 words for assertions), 40%+ impact slides
- **Corporate theme:** Generous limits (~50 words for assertion+evidence), information-dense
---
## Part 7: Anti-Patterns
### 7.1 Presentation Anti-Patterns
**The Data Dump**
Every slide full of data without interpretation.
*Fix:* One insight per slide. State conclusion first.
**The Script Reader**
Slides contain the speaker's full script as bullet points.
*Fix:* Slides show what you can't say; you say what you can't show.
**The Template Trap**
Generic template applied without considering how design serves message.
*Fix:* Start from communication need, not template options.
**The Animation Circus**
Transitions and effects on everything.
*Fix:* Animation only for progressive disclosure or emphasis. Default to none.
**Bullet Point Disease**
Every slide is a bullet list.
*Fix:* Use assertion-evidence structure. If you need a list, question whether it needs to be a slide.
### 7.2 RevealJS-Specific Anti-Patterns
**Fighting the Framework**
Adding flexbox centering when `center: true` is set, or vice versa.
*Fix:* Choose one approach. This skill uses `center: true` with section-level text alignment.
**Viewport Unit Escalation**
Using `vw` units for font sizes without upper bounds, leading to absurdly large text.
*Fix:* Always use `clamp()` with rem-based maximums: `clamp(4rem, 10vw, 8rem)`.
**Fixed Pixel Dimensions**
Hardcoding pixel values for fonts and spacing that don't scale.
*Fix:* Use CSS variables with `clamp()` for responsive sizing.
**Ignoring Slide Dimensions**
Forgetting that RevealJS scales content to fit configured dimensions.
*Fix:* Design for 1920×1080. Test at multiple window sizes.
**Background Color Inline Styles**
Using `style="background: color"` on sections instead of `data-background-color`.
*Fix:* Use `data-background-color="var(--bg-dark)"` for RevealJS to handle properly.
**Typography Utility Specificity**
Creating utility classes like `.stat`, `.label`, `.lead` without sufficient specificity.
*Problem:* `.reveal p` has higher specificity (class + element) than `.stat` alone (just class), so typography utilities on `
` elements get overridden.
*Fix:* Always prefix typography utilities with `.reveal`: use `.reveal .stat`, `.reveal .label`, `.reveal .lead`, etc. This ensures they override the base `.reveal p` styles.
**Color Utility Specificity**
Creating color utilities like `.text-on-dark` without sufficient specificity.
*Problem:* `.reveal .lead` (two classes) has higher specificity than `.text-on-dark` (one class), so `class="lead text-on-dark"` shows the lead's color instead of white.
*Fix:* Always prefix color utilities with `.reveal`: use `.reveal .text-on-dark`, `.reveal .text-muted`, `.reveal .highlight-1`, etc.
**Missing Margin Reset on Stats**
Stats and stat-hero elements inherit `margin-bottom` from `.reveal p`, creating unwanted gaps.
*Fix:* Add `margin-bottom: 0` to `.reveal .stat` and `.reveal .stat-hero` rules.
**Section Background Override**
Adding `background` to `.reveal .slides section` blocks `data-background-color` from showing.
*Problem:* RevealJS applies `data-background-color` behind the section element. If the section has an opaque background, the color is hidden behind a white/colored box.
*Fix:* Never set `background` on `.reveal .slides section`. Set overall page background on `.reveal` only. Use `data-background-color` on individual sections for colored backgrounds.
---
## Part 8: Speaker Notes
### 8.1 RevealJS Notes Syntax
Speaker notes are added inside an `
