Agent skill

Revealjs Presenter

Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication.

Install Revealjs Presenter

skills CLI

$ npx skills add jwynia/agent-skills --skill revealjs-presenter -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install jwynia/agent-skills revealjs-presenter --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/general/document-processing/presentation/revealjs-presenter .claude/skills/revealjs-presenter && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "revealjs-presenter" agent skill from https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter into .claude/skills/revealjs-presenter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "revealjs-presenter", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add jwynia/agent-skills --skill revealjs-presenter -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install jwynia/agent-skills revealjs-presenter --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/general/document-processing/presentation/revealjs-presenter .agents/skills/revealjs-presenter && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "revealjs-presenter" agent skill from https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter into .agents/skills/revealjs-presenter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "revealjs-presenter", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add jwynia/agent-skills --skill revealjs-presenter -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install jwynia/agent-skills revealjs-presenter --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/general/document-processing/presentation/revealjs-presenter .cursor/skills/revealjs-presenter && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "revealjs-presenter" agent skill from https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter into .cursor/skills/revealjs-presenter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "revealjs-presenter", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/jwynia/agent-skills.git --path skills/general/document-processing/presentation/revealjs-presenter

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add jwynia/agent-skills --skill revealjs-presenter -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install jwynia/agent-skills revealjs-presenter --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/general/document-processing/presentation/revealjs-presenter .gemini/skills/revealjs-presenter && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "revealjs-presenter" agent skill from https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter into .gemini/skills/revealjs-presenter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "revealjs-presenter", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install jwynia/agent-skills revealjs-presenter

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add jwynia/agent-skills --skill revealjs-presenter -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/general/document-processing/presentation/revealjs-presenter .github/skills/revealjs-presenter && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "revealjs-presenter" agent skill from https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter into .github/skills/revealjs-presenter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "revealjs-presenter", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add jwynia/agent-skills --skill revealjs-presenter -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install jwynia/agent-skills revealjs-presenter --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jwynia/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/general/document-processing/presentation/revealjs-presenter .opencode/skills/revealjs-presenter && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "revealjs-presenter" agent skill from https://github.com/jwynia/agent-skills/tree/main/skills/general/document-processing/presentation/revealjs-presenter into .opencode/skills/revealjs-presenter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "revealjs-presenter", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: revealjs-presenter
GitHub stars: 170
Token cost: ~11k tokens
SKILL.md length: 2,660 words
Files: 4
Skills in repo: 111
Repo updated: Feb 24, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication.

Works in 6 steps: CSS Variables — Colors, typography… → Typography Application — How CSS… → Word Limits — Maximum words per slide type → …
Creating slide decks
SKILL.md covers When to Use This Skill, Part 1: RevealJS Foundation, Part 2: Theme Selection and Part 3: Core Components, plus 1 more section
Reaches cdnjs.cloudflare.com and fonts.googleapis.com; needs SECRET_KEY

What it does

Revealjs Presenter is an agent skill from jwynia/agent-skills. 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.

Its SKILL.md is about 11k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `themes/bold.md`, `themes/corporate.md` and `themes/delft.md`).

It sits in Documents & Office, covering Slides and decks and Typography. The licence is MIT.

When your agent uses it

Creating slide decks
Pitch presentations
Technical talks
Any reveal.js output

Example prompts

“/revealjs-presenter”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

CSS Variables — Colors, typography sizes, spacing, fonts
Typography Application — How CSS variables apply to elements
Word Limits — Maximum words per slide type
Slide Type Preferences — Which types to prefer, use sparingly, or avoid
Content Rhythm — Impact vs information slide ratios
Structure Rules — Max bullets, card counts, splitting guidance

What it can do on your machine

Read from SKILL.md and the folder at commit e02ec7e. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are html, css and javascript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- cdnjs.cloudflare.com
- fonts.googleapis.com
- fonts.gstatic.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
- SECRET_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Revealjs Presenter loads about 11k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 2,660 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~58
When it runs · the whole SKILL.md, loaded when a task matches: ~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jwynia/agent-skills at commit e02ec7e, republished under its MIT licence (© jwynia). 2,660 words, ~11,156 tokens.

Download SKILL.mdSave it as .claude/skills/revealjs-presenter/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.

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
metadata.version: 1.0
metadata.type: generator
metadata.mode: generative
metadata.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

<!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>
  
  <!-- RevealJS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css">
  
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
  
  <style>
    /* Theme variables and styles go here */
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <!-- Slides go here -->
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js"></script>
  <script>
    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
    });
  </script>
</body>
</html>

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:

CSS Variables — Colors, typography sizes, spacing, fonts
Typography Application — How CSS variables apply to elements
Word Limits — Maximum words per slide type
Slide Type Preferences — Which types to prefer, use sparingly, or avoid
Content Rhythm — Impact vs information slide ratios
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

Read the entire theme file before generating slides
Follow the theme's Content Strategy section for word limits and slide type choices
Include all CSS from the theme's variables and typography sections
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

<div class="bar"></div>
<h2>Section Title</h2>

3.2 Content Container

For slides that need width constraint:

css

.content-wrap {
  max-width: var(--content-max-width);
  width: 100%;
}

.centered .content-wrap {
  margin: 0 auto;
}

3.3 Card Component

css

.card {
  background: var(--bg-secondary);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  border-left: 4px solid var(--accent-1);
}

.card-accent-2 { border-left-color: var(--accent-2); }
.card-accent-3 { border-left-color: var(--accent-3); }
.card-accent-4 { border-left-color: var(--accent-4); }

.card h3 {
  font-size: var(--size-h4);
  margin-bottom: var(--space-xs);
}

.card p {
  font-size: var(--size-body);
  color: var(--text-secondary);
  margin: 0;
}

3.4 Grid Layouts

css

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* For uneven splits */
.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-lg);
}

.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
}

A persistent footer element for branding or context. Placed outside the slides container.

css

.slide-footer {
  position: fixed;
  bottom: 30px;
  left: var(--slide-padding);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 1000;
}

/* Adapt for dark backgrounds */
section[data-background-color] .slide-footer,
.dark-slide .slide-footer {
  color: rgba(255, 255, 255, 0.4);
}

HTML placement (before the reveal div):

html

<body>
  <div class="slide-footer">Company Name | Presentation Title</div>
  <div class="reveal">
    ...
  </div>
</body>

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

<section class="centered">
  <p class="label">Category or Context</p>
  <h1>Presentation Title</h1>
  <div class="bar"></div>
  <p class="lead">Subtitle or tagline goes here</p>
</section>

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 class="centered" data-background-color="var(--bg-dark)">
  <h1 class="text-on-dark">Section Title</h1>
  <div class="bar bar-accent-2"></div>
  <p class="lead text-on-dark">Optional brief context</p>
</section>

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

<section class="centered" data-background-color="#D45D00">
  <h1 class="text-on-dark">The Problem</h1>
  <p class="text-on-dark" style="opacity: 0.8;">Why the current paradigm is broken.</p>
</section>

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

<section class="centered">
  <h1 style="font-size: var(--size-stat-hero);">Simplify.</h1>
</section>

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

<section class="centered">
  <p class="label">Context Label</p>
  <p class="stat-hero text-accent-1">87%</p>
  <p class="stat-label">of users completed onboarding</p>
</section>

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

<section class="centered">
  <p class="label">Expected Outcome</p>
  <div class="bar"></div>
  <p class="stat text-accent-2">50%</p>
  <p class="stat-label">reduction in development time</p>
</section>

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

<section>
  <h2>Key Metrics</h2>
  <div class="bar"></div>
  <div class="grid-3" style="margin-top: var(--space-lg);">
    <div class="centered">
      <p class="stat text-accent-1">50%</p>
      <p class="stat-label">faster development</p>
    </div>
    <div class="centered">
      <p class="stat text-accent-2">75%</p>
      <p class="stat-label">prototype success</p>
    </div>
    <div class="centered">
      <p class="stat text-accent-3">30%</p>
      <p class="stat-label">reduced overhead</p>
    </div>
  </div>
</section>

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

<section class="centered">
  <blockquote style="font-size: var(--size-h2); font-style: italic; max-width: 900px; margin: 0 auto;">
    "The best interface is no interface."
  </blockquote>
  <p class="text-muted" style="margin-top: var(--space-md);">— Golden Krishna</p>
</section>

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

<section class="centered">
  <p class="impact">AI agents are the <span class="highlight-2">primary developers</span>.</p>
</section>

With hero treatment:

html

<section class="centered">
  <p class="impact-hero">Languages built for <span class="highlight-3">humans</span>
  create failure modes for <span class="highlight-1">AI</span>.</p>
</section>

With context label:

html

<section class="centered">
  <p class="label">The Inversion</p>
  <div class="bar"></div>
  <p class="impact">Human interaction becomes the <span class="highlight-2">refinement layer</span>.</p>
</section>

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

<section>
  <h2>User engagement increased 43% after redesign</h2>
  <div class="bar"></div>
  <div class="grid-1-2">
    <div>
      <p class="lead">Key insight or context that supports the assertion goes here. Keep it brief.</p>
    </div>
    <div>
      <!-- Visual evidence: chart, diagram, image, etc. -->
      <img src="chart.svg" alt="Engagement chart showing increase">
    </div>
  </div>
</section>

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

<section>
  <h2>Platform Capabilities</h2>
  <div class="bar"></div>
  <div class="grid-2" style="margin-top: var(--space-lg);">
    <div class="card">
      <h3>Intelligent Agents</h3>
      <p>AI-powered assistants that reason across organizational knowledge</p>
    </div>
    <div class="card card-accent-2">
      <h3>Context Networks</h3>
      <p>Unified access to information across all systems</p>
    </div>
    <div class="card card-accent-3">
      <h3>Custom Applications</h3>
      <p>Accelerated development with built-in AI</p>
    </div>
    <div class="card card-accent-4">
      <h3>Automated Workflows</h3>
      <p>Event-driven processes without manual triggers</p>
    </div>
  </div>
</section>

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

<section>
  <h2>Implementation Roadmap</h2>
  <div class="bar"></div>
  <div class="grid-4" style="margin-top: var(--space-lg);">
    <div>
      <p class="stat text-accent-1" style="font-size: var(--size-h2);">01</p>
      <h4>Foundation</h4>
      <p class="text-muted">Months 1–3</p>
      <p class="text-secondary">Core infrastructure and tooling</p>
    </div>
    <div>
      <p class="stat text-accent-2" style="font-size: var(--size-h2);">02</p>
      <h4>Integration</h4>
      <p class="text-muted">Months 4–6</p>
      <p class="text-secondary">Platform connections</p>
    </div>
    <div>
      <p class="stat text-accent-3" style="font-size: var(--size-h2);">03</p>
      <h4>Intelligence</h4>
      <p class="text-muted">Months 7–9</p>
      <p class="text-secondary">Advanced capabilities</p>
    </div>
    <div>
      <p class="stat text-accent-4" style="font-size: var(--size-h2);">04</p>
      <h4>Maturity</h4>
      <p class="text-muted">Months 10–12</p>
      <p class="text-secondary">Optimization</p>
    </div>
  </div>
</section>

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

<section>
  <h2>Before & After</h2>
  <div class="bar"></div>
  <div class="grid-2" style="margin-top: var(--space-lg);">
    <div class="card" style="border-left-color: var(--text-muted);">
      <p class="label text-muted">Before</p>
      <h3>Manual Process</h3>
      <p>Hours of repetitive work, prone to errors, inconsistent results</p>
    </div>
    <div class="card">
      <p class="label">After</p>
      <h3>Automated Workflow</h3>
      <p>Minutes to complete, accurate, consistent every time</p>
    </div>
  </div>
</section>

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

<section>
  <h2>Core Principles</h2>
  <div class="bar"></div>
  <div class="grid-3" style="margin-top: var(--space-lg);">
    <div class="centered">
      <div class="icon-wrap">
        <!-- Inline SVG icon here -->
        <svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-1)">
          <path d="..."/>
        </svg>
      </div>
      <h4>Security</h4>
      <p class="text-secondary">Enterprise-grade protection</p>
    </div>
    <div class="centered">
      <div class="icon-wrap">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-2)">
          <path d="..."/>
        </svg>
      </div>
      <h4>Scalability</h4>
      <p class="text-secondary">Grows with your needs</p>
    </div>
    <div class="centered">
      <div class="icon-wrap">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-3)">
          <path d="..."/>
        </svg>
      </div>
      <h4>Simplicity</h4>
      <p class="text-secondary">Easy to use and maintain</p>
    </div>
  </div>
</section>

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

<section>
  <h2>API Integration</h2>
  <div class="bar"></div>
  <pre><code class="language-javascript">// 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']
});</code></pre>
  <p class="text-muted" style="margin-top: var(--space-sm);">Full documentation at docs.coolproject.io</p>
</section>

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

<section class="centered">
  <img src="product-screenshot.png" alt="Product interface" 
       style="max-height: 70vh; border-radius: var(--card-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
  <p class="text-muted" style="margin-top: var(--space-md);">New dashboard interface</p>
</section>

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

<section class="centered" data-background-color="var(--bg-secondary)">
  <p class="label">Key Takeaway</p>
  <div class="bar"></div>
  <h2>Complexity is the enemy of execution.</h2>
</section>

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

<section class="centered" data-background-color="var(--bg-dark)">
  <h1 class="text-on-dark">Ready to Begin?</h1>
  <div class="bar bar-accent-2"></div>
  <p class="lead text-on-dark">Contact us at hello@example.com</p>
  <p class="text-muted" style="margin-top: var(--space-xl);">example.com/demo</p>
</section>

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

<div class="process-flow">
  <div class="process-step">
    <div class="process-node" style="background: var(--accent-1);"></div>
    <p class="process-label">Input</p>
  </div>
  <div class="process-arrow">→</div>
  <div class="process-step">
    <div class="process-node" style="background: var(--accent-2);"></div>
    <p class="process-label">Process</p>
  </div>
  <div class="process-arrow">→</div>
  <div class="process-step">
    <div class="process-node" style="background: var(--accent-3);"></div>
    <p class="process-label">Output</p>
  </div>
</div>

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

<svg viewBox="0 0 400 200" style="max-width: 600px;">
  <!-- Bars -->
  <rect x="50" y="120" width="60" height="60" fill="var(--accent-1)"/>
  <rect x="130" y="80" width="60" height="100" fill="var(--accent-2)"/>
  <rect x="210" y="40" width="60" height="140" fill="var(--accent-3)"/>
  <rect x="290" y="20" width="60" height="160" fill="var(--accent-4)"/>
  
  <!-- Labels -->
  <text x="80" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q1</text>
  <text x="160" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q2</text>
  <text x="240" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q3</text>
  <text x="320" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q4</text>
</svg>

5.3 Concept Relationship (Hub and Spoke)

html

<svg viewBox="0 0 400 300" style="max-width: 500px;">
  <!-- Lines to spokes -->
  <line x1="200" y1="150" x2="100" y2="60" stroke="var(--text-muted)" stroke-width="2"/>
  <line x1="200" y1="150" x2="300" y2="60" stroke="var(--text-muted)" stroke-width="2"/>
  <line x1="200" y1="150" x2="100" y2="240" stroke="var(--text-muted)" stroke-width="2"/>
  <line x1="200" y1="150" x2="300" y2="240" stroke="var(--text-muted)" stroke-width="2"/>
  
  <!-- Center hub -->
  <circle cx="200" cy="150" r="50" fill="var(--accent-1)"/>
  <text x="200" y="155" text-anchor="middle" fill="white" font-weight="600">Core</text>
  
  <!-- Spokes -->
  <circle cx="100" cy="60" r="35" fill="var(--accent-2)"/>
  <text x="100" y="65" text-anchor="middle" fill="white" font-size="12">Feature A</text>
  
  <circle cx="300" cy="60" r="35" fill="var(--accent-3)"/>
  <text x="300" y="65" text-anchor="middle" fill="white" font-size="12">Feature B</text>
  
  <circle cx="100" cy="240" r="35" fill="var(--accent-4)"/>
  <text x="100" y="245" text-anchor="middle" fill="white" font-size="12">Feature C</text>
  
  <circle cx="300" cy="240" r="35" fill="var(--accent-1)"/>
  <text x="300" y="245" text-anchor="middle" fill="white" font-size="12">Feature D</text>
</svg>

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:

Assertion: Complete sentence stating the point (as headline)
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

<section>
  <h2>Three Key Factors</h2>
  <div class="bar"></div>
  <div class="grid-3">
    <div class="fragment">
      <h4>Factor One</h4>
      <p>Explanation here</p>
    </div>
    <div class="fragment">
      <h4>Factor Two</h4>
      <p>Explanation here</p>
    </div>
    <div class="fragment">
      <h4>Factor Three</h4>
      <p>Explanation here</p>
    </div>
  </div>
</section>

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

Show full SKILL.md (924 more words)Show less

Part 8: Speaker Notes

8.1 RevealJS Notes Syntax

Speaker notes are added inside an <aside> element with class notes:

html

<section>
  <h2>Slide Headline</h2>
  <div class="bar"></div>
  <p class="lead">Visible content here</p>
  
  <aside class="notes">
    Speaker notes go here. These are visible in speaker view (press 'S')
    but not shown to the audience.
    
    Multiple paragraphs work fine.
  </aside>
</section>

Access speaker view by pressing S during presentation. Opens a new window with current slide, next slide, notes, and timer.

8.2 Notes for TTS/Video Recording

When notes will be read by TTS or recorded as voiceover, structure them for spoken delivery:

Pacing markers:

html

<aside class="notes">
This is the opening statement. [PAUSE]

Now we transition to the key insight. [PAUSE]

The data speaks for itself—forty-three percent improvement.
</aside>

Pronunciation hints (for TTS or unfamiliar terms):

html

<aside class="notes">
The API uses OAuth (OH-auth) for authentication.

Results show a 50% improvement in MTTR (mean time to recovery, 
or "em-tee-tee-arr" if using the acronym).
</aside>

Emphasis markers (for recording, stripped for TTS):

