| name | slides-revealjs |
| description | Use when creating or updating presentation decks with reveal.js, including setup, slide authoring, plugins, animation, navigation, and export. |
Slides Skill for reveal.js
Overview
This skill guides AI to create and update reveal.js slides quickly and reliably. Prefer documented reveal.js capabilities over guessed APIs, config keys, or plugin behavior.
When to Use
- Creating a reveal.js presentation from scratch.
- Migrating existing content into reveal.js slides (HTML or Markdown).
- Enabling advanced behaviors like Fragments, Auto-Animate, Speaker View, Math, Code Highlight, PDF export, or Scroll View.
- Integrating reveal.js into npm/ESM or React projects.
Core Workflow
- Analyze the content first and state a content-informed design approach before writing code (topic, tone, audience, branding, and palette rationale).
- Choose the integration mode: Static HTML (fastest) or npm/ESM (engineering).
- If converting from an existing doc, inventory all source sections/items first and map each item to at least one slide.
- Build the minimal deck structure:
.reveal > .slides > section.
- Register only required plugins (Markdown, Highlight, Notes, Math, Search, Zoom, etc.).
- Author content and interactions: horizontal/vertical slides, fragments, backgrounds, transitions, media.
- Configure runtime behavior: navigation, keyboard,
hash, slideNumber, autoSlide, view: 'scroll'.
- Validate and ship: local preview, Speaker View, print/PDF export, and optional API control code.
Implementation Templates
1) Static HTML (UMD)
<html>
<head>ex
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/solarized.css" />
<link rel="stylesheet" href="plugin/highlight/zenburn.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
Reveal.initialize({
hash: true,
slideNumber: 'c/t',
plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
});
</script>
</body>
</html>
2) npm/ESM
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
import Notes from 'reveal.js/plugin/notes/notes.esm.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/white.css';
const deck = new Reveal({
hash: true,
slideNumber: 'c/t',
plugins: [Markdown, Highlight, Notes],
});
await deck.initialize();
3) Markdown Slide Block
<section data-markdown>
<textarea data-template>
## Slide 1
---
## Slide 2
</textarea>
</section>
Feature Playbook
- Markdown: Enable the Markdown plugin; external markdown requires a local web server.
- Code: Enable Highlight and use
data-line-numbers plus step highlights via |.
- Math: Use
RevealMath.KaTeX by default (or MathJax when required).
- Speaker Notes: Enable Notes and press
S for presenter view.
- Auto-Animate: Use adjacent
<section data-auto-animate> and data-id for precise matching.
- Backgrounds: Use
data-background-* (color/image/video/iframe).
- Architecture diagrams: Prefer Mermaid for system/process/flow slides to increase clarity and visual consistency.
- Scroll View: Use
view: 'scroll' with optional scrollSnap and scrollLayout.
- PDF: Use
?print-pdf then browser print to PDF.
Reveal.js Tips
The items below should be preferred in this skill.
Design Principles (CRITICAL)
Before creating any presentation, analyze the content and choose design elements intentionally:
- Consider the subject matter: what is this presentation about, and what tone/industry/mood does it suggest?
- Check for branding: if the user mentions a company or organization, align with likely brand identity and colors.
- Match palette to content: choose colors that reflect the topic, audience, and communication goal.
- State your approach first: explain your design choices before writing slide code.
Required behavior:
- State the content-informed design approach before writing code.
- Use web-safe fonts (
Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via @import.
- Create clear visual hierarchy through size, weight, and color.
- Ensure readability with strong contrast, appropriately sized text, and clean alignment.
- Keep visual consistency across slides: repeated spacing, component patterns, and color language.
- Always use
pt units for font sizes in slide CSS/inline styles. Never use em, rem, or px for font-size values.
Color Palette Selection
Choose colors creatively based on the actual content:
- Think beyond defaults: avoid autopilot palettes.
- Consider multiple angles: topic, industry, mood, energy level, audience, and mentioned brand identity.
- Be adventurous when useful: healthcare is not required to be green; finance is not required to be navy.
- Build a 3-5 color system: dominant colors, supporting tones, and accent colors.
- Always verify text/background contrast for readability.
Palette references (adapt freely or create your own):
- Classic Blue: deep navy
#1C2833, slate gray #2E4053, silver #AAB7B8, off-white #F4F6F6
- Teal and Coral: teal
#5EA8A7, deep teal #277884, coral #FE4447, white #FFFFFF
- Bold Red: red
#C0392B, bright red #E74C3C, orange #F39C12, yellow #F1C40F, green #2ECC71
- Warm Blush: mauve
#A49393, blush #EED6D3, rose #E8B4B8, cream #FAF7F2
- Burgundy Luxury: burgundy
#5D1D2E, crimson #951233, rust #C15937, gold #997929
- Deep Purple and Emerald: purple
#B165FB, dark blue #181B24, emerald #40695B, white #FFFFFF
- Cream and Forest Green: cream
#FFE1C7, forest green #40695B, white #FCFCFC
- Pink and Purple: pink
#F8275B, coral #FF574A, rose #FF737D, purple #3D2F68
- Lime and Plum: lime
#C5DE82, plum #7C3A5F, coral #FD8C6E, blue-gray #98ACB5
- Black and Gold: gold
#BF9A4A, black #000000, cream #F4F6F6
- Sage and Terracotta: sage
#87A96B, terracotta #E07A5F, cream #F4F1DE, charcoal #2C2C2C
- Charcoal and Red: charcoal
#292929, red #E33737, light gray #CCCBCB
- Vibrant Orange: orange
#F96D00, light gray #F2F2F2, charcoal #222831
- Forest Green: black
#191A19, green #4E9F3D, dark green #1E5128, white #FFFFFF
- Retro Rainbow: purple
#722880, pink #D72D51, orange #EB5C18, amber #F08800, gold #DEB600
- Vintage Earthy: mustard
#E3B448, sage #CBD18F, forest green #3A6B35, cream #F4F1DE
- Coastal Rose: old rose
#AD7670, beaver #B49886, eggshell #F3ECDC, ash gray #BFD5BE
- Orange and Turquoise: light orange
#FC993E, grayish turquoise #667C6F, white #FCFCFC
Slide Content Principles
Even when slides share similar content types, avoid repeating the same visual pattern.
- Vary layout patterns across neighboring slides (columns, stacked blocks, cards, split hero, quote-led).
- Mix container styles (plain text, styled panels, blockquotes, icon-led callouts).
- Build hierarchy actively (
<strong>, color emphasis, type scale, spacing rhythm).
- Break up long list sequences with visual elements and structural transitions.
- Do not repeat identical layout structures on consecutive slides.
- Keep slides scannable: short bullets, one main idea per slide where possible.
- Use icons (for example Font Awesome) when they improve clarity and pacing.
- When a slide has less content, increase scale and composition impact instead of leaving sparse tiny text.
30-Second Design Review Checklist
Run this before considering a deck "done":
- Deck defaults to a light tone unless explicitly requested otherwise (prefer official reveal
solarized theme).
- Aesthetic direction is explicit and consistent (not mixed styles).
- Typography has clear hierarchy (display vs body) and readable line lengths.
- Palette has one dominant tone and one intentional accent color.
- At least one memorable visual motif exists (layout move, background treatment, or motion sequence).
- Motion supports narrative pacing (not scattered decorative effects).
- Architecture/process slides use Mermaid when applicable instead of ad-hoc ASCII bullets.
- Slides stay readable on both desktop and mobile widths.
1) Title slide with custom background
Use an explicit first <section> as a title slide and style it with reveal data attributes.
<section
id="title-slide"
data-background-image="./img/background.jpg"
data-background-size="cover"
data-background-opacity="0.9"
>
<h1>My Slide Show</h1>
</section>
2) Move/resize a logo after leaving title slide
Use CSS classes plus the slidechanged event.
Add a persistent logo element in your HTML, e.g. <img class="slide-logo" src="./images/my-logo.svg" alt="Logo" />.
.reveal .slide-logo {
position: fixed;
display: block;
max-width: none !important;
}
.reveal .slide-logo-bottom-right {
right: 12px !important;
bottom: 0 !important;
left: auto !important;
max-height: 2.2rem !important;
}
.slide-logo-max-size {
top: 5px;
left: 12px;
right: auto !important;
bottom: auto !important;
height: 100px !important;
max-height: none !important;
}
function syncLogoForSlide(currentSlide) {
const logos = document.querySelectorAll('.slide-logo');
const onTitle = currentSlide && currentSlide.id === 'title-slide';
logos.forEach((el) => {
el.classList.toggle('slide-logo-max-size', onTitle);
el.classList.toggle('slide-logo-bottom-right', !onTitle);
});
}
Reveal.on('ready', (event) => syncLogoForSlide(event.currentSlide));
Reveal.on('slidechanged', (event) => syncLogoForSlide(event.currentSlide));
3) Background image sizing (cover vs contain)
cover fills the slide and may crop. contain preserves the entire image.
<section data-background-image="images/2024.jpg" data-background-size="cover"></section>
<section data-background-image="images/2024.jpg" data-background-size="contain"></section>
4) Slide structure control (replacement for Quarto slide-level)
Pure reveal.js does not use Pandoc slide-level. Control structure explicitly:
- HTML mode: one
<section> per slide, nested <section> for vertical slides.
- Markdown mode: use configured separators (
---, --) to split slides.
5) Emoji support
Quarto's from: markdown+emoji is not a reveal.js feature. In reveal.js:
- Use native Unicode emoji directly.
- Or render emoji through your markdown/HTML pipeline before reveal initializes.
6) Fit large text and stretch media
r-fit-text and r-stretch are reveal classes and work directly.
<section>
<div class="r-fit-text">Big Text</div>
</section>
<section>
<p>Here is an image:</p>
<img class="r-stretch" src="image.webp" alt="Demo image" />
<p>Some text after the image.</p>
</section>
7) Reveal content on key press with fragments
<section>
<h2>It's a candy dog</h2>
<p style="font-size: 44pt; color: #75aadb;">Would you like to see a candy dog?</p>
<img class="fragment fade-up" src="./images/dog.webp" alt="Candy dog" />
</section>
8) Two-column and 4-quadrant layouts
Quarto ::: columns is not native reveal syntax. Use HTML/CSS layout wrappers.
<section>
<div class="cols">
<div class="col col-70"><img src="./images/image_1.webp" alt="Left" /></div>
<div class="col col-30">
<img src="./images/image_2.webp" alt="Right top" />
<img src="./images/image_3.webp" alt="Right bottom" />
</div>
</div>
</section>
.reveal .cols {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.reveal .col-70 { flex: 0 0 70%; }
.reveal .col-30 { flex: 0 0 30%; }
For 4 quadrants, use a 2x2 CSS grid and reveal each cell with fragment classes (fade-in-then-semi-out or similar).
9) Custom inline short-code transform (==text== -> <mark>text</mark>)
function convertMarkedTextInSlide(slide) {
if (!slide) return;
slide.innerHTML = slide.innerHTML.replace(/==([^=]+)==/g, '<mark>$1</mark>');
}
Reveal.on('ready', (event) => convertMarkedTextInSlide(event.currentSlide));
Reveal.on('slidechanged', (event) => convertMarkedTextInSlide(event.currentSlide));
10) Inline style and custom CSS
In reveal markdown, use inline HTML for precise text styling:
