Revealjs Presentations

Create, edit, and deploy reveal.js presentations as single HTML files with optional custom CSS. Use when asked to create a presentation, slide deck, pitch de...

Security Scan

The skill is an instruction-only template for producing single-file reveal.js presentations; its requirements and instructions are consistent with that purpose.

Purpose & Capability

Name/description (create/edit/deploy reveal.js HTML slides) align with included files (template.html and API reference) and there are no unrelated requirements (no env vars, no binaries).

Instruction Scope

SKILL.md stays on-topic (how to edit the template, reveal.js features, and deployment to static hosts). It instructs use of CDN-hosted reveal.js and plugins, which will execute code in viewers' browsers — expected for web slides but worth noting. The instructions do not ask the agent to read arbitrary system files, environment variables, or send data to unexpected endpoints.

Install Mechanism

No install spec and no code files to execute on the host; this is instruction-only, which is the lowest install risk.

Credentials

The skill requests no credentials, env vars, or config paths. External network usage is limited to public CDNs for reveal.js plugins/themes — consistent with the stated web-presentation purpose.

Persistence & Privilege

always:false and no special persistence or system configuration changes. The skill does not request to modify other skills or system-wide settings.

Assessment

This skill is a simple template and documentation for building reveal.js slide decks; it appears coherent and does not request secrets. Things to consider before using or publishing slides: 1) The template loads reveal.js and optional plugins from jsdelivr CDN — that means remote JavaScript runs in viewers' browsers. If your slides contain sensitive data, either vendor the reveal.js files locally or avoid third-party CDN links. 2) The API reference mentions iframes/background-iframe and external media (images/videos) which can pull external content into your presentation — avoid untrusted URLs. 3) Deploying to Vercel/GitHub Pages is straightforward and doesn't require credentials in the skill, but deploying to a repository or service will use your normal platform auth (not the skill). 4) Inspect the final HTML before sharing widely to ensure no unintended external resources are embedded. Overall this skill is internally consistent and low risk for typical presentation use.

Create web-based presentations as single HTML files using reveal.js v5 via CDN.

Quick Start

1. Copy assets/template.html to the project directory
2. Replace {{TITLE}}, {{SUBTITLE}}, {{THEME}} placeholders
3. Add slides as <section> elements inside <div class="slides">
4. Open in browser or deploy to Vercel/GitHub Pages

Slide Structure

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
    <!-- Vertical stack -->
    <section>
      <section>Slide 3.1</section>
      <section>Slide 3.2 (down)</section>
    </section>
  </div>
</div>

Key Features

Fragments (click-to-reveal)

<p class="fragment fade-up">Appears on click</p>
<p class="fragment fade-up">Then this</p>

Styles: fade-in (default), fade-up, fade-down, fade-left, fade-right, fade-out, fade-in-then-out, grow, shrink, strike, highlight-red/green/blue

Auto-Animate

Add data-auto-animate to adjacent sections — matching elements animate automatically:

<section data-auto-animate>
  <h1>Title</h1>
</section>
<section data-auto-animate>
  <h1 style="color: red;">Title</h1>
  <p>New content</p>
</section>

Backgrounds

<section data-background-color="#1a1a2e">Solid</section>
<section data-background-gradient="linear-gradient(135deg, #0f0f13, #1a1a2e)">Gradient</section>
<section data-background-image="photo.jpg" data-background-size="cover">Image</section>

Speaker Notes

<section>
  <h2>Slide</h2>
  <aside class="notes">Press S to see these notes</aside>
</section>

Viewport Sizing

Set width and height in Reveal.initialize(). reveal.js scales the content to fit the browser window. Use larger values (e.g. 1400×800) if content looks too large on screen — the framework scales down automatically.

Reveal.initialize({
  width: 1400,
  height: 800,
  margin: 0.04,
});

Custom Styling

Use a separate style.css file or inline <style> block. Override reveal.js defaults:

.reveal { font-family: 'Inter', system-ui, sans-serif; }
.reveal h1, .reveal h2 { text-transform: none; }

For grid backgrounds (like danielgrobelny.de):

.reveal .slides section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(var(--text) 1px, transparent 1px),
    linear-gradient(90deg, var(--text) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

Themes

Built-in: black, white, league, beige, night, serif, simple, solarized, moon, dracula, sky, blood

Change via CDN link: reveal.js@5/dist/theme/{name}.css

For fully custom themes, use black as base and override with custom CSS.

Plugins (via CDN)

Enable code highlighting, speaker notes, math, search, zoom:

<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/highlight.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js"></script>
<script>
  Reveal.initialize({ plugins: [RevealHighlight, RevealNotes] });
</script>

For code blocks with line highlighting:

<pre><code data-trim data-line-numbers="1|3-5">
function hello() {
  return "world";
}
</code></pre>

Deployment

Vercel (static)

Just push the HTML + CSS + assets. No build step needed — Vercel serves static files.

GitHub Pages

Push to repo, enable Pages from Settings → deploy from main branch root or /docs.

PDF Export

Append ?print-pdf to URL, then browser Print → Save as PDF.

Full API Reference

Read references/revealjs-api.md for complete config options, fragment types, JS API methods, keyboard shortcuts, and plugin details.