html

<aside class="notes">
This is [EMPHASIS: critical] to understand before we proceed.

We saw not ten, not twenty, but [EMPHASIS: fifty] percent gains.
</aside>

8.3 Timing and Word Count

Speaking pace reference:

Slow/deliberate: ~120 words per minute
Conversational: ~150 words per minute
Energetic: ~170 words per minute

Per-slide timing targets:

Slide Type	Target Duration	Word Count (150 wpm)
Title	15-30 sec	40-75 words
Section Break	10-20 sec	25-50 words
Single Word/Phrase	10-15 sec	25-40 words
Hero Stat	20-40 sec	50-100 words
Standard Stat	15-30 sec	40-75 words
Assertion + Evidence	45-90 sec	110-225 words
Card Grid	60-120 sec	150-300 words
Timeline	60-90 sec	150-225 words
Closing	30-60 sec	75-150 words

Total presentation timing: sum of slide durations, plus ~10% buffer for transitions.

8.4 Speech-to-Slides Workflow

When starting with a written speech and decomposing into slides:

Step 1: Identify assertion boundaries

Mark every place the speech makes a distinct claim or shifts topic. Each becomes a slide candidate.

[SLIDE] Our platform reduces development time significantly.
We measured teams before and after adoption. [SLIDE] The data 
showed a 50% reduction in time-to-deployment. [SLIDE] But 
speed isn't the only benefit...

Step 2: Classify each segment

For each marked segment, identify the slide type:

Is it a single key number? → Stat slide
Is it a claim with supporting detail? → Assertion + Evidence
Is it a transition between topics? → Section Break or Breath Slide
Is it listing multiple items? → Card Grid (if 2-4) or split further

Step 3: Extract visual content

From each segment, pull out:

Headline: The core assertion (one sentence max)
Visual need: What image/chart/diagram supports this?
Notes: The remaining spoken content

Step 4: Balance visual and spoken

The slide shows what's hard to say. The notes say what's hard to show.

On Slide	In Notes
"Development time dropped 50%"	"When we measured twelve teams over six months, comparing their velocity before and after platform adoption, the results were consistent..."
[Bar chart showing reduction]	"Notice how the improvement was immediate—within the first sprint—and sustained over the full period."
Key data points	Context, caveats, methodology
Conclusions	Reasoning process

8.5 Slides-to-Speech Workflow

When generating speaker notes for existing slides:

For each slide, answer:

What context does the audience need that isn't on screen?
What's the transition from the previous slide?
What interpretation or insight accompanies the visual?
What's the bridge to the next slide?

Structure for each note:

html

<aside class="notes">
[TRANSITION: How this connects to previous slide]

[MAIN CONTENT: The spoken explanation, context, story]

[BRIDGE: Setup for what comes next]
</aside>

Example:

html

<section class="centered">
  <p class="label">Key Metric</p>
  <p class="stat text-accent-1">50%</p>
  <p class="stat-label">reduction in development time</p>
  
  <aside class="notes">
So what did we actually measure? [PAUSE]

We tracked twelve teams over six months—half using the platform, 
half using their existing workflows. Same project types, same 
skill levels.

The platform teams shipped in half the time. Not by cutting 
corners—their defect rates actually improved. They shipped 
faster AND better.

But speed is just one dimension. Let's look at what happened 
to those prototypes that used to die in pilot purgatory...
  </aside>
</section>

8.6 Notes Formatting for Different Outputs

For live presentation (speaker view):

Full sentences, natural paragraphs
Reminder cues: "[CHECK TIME]", "[DEMO HERE]", "[ASK AUDIENCE]"
Key stats/names you might forget under pressure

For TTS processing:

No brackets except pacing markers [PAUSE]
Numbers written as words for correct pronunciation: "fifty percent" not "50%"
Acronyms expanded or pronunciation-guided on first use
Shorter sentences (easier for TTS phrasing)

For video recording script:

Include all spoken content verbatim
Mark emphasis and pacing
Note where to look (at camera, at screen)
Include timing targets per slide

8.7 Enabling Speaker Notes Plugin

Speaker notes work by default, but for the separate speaker view window:

javascript

Reveal.initialize({
  // ... other config
  
  // Optional: configure notes behavior
  showNotes: false,  // Don't show notes in main view (default)
  
  // For speaker view keyboard shortcut
  keyboard: {
    83: function() { Reveal.toggleOverview(); }  // 'S' key
  }
});

To enable the separate speaker notes window with timer and preview, press S during presentation. This requires the presentation to be served over HTTP (not just opened as a local file) for the popup window to work in most browsers.

8.8 Notes Anti-Patterns

