# Revealjs

> Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.

- Skill: `zaizira/revealjs` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zaizira/revealjs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zaizira/revealjs/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: zaizira (https://skillmd.com/u/zaizira)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/zaizira/revealjs

---


# Reveal.js Presentations

Create HTML presentations using reveal.js. No build step required - just open the HTML in a browser.

## What You Create

A reveal.js presentation consists of:

1. **HTML file** - Contains slides and loads reveal.js from CDN
2. **CSS file** - Custom styles for layouts, colors, typography, and components

## Design Principles

**CRITICAL**: Before creating any presentation, analyze the content and choose appropriate design elements:

1. **Consider the subject matter**: What is this presentation about? What tone, industry, or mood does it suggest?
2. **Check for branding**: If the user mentions a company/organization, consider their brand colors and identity
3. **Match palette to content**: Select colors that reflect the subject
4. **State your approach**: Explain your design choices before writing code

**Requirements**:
- ✅ State your content-informed design approach BEFORE writing code
- ✅ Use web-safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via `@import` in CSS
- ✅ Create clear visual hierarchy through size, weight, and color
- ✅ Ensure readability: strong contrast, appropriately sized text, clean alignment
- ✅ Be consistent: repeat patterns, spacing, and visual language across slides
- ✅ **Always use `pt` (points) for font sizes** - slides are fixed-size, so `pt` is predictable and familiar (like PowerPoint/Keynote). Never use `em`, `rem`, or `px` for font sizes.

### Color Palette Selection

**Choosing colors creatively**:
- **Think beyond defaults**: What colors genuinely match this specific topic? Avoid autopilot choices.
- **Consider multiple angles**: Topic, industry, mood, energy level, target audience, brand identity (if mentioned)
- **Be adventurous**: Try unexpected combinations - a healthcare presentation doesn't have to be green, finance doesn't have to be navy
- **Build your palette**: Pick 3-5 colors that work together (dominant colors + supporting tones + accent)
- **Ensure contrast**: Text must be clearly readable on backgrounds

**Example color palettes** (use these to spark creativity - choose one, adapt it, or create your own):

1. **Classic Blue**: Deep navy (#1C2833), slate gray (#2E4053), silver (#AAB7B8), off-white (#F4F6F6)
2. **Teal & Coral**: Teal (#5EA8A7), deep teal (#277884), coral (#FE4447), white (#FFFFFF)
3. **Bold Red**: Red (#C0392B), bright red (#E74C3C), orange (#F39C12), yellow (#F1C40F), green (#2ECC71)
4. **Warm Blush**: Mauve (#A49393), blush (#EED6D3), rose (#E8B4B8), cream (#FAF7F2)
5. **Burgundy Luxury**: Burgundy (#5D1D2E), crimson (#951233), rust (#C15937), gold (#997929)

### Slide Content Principles

**Diverse presentation is key.** Even when slides have similar content types, vary the visual presentation:

- Use **different layouts** across slides: columns on one, stacked boxes on another, callouts with icons on a third
- Mix container styles: plain text, boxes, callouts, blockquotes
- Use **visual hierarchy**: `<strong>` for key terms, different colors to distinguish categories
- Break up lists with other elements (quotes, callouts, columns)
- Don't repeat the same layout pattern on consecutive slides

**Keep it scannable:**
- Short bullet points, not paragraphs
- One main idea per slide when possible
- Use icons (Font Awesome) to add visual interest

**When a slide has less content, make it bigger** - don't leave empty space with tiny text.

## Basic HTML Structure

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Presentation Title</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section id="slide-1">
        <h1>Title</h1>
        <div class="content">
          <!-- Content here -->
        </div>
      </section>
      <!-- More slides -->
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js"></script>
  <script>
    Reveal.initialize({
      controls: true,
      progress: true,
      slideNumber: true,
      hash: true,
      transition: 'slide',
      center: false
    });
  </script>
</body>
</html>
```

## CSS Variables (styles.css)

```css
:root {
  --background-color: #ffffff;
  --heading-font: "Source Sans Pro", Helvetica, sans-serif;
  --body-font: "Source Sans Pro", Helvetica, sans-serif;
  --base-font-size: 32px;
  --text-size: 16pt;
  --h1-size: 48pt;
  --h2-size: 36pt;
  --h3-size: 24pt;
  --primary-color: #2196F3;
  --secondary-color: #ff9800;
  --text-color: #222;
  --muted-color: #666;
  --box-bg: #f5f5f5;
  --box-border: #ddd;
}

.reveal { font-family: var(--body-font); }
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
}
```

## Multi-column Layouts (Inline CSS Grid)

```html
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 40px;">
  <div>Narrow sidebar</div>
  <div>Wide main content</div>
</div>
```

## CSS Components

### Boxes
```css
.box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: 8px;
  padding: 20px;
}
```

### Callouts
```css
.callout {
  border-left: 6px solid var(--primary-color);
  padding: 15px 20px;
  margin: 15px 0;
  background: #f9f9f9;
  border-radius: 8px;
}
.callout-blue { border-left-color: #2196F3; background: #e3f2fd; }
.callout-orange { border-left-color: #ff9800; background: #fff3e0; }
.callout-green { border-left-color: #4caf50; background: #e8f5e9; }
```

### Icons (Font Awesome)
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<i class="fas fa-check"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-lightbulb"></i>
```

## Text Size Utilities

```css
.text-lg { font-size: 18pt; }
.text-xl { font-size: 20pt; }
.text-2xl { font-size: 24pt; }
.text-3xl { font-size: 28pt; }
.text-4xl { font-size: 32pt; }
.text-muted { color: var(--muted-color); }
.text-center { text-align: center; }
```

## Built-in Reveal.js Classes

- `r-fit-text` - Auto-size text to fill slide
- `r-stretch` - Stretch element to fill remaining vertical space
- `r-stack` - Layer elements on top of each other

## Reveal.js Configuration

```javascript
Reveal.initialize({
  controls: true,      // Show navigation arrows
  progress: true,      // Show progress bar
  slideNumber: true,   // Show slide numbers
  hash: true,          // Update URL hash for each slide
  transition: 'slide', // none/fade/slide/convex/concave/zoom
  center: false,       // Vertical centering (false = top align)
  autoSlide: 0,        // Auto-advance (ms), 0 to disable
  loop: false          // Loop presentation
});
```