The Complete Production SOP: How to Deploy and Run Reveal.js Interactive HTML Presentations in Autonomous AI Agents
Step-by-step SOP to install and run Reveal.js Interactive HTML Presentations in Codex, Claude Code, and Cursor. Includes verified prompts, syntax highlighting, and PDF setup.
Technical Overview & Architectural Context
When generating HTML presentations, autonomous AI agents like Claude Code, Codex, and Cursor frequently emit malformed DOM trees, flat unnested slide hierarchies, or outdated Reveal.js 3.x script tags. Agents often neglect the proper inclusion of initialization plugins such as RevealHighlight and RevealNotes, resulting in unstyled code snippets, failing speaker consoles, and broken slide fragment animations. Without strict constraints, agents also attempt to execute arbitrary local servers or inject excessive inline CSS that bloats the slide context. The 'revealjs-html-slide-presentations' skill imposes strict architectural boundaries on the agent. It enforces modern Reveal.js 5.x CDN structures, precise horizontal and vertical nesting patterns using child <section> tags, and deterministic plugin registrations for RevealHighlight and RevealNotes. By codifying these rules into a portable SKILL.md, agents predictably format code blocks with proper data-line-numbers, attach hidden speaker notes (<aside class="notes">), and construct self-contained, valid HTML documents without leaking workspace context or attempting out-of-bounds shell commands.
Prerequisites & Environment Requirements
Verified Search Intents & Long-Tail Queries Solved
This operational tutorial is engineered to provide deterministic solutions for these developer search queries:
Step-by-Step Execution Playbook
Local Environment Setup & SKILL.md Mounting
Mount the skill manifest into your agent's system rule directory to enforce Reveal.js generation boundaries.
Create the universal skills path within your local workspace or agent global configuration. Runtimes such as Claude Code and Cursor scan directories like `.claude/skills` or `.agents/skills` to load YAML frontmatter triggers and instructions before generating slide code.
mkdir -p .agents/skills/revealjs-html-slide-presentations && curl -fsSL https://askills.dev/api/skills/revealjs-html-slide-presentations/raw -o .agents/skills/revealjs-html-slide-presentations/SKILL.md---
name: "revealjs-html-slide-presentations"
description: "Build rich, interactive web-based presentation decks with Reveal.js and code highlighting."
metadata:
author: "Hakim El Hattab"
version: "1.0.0"
runtime_compatibility:
- "codex"
- "claude-code"
- "cursor"
- "windsurf"
triggers:
- "create reveal.js presentation"
- "add code highlighting reveal.js"
- "open speaker view reveal.js"
permissions:
fs_read: true
fs_write: "workspace"
shell_exec: false
net_access: false
---
# Reveal.js Interactive HTML Presentations
Creates browser-based slide presentations with 2D navigation (vertical/horizontal slides), Markdown integration, code snippet syntax highlighting, speaker notes, and PDF export.
## Execution SOP & Rules
1. Structure slides using <section> elements, nesting child <section> tags for vertical stacks.
2. Enable syntax highlighting by including the RevealHighlight plugin and theme CSS.
3. Add speaker notes using <aside class="notes">Notes text</aside>.
4. Ensure Reveal.initialize() includes plugins: [RevealHighlight, RevealNotes].
5. Prepare styles for print export via ?print-pdf stylesheet injection.Specify CDN versions explicitly (e.g., [email protected]) inside the prompt to prevent the agent from retrieving outdated v3.x API calls like Reveal.initialize({ dependencies: [...] }).
Ensure permissions allow workspace-scoped writes; do not grant unrestricted shell_exec permissions to static slide generation tasks.
Static Asset & Plugin Template Initialization
Configure reliable CDN references for Reveal.js CSS and JavaScript dependencies.
Since the skill operates with net_access: false and shell_exec: false inside the agent execution sandbox, the agent must output a fully self-contained HTML file referencing reliable CDN URLs (cdnjs or jsdelivr) rather than attempting to run npm install reveal.js.
mkdir -p presentations && touch presentations/index.html<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Architecture Review</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/black.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/monokai.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Microservices Architecture</h2>
<p>Q3 Systems Overview</p>
<aside class="notes">Introduce the agenda and timebox to 15 minutes.</aside>
</section>
<section>
<section>
<h3>Service Discovery</h3>
<pre><code class="language-typescript" data-trim data-line-numbers="1-3|5-7">
import { ConsulClient } from '@registry/consul';
const client = new ConsulClient({
host: 'consul.internal',
port: 8500,
timeoutMs: 2000
});
</code></pre>
<aside class="notes">Walk through the connection configuration.</aside>
</section>
<section>
<h3>Health Check Endpoint</h3>
<pre><code class="language-json" data-trim>
{
"status": "UP",
"uptime": 14205,
"checks": { "database": "OK" }
}
</code></pre>
</section>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/notes/notes.min.js"></script>
<script>
Reveal.initialize({
hash: true,
slideNumber: true,
plugins: [ RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>Always instruct the agent to include the `data-trim` and `data-line-numbers` attributes on `<code>` blocks to enable step-by-step code presentations without extra scripting.
Avoid mixing markdown parsing plugins with inline HTML section layouts unless data-markdown attributes are strictly isolated to individual child slides.
Triggering Agent Slide Generation
Invoke deterministic deck generation using matching trigger keywords in your AI assistant.
Provide structured prompts incorporating trigger phrases like 'create reveal.js presentation' and 'add code highlighting reveal.js'. The agent runtime automatically matches these against SKILL.md and applies the presentation SOP rules.
# Run within your Claude Code or Codex session by submitting your promptcreate reveal.js presentation for our distributed systems architecture. Use vertical slides for deep dives into Kafka ingestion, and add code highlighting reveal.js for Go consumer snippets with step-by-step line highlighting. Include speaker view reveal.js notes on all slides.Structure your request into distinct chapters (topics) so the agent nests horizontal sections for chapters and vertical sections for deep-dive implementations.
Do not request the agent to install headless Chromium in restricted sandboxes; instruct it to provide the `?print-pdf` URL structure for client-side PDF export.
Verification, DOM Validation & Speaker Preview
Validate markup nesting, CSS stylesheet dependencies, and plugin array integrity before deployment.
Run a lightweight HTML markup check and verify local file serving. Confirm that both the presentation deck and speaker console open without CORS errors.
npx html-validate presentations/index.html && npx serve presentations -l 3000#!/usr/bin/env bash
set -euo pipefail
if grep -q "plugins: \[ RevealHighlight, RevealNotes \]" presentations/index.html; then
echo "✓ Plugins correctly configured."
else
echo "✗ Missing Reveal.js plugin initialization."
exit 1
fi
if grep -q "<aside class=\"notes\">" presentations/index.html; then
echo "✓ Speaker notes detected."
else
echo "! Warning: No speaker notes detected."
fiOpening speaker view (pressing 'S') over the `file://` protocol fails in most browsers due to window.postMessage restrictions. Always run through a local web server (`npx serve` or Python's `http.server`).
HTML comments placed directly between `<section>` tags can break Reveal's 2D indexing logic in older engine builds.
Real-World Scenario: Autonomous Generation of Kubernetes Migration Tech Talk with Interactive Code Demos
“create reveal.js presentation in presentations/k8s-migration.html outlining our migration from Docker Swarm to EKS. Include a horizontal overview, vertical slides with Helm YAML and code highlighting reveal.js with line step transitions, and open speaker view reveal.js notes with timing hints.”
Runtime Troubleshooting & Failure Modes
Root Cause: The agent registered RevealHighlight in Reveal.initialize({ plugins: [...] }) before loading the plugin script tag from CDN, or loaded the script after the initialization block.
<!-- Move plugin script imports above Reveal.initialize() -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/notes/notes.min.js"></script>
<script>
Reveal.initialize({ plugins: [ RevealHighlight, RevealNotes ] });
</script>Root Cause: The presentation HTML was opened directly in the browser via file:// URL. The speaker notes popup uses postMessage between parent and child windows, which Chromium blocks on origin null.
# Serve presentation using any local static file server
npx serve presentations/ -l 8080
# Then open http://localhost:8080/k8s-migration.html and press 'S'Frequently Asked Questions (Reveal.js Interactive HTML Presentations SOP)
Q:Can I use Reveal.js Interactive HTML Presentations across Codex, Claude Code, and Cursor simultaneously?
Yes. The skill conforms to the universal SKILL.md specification supported across all modern agent runtimes. Simply place the skill manifest in `.agents/skills/` or runtime-specific skill paths, and each tool will apply identical DOM construction rules.
Q:How does Reveal.js Interactive HTML Presentations prevent context window overflow during long agent sessions?
By providing strict declarative rules for slide layout, CDN script tags, and plugin integration directly in the SKILL.md file, the agent avoids hallucinating long build configurations or generating repetitive boilerplate, minimizing conversation token consumption.
Q:Does this skill require escalated root or container permissions?
No. It is audited with a security score of 98/100 and runs safely within workspace-scoped sandboxes without requiring shell execution (shell_exec: false) or outbound socket access (net_access: false).
Ready to equip your autonomous agent with Reveal.js Interactive HTML Presentations?
Copy the complete audited SKILL.md specification or download the 1-click zip bundle directly from our verified registry.