The Script Dump
Pasting entire paragraphs meant to be read verbatim, creating dependency on notes.
Fix: Notes should be prompts and context, not a teleprompter script (unless explicitly for TTS).

The Bare Minimum
Notes that just repeat what's on the slide: "Talk about the 50% reduction."
Fix: Notes add what's NOT on the slide—context, transitions, interpretation.

The Forgetter
No notes at all, assuming you'll remember.
Fix: At minimum, note the transition logic between slides and any stats you might misremember.

The Novelist
500 words of notes for a slide you'll show for 30 seconds.
Fix: Match note length to slide duration. See timing table above.

Part 9: Pre-Flight Checklist

Before delivering the presentation:

Structure

Main message clear within first 2 slides
One concept per slide throughout
Section breaks between major topics
Closing has clear call to action

Content

No slide exceeds word count limits
Assertion-evidence structure used (not bullet lists)
Stats have context (labels, comparisons)
No orphan slides (single slide sections)

Visual

Consistent use of color accents
Typography hierarchy clear
No text smaller than --size-small
Images high enough resolution

Speaker Notes

Every slide has notes (even if brief)
Transitions between slides noted
Key stats/names included as memory aids
Total word count matches target duration
If TTS: numbers written as words, acronyms handled
If video: timing targets per slide noted

Technical

All fonts load (Google Fonts links correct)
RevealJS initializes without errors
Works at multiple viewport sizes
Fragment animations work as expected
Speaker view opens correctly (press 'S')

Accessibility

Color contrast meets WCAG AA (4.5:1 for text)
Alt text on meaningful images
Text not embedded in images
Readable without animations

Complete Example: Minimal Presentation

This example shows a minimal presentation structure. For full presentations, use the complete CSS from themes/bold.md. This example uses a subset for brevity.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Update</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
  
  <style>
    :root {
      --bg-primary: #ffffff;
      --bg-secondary: #f5f5f7;
      --bg-dark: #1a1a2e;
      --text-primary: #1a1a1a;
      --text-secondary: #4a4a4a;
      --text-muted: #7a7a7a;
      --text-on-dark: #ffffff;
      --accent-1: #0066cc;
      --accent-2: #00a86b;
      --font-display: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
      --size-stat: clamp(4rem, 10vw, 8rem);
      --size-h1: clamp(6rem, 8vw, 9rem);
      --size-h2: clamp(4rem, 12vw, 7rem);
      --size-body: clamp(1.25rem, 2vw, 2rem);
      --size-body-lg: clamp(1.5rem, 2.5vw, 2.25rem);
      --size-label: clamp(1.5rem, 2.5vw, 2.25rem);
      --space-sm: 1rem;
      --space-md: 2rem;
      --bar-width: 120px;
      --bar-height: 8px;
    }

    .reveal { font-family: var(--font-body); color: var(--text-primary); }
    .reveal h1, .reveal h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.5em 0; }
    .reveal h1 { font-size: var(--size-h1); }
    .reveal h2 { font-size: var(--size-h2); }
    .reveal p { font-size: var(--size-body); line-height: 1.5; margin: 0 0 1em 0; }
    .reveal .slides section { text-align: left; padding: 60px; }
    .reveal .slides section.centered { text-align: center; }

    .reveal .label { font-family: var(--font-mono); font-size: var(--size-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-1); }
    .reveal .lead { font-size: var(--size-body-lg); color: var(--text-secondary); }
    .bar { width: var(--bar-width); height: var(--bar-height); background: var(--accent-1); margin-bottom: var(--space-md); }
    .centered .bar { margin-left: auto; margin-right: auto; }
    .reveal .stat { font-family: var(--font-mono); font-size: var(--size-stat); font-weight: 700; line-height: 1; color: var(--accent-1); margin-bottom: 0; }
    .reveal .stat-label { font-size: var(--size-body-lg); color: var(--text-secondary); margin-top: var(--space-sm); }
    .text-on-dark { color: var(--text-on-dark); }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      
      <!-- Title -->
      <section class="centered">
        <p class="label">Q3 Update</p>
        <h1>Project Alpha</h1>
        <div class="bar"></div>
        <p class="lead">Engineering Progress Report</p>
        
        <aside class="notes">
Good morning everyone. Today I'll walk you through where we stand 
on Project Alpha as we close out Q3.

We've got good news to share, and a clear path to our October 
target. Let's start with the results.
        </aside>
      </section>
      
      <!-- Section Break -->
      <section class="centered" data-background-color="#1a1a2e">
        <h1 class="text-on-dark">Results</h1>
        
        <aside class="notes">
[PAUSE for transition]

So—where do we actually stand?
        </aside>
      </section>
      
      <!-- Stat -->
      <section class="centered">
        <p class="label">Key Metric</p>
        <p class="stat">73%</p>
        <p class="stat-label">milestone completion rate</p>
        
        <aside class="notes">
Seventy-three percent of our planned milestones are complete. 
That's ahead of where we projected in the Q2 review.

More importantly, the remaining twenty-seven percent are all 
in active development—no blockers, no unknowns.
        </aside>
      </section>
      
      <!-- Content -->
      <section>
        <h2>On track for October launch</h2>
        <div class="bar"></div>
        <p class="lead">Core features complete. Final testing phase begins next week.</p>
        
        <aside class="notes">
What does this mean for the timeline? We're green for October.

Core features locked last Friday. The team is now focused 
entirely on hardening—edge cases, performance tuning, and 
the integration test suite.

Testing phase kicks off Monday. We'll have preliminary 
results by end of next week.
        </aside>
      </section>
      
      <!-- Closing -->
      <section class="centered" data-background-color="#1a1a2e">
        <h1 class="text-on-dark">Questions?</h1>
        <div class="bar" style="background: var(--accent-2);"></div>
        <p class="text-on-dark">team@example.com</p>
        
        <aside class="notes">
That's the summary. Happy to dig into any area—timeline, 
technical details, resource allocation.

What questions do you have?

[WAIT FOR QUESTIONS]

If anything comes up later, reach out to the team alias.
        </aside>
      </section>
      
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      center: true,
      transition: 'fade',
      transitionSpeed: 'fast',
      width: 1920,
      height: 1080,
      margin: 0.08
    });
  </script>
</body>
</html>

Appendix: Creating Custom Themes

To create a custom theme:

Copy themes/bold.md to a new file (e.g., themes/corporate.md)
Modify the CSS variables to match your brand:

css

:root {
  /* Corporate theme example */
  --bg-primary: #ffffff;
  --bg-dark: #003B5C;
  --accent-1: #00A3E0;
  --accent-2: #78BE20;
  --accent-3: #D45D00;
  --font-display: 'Libre Franklin', sans-serif;
}

Add your theme to the Available Themes table in Part 2.3
Reference your theme when generating presentations

Theme files should include all CSS variables and typography rules needed for a complete presentation.

Files

SKILL.md and 3 other files in skills/general/document-processing/presentation/revealjs-presenter of jwynia/agent-skills.

SKILL.md
themes/bold.md
themes/corporate.md
themes/delft.md

Open the folder on GitHubat commit e02ec7e

Compare with similar skills

Revealjs Presenter next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Revealjs Presenter compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Revealjs Presenter this skilljwynia/agent-skills	170	—	~11k	Automated safety check: Pass	MIT	7 mo ago
Make A Deckmanalkaff/opendesign	261	—	~1.2k	Automated safety check: Pass	MIT	3 mo ago
Slide Page Design RulesTHU-MAIC/OpenMAIC	40k	—	~3.8k	Automated safety check: Pass	MIT	today
World Class Carouselhappycapy-ai/Happycapy-skills	137	—	~16k	Automated safety check: Notes	MIT	1 mo ago
BrandingIgorWarzocha/Opencode-Workflows	122	—	~586	Automated safety check: Pass	None	8 mo ago
Theme Factoryanthropics/skills	180k	47 repos	~781	Automated safety check: Pass	Apache-2.0	yesterday

Similar skills

Make A Deck
manalkaff/opendesign
A skill your agent uses when the user asks for a slide presentation.
261 GitHub stars~1.2k tokensUpdated 3 mo ago
Documents & OfficeAuto-check passed
Slide Page Design Rules
THU-MAIC/OpenMAIC
Design rules for editing a slide page: canvas geometry, text height table, type scale, contrast pairs, spacing rhythm and which element type carries which content.
40k GitHub stars~3.8k tokensUpdated today
Documents & OfficeAuto-check passed
World Class Carousel
happycapy-ai/Happycapy-skills
Generate world-class Instagram carousel content on any topic.
137 GitHub stars~16k tokensUpdated 1 mo ago
Documents & OfficeAuto-check: notes
Branding
IgorWarzocha/Opencode-Workflows
Apply official brand colors and typography to professional artifacts.
122 GitHub stars~586 tokensUpdated 8 mo ago
Documents & OfficeAuto-check passed
Theme Factory
anthropics/skills
Official
Applies one of ten preset color and font themes to slide decks, documents or HTML pages, or creates a new theme on the fly after you choose from a showcase.
180k GitHub starsUsed in 47 repos~781 tokens
Frontend & DesignAuto-check passed
Openkb Deck Neon
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
4.8k GitHub starsUsed in 1 repo~4.3k tokens
Frontend & DesignAuto-check passed

Questions about Revealjs Presenter

What does Revealjs Presenter do?

Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication. Revealjs Presenter is an agent skill from jwynia/agent-skills. Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication.

When should I use Revealjs Presenter?

Revealjs Presenter fits situations like: creating slide decks; pitch presentations; technical talks; any reveal.js output.

How do I install Revealjs Presenter in Claude Code?

Run `npx skills add jwynia/agent-skills --skill revealjs-presenter -a claude-code`. Or copy the skill folder (skills/general/document-processing/presentation/revealjs-presenter in jwynia/agent-skills) into .claude/skills/revealjs-presenter in your project. Claude Code loads it when a task matches its description.

How do I install Revealjs Presenter in Codex?

Run `npx skills add jwynia/agent-skills --skill revealjs-presenter -a codex`. Or copy the skill folder (skills/general/document-processing/presentation/revealjs-presenter in jwynia/agent-skills) into .agents/skills/revealjs-presenter in your project. Codex loads it when a task matches its description.

Can I use Revealjs Presenter in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jwynia/agent-skills --skill revealjs-presenter -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/revealjs-presenter, .gemini/skills/revealjs-presenter, .github/skills/revealjs-presenter and .opencode/skills/revealjs-presenter in your project.

What does Revealjs Presenter need to run?

Going by SKILL.md and its folder, Revealjs Presenter needs credentials named SECRET_KEY.

Does Revealjs Presenter access the network?

SKILL.md names 3 domains. In commands or code: cdnjs.cloudflare.com, fonts.googleapis.com and fonts.gstatic.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Revealjs Presenter safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Revealjs Presenter use?

Revealjs Presenter is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Revealjs Presenter use?

About 11k tokens (SKILL.md is roughly 45k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Revealjs Presenter?

Skills that share tags, products or a category with Revealjs Presenter: Make A Deck (manalkaff/opendesign, 261 stars), Slide Page Design Rules (THU-MAIC/OpenMAIC, 40k stars), World Class Carousel (happycapy-ai/Happycapy-skills, 137 stars) and Branding (IgorWarzocha/Opencode-Workflows, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Revealjs Presenter?

jwynia (a GitHub user) maintains it in jwynia/agent-skills, which has 170 GitHub stars. The repository holds 111 skills in this directory. The repository was last updated on February 24, 2026.

Source: jwynia/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Revealjs Presenter

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

RevealJS Presenter Skill

When to Use This Skill

Part 1: RevealJS Foundation

1.1 Required Configuration

1.2 Base HTML Structure

1.3 Base CSS Reset

Part 2: Theme Selection

2.1 What Themes Control

2.2 Default Theme

2.3 How to Apply a Theme

2.4 Available Themes

Part 3: Core Components

3.1 The Bar (Accent Element)

3.2 Content Container

3.3 Card Component

3.4 Grid Layouts

3.5 Slide Footer

Part 4: Slide Types

4.1 Title Slide

4.2 Section Break

4.3 Single Word / Phrase

4.4 Hero Stat

4.5 Standard Stat

4.6 Stat Cluster

4.7 Quote

4.8 Single Assertion (Impact Statement)

4.9 Assertion + Evidence

4.10 Card Grid (2-4 items)

4.11 Timeline / Phases

4.12 Comparison (A vs B)

4.13 Icon Grid

4.14 Code Block

4.15 Image with Caption

4.16 Breath Slide

4.17 Closing / CTA

Part 5: Inline Visualizations

5.1 Process Flow (Horizontal)

5.2 Simple Bar Chart (SVG)

5.3 Concept Relationship (Hub and Spoke)

5.4 When to Use External Tools

Part 6: Universal Content Principles

6.1 One Concept Per Slide

6.2 Assertion-Evidence Structure

6.3 Slide Count Guidance

6.4 Progressive Disclosure

6.5 Word Limits and Rhythm

Part 7: Anti-Patterns

7.1 Presentation Anti-Patterns

7.2 RevealJS-Specific Anti-Patterns

Part 8: Speaker Notes

8.1 RevealJS Notes Syntax

8.2 Notes for TTS/Video Recording

8.3 Timing and Word Count

8.4 Speech-to-Slides Workflow

8.5 Slides-to-Speech Workflow

8.6 Notes Formatting for Different Outputs

8.7 Enabling Speaker Notes Plugin

8.8 Notes Anti-Patterns

Part 9: Pre-Flight Checklist

Structure

Content

Visual

Speaker Notes

Technical

Accessibility