⚠️ READ THIS ENTIRE FILE BEFORE CREATING A WEB PRESENTATION ⚠️

Web Presentation Skill

Create elegant, interactive presentations powered by Reveal.js that run entirely in a web browser as single HTML files. Perfect for product launches, technical talks, educational content, and any scenario requiring modern, professional slides with advanced features.

Overview

This skill creates self-contained HTML presentations with:

• 🎬 Advanced animations - Fragment animations, auto-animate, parallax effects
• 🎤 Speaker notes - Dedicated speaker view with notes and timer (press S)
• 🔍 Overview mode - Bird's-eye view of all slides (press ESC)
• 🎨 Professional transitions - Multiple transition effects (slide/fade/zoom/convex/concave)
• 📐 Multiple layouts - Title, content, two-column, image+text, quotes, sections
• 🎯 Vertical navigation - Nested slides for hierarchical content
• ⌨️ Keyboard shortcuts - Full keyboard control including fullscreen mode
• 📊 Progress tracking - Visual progress bar and slide counter
• 📱 Responsive design - Works on desktop, tablet, and mobile
• 🔌 Plugin ecosystem - Markdown, code highlighting, math equations, search
• 🚀 Single-file output - Everything via CDN, no build process required
• 🛠️ Full API access - Complete Reveal.js API for advanced customization

When to Use This Skill

Use for: ✅ Product presentations and pitches ✅ Conference talks and tech presentations ✅ Educational slideshows and lectures ✅ Company all-hands or team updates ✅ Portfolio showcases ✅ Workshop materials ✅ Documentation walkthroughs

Don't use for: ❌ Static documents (use docx skill instead) ❌ Printable handouts (use pdf skill instead) ❌ Spreadsheet data (use xlsx skill instead) ❌ Rich media editing (needs external tools)

---

Workflow

🎯 CRITICAL: This skill uses an interactive, question-guided approach. Always ask questions to understand the user's needs before generating any code.

Step 1: Initial Discovery (Ask Questions)

ALWAYS start by asking these questions to the user:

让我为您创建一个精彩的演示文稿！首先，我需要了解一些信息：

📌 **内容方面：**
1. 演示文稿的主题是什么？
2. 目标受众是谁？（客户、团队、学生、投资人？）
3. 核心信息是什么？（3-5个主要观点）
4. 预计需要多少张幻灯片？（快速演讲5-10张 / 标准演示15-25张 / 长篇讲座30+张）

🎨 **视觉风格：**
5. 您偏好什么视觉风格？
   - □ 专业商务（深色、简约）
   - □ 创意活泼（彩色、动感）
   - □ 极简主义（留白、聚焦）
   - □ 技术感（代码、图表）
   
6. 是否有品牌颜色要求？（如果有，请提供色值）

✨ **动画效果：**
7. 您需要什么程度的动画效果？
   - □ 基础（简单淡入淡出）
   - □ 中等（逐步显示要点）
   - □ 高级（元素变换、数据可视化动画）

🎤 **特殊功能：**
8. 是否需要以下功能？
   - □ 演讲者备注（用于演讲提示）
   - □ 代码高亮显示
   - □ 数学公式支持
   - □ 垂直嵌套幻灯片（章节内子主题）

Wait for user responses before proceeding to Step 2.

Step 2: Content Planning (Collaborative Structure)

Based on user's answers, propose a slide structure and ask for confirmation:

根据您的需求，我建议以下结构：

📋 **建议的幻灯片结构：**

1. 标题页 - [主题]
2. 议程 - 本次演示的内容概览
3. 【第一部分】章节分隔符 - [第一个主要话题]
   ├─ 4. [子主题1]
   ├─ 5. [子主题2]
   └─ 6. [子主题3]
4. 【第二部分】章节分隔符 - [第二个主要话题]
   ├─ 7. [子主题1]
   └─ 8. [子主题2]
5. 总结 - 核心要点回顾
6. 结束页 - 致谢与问答

这个结构符合您的需求吗？是否需要调整？

Wait for user confirmation or adjustment before proceeding.

Step 3: Animation & Feature Selection

Ask about specific animation and feature requirements:

现在让我们确定动画和交互细节：

🎭 **动画配置：**
1. 幻灯片切换效果偏好？
   - slide（滑动，默认）
   - fade（淡入淡出）
   - zoom（缩放）
   - convex（凸出）
   - concave（凹陷）

2. 要点列表是否需要逐条显示？（推荐）
   ☐ 是，要点逐条淡入
   ☐ 否，一次全部显示

3. 是否需要特殊动画？
   ☐ 元素自动变换（数字变化、图形变形）
   ☐ 高亮强调（当前要点高亮）
   ☐ 代码逐行显示

📝 **演讲者功能：**
4. 每张幻灯片是否需要演讲者备注？
   ☐ 是，我会提供每页的讲解提示
   ☐ 否，仅幻灯片内容

选择您需要的选项，我将据此创建演示文稿。

Wait for user's selections.

Step 4: Read the Template

CRITICAL: Before writing any code, read the Reveal.js template file:

templates/viewer-reveal.html

This template contains:

• ✅ Reveal.js integration: CDN links to Reveal.js 5.x core and plugins
• ✅ Theme system: CSS custom properties for brand colors
• ✅ Layout classes: Pre-built styles for all 6 layout types
• ✅ Configuration object: PRESENTATION_CONFIG with all Reveal.js options
• ✅ Plugin setup: Code highlighting, Markdown, Math, Notes, Zoom, Search
• ✅ Full API access: Complete Reveal.js API exposed via window.PresentationAPI

The template is your foundation. Copy it and customize the content sections.

Step 5: Generate Slide Content

Create slides using standard HTML <section> tags within .reveal .slides:

Basic structure:

<div class="reveal">
    <div class="slides">
        <!-- Each <section> is a slide -->
        <section class="slide-title">
            <h1>Title</h1>
        </section>
        
        <section class="slide-content">
            <h2>Content</h2>
            <ul>
                <li class="fragment">Point 1</li>
                <li class="fragment">Point 2</li>
            </ul>
            
            <!-- Speaker notes -->
            <aside class="notes">
                This is what you'll say...
            </aside>
        </section>
        
        <!-- Nested slides (vertical navigation) -->
        <section>
            <section><h2>Main Topic</h2></section>
            <section><h3>Subtopic 1</h3></section>
            <section><h3>Subtopic 2</h3></section>
        </section>
    </div>
</div>

Fragment animations (progressive reveal):

<ul>
    <li class="fragment">Appears first</li>
    <li class="fragment">Appears second</li>
    <li class="fragment fade-in">Fades in</li>
    <li class="fragment fade-up">Slides up</li>
    <li class="fragment highlight-red">Highlights in red</li>
</ul>

Available fragment animations:

• fragment - Basic fade in
• fragment fade-in - Fade in
• fragment fade-out - Fade out
• fragment fade-up - Slide up
• fragment fade-down - Slide down
• fragment grow - Grow larger
• fragment shrink - Shrink smaller
• fragment highlight-red - Highlight in red
• fragment highlight-blue - Highlight in blue
• fragment highlight-current-blue - Highlight current item

Step 6: Configure Presentation

Update the PRESENTATION_CONFIG object:

const PRESENTATION_CONFIG = {
    // Basic info
    title: "Your Presentation Title",
    author: "Your Name",
    date: "2026年2月3日",
    
    // Theme colors
    theme: {
        primary: "#2E86AB",      // Main color
        secondary: "#A23B72",    // Secondary color
        accent: "#F18F01",       // Accent color
        background: "#0a0a0a",   // Background
        text: "#ffffff",         // Text color
        textMuted: "#cccccc"     // Muted text
    },
    
    // Reveal.js options
    revealOptions: {
        transition: 'slide',      // slide/fade/zoom/convex/concave
        controls: true,           // Show arrow controls
        progress: true,           // Show progress bar
        center: true,             // Vertical centering
        slideNumber: 'c/t',       // Show slide numbers
        hash: true,               // URL routing
        
        // Animation speed
        transitionSpeed: 'default', // default/fast/slow
        
        // Auto-advance (0 = disabled)
        autoSlide: 0,
        
        // Plugins (always included)
        plugins: [
            RevealMarkdown,
            RevealHighlight,
            RevealNotes,
            RevealZoom,
            RevealSearch,
            RevealMath.KaTeX
        ]
    }
};

Full configuration options: https://revealjs.com/config/

Step 7: Add Advanced Features (Optional)

Speaker notes (press S to open):

<section>
    <h2>Slide Title</h2>
    <p>Public content...</p>
    
    <aside class="notes">
        Remember to emphasize this point.
        Mention the case study here.
        Time: 2 minutes on this slide.
    </aside>
</section>

Code highlighting with line numbers:

<section>
    <h2>Code Example</h2>
    <pre><code class="language-javascript" data-trim data-line-numbers="1-2|4-6">
function hello(name) {
    console.log(`Hello, ${name}!`);
}

// Usage
hello('World');
    </code></pre>
</section>

Math equations (KaTeX):

<section>
    <h2>Mathematical Formula</h2>
    <p>The quadratic formula:</p>
    <p>$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$</p>
</section>

Auto-animate (element transitions):

<section data-auto-animate>
    <h2 style="margin-top: 100px;">Animate</h2>
</section>
<section data-auto-animate>
    <h2 style="margin-top: 400px; color: red;">Animate</h2>
</section>

Custom backgrounds:

<section data-background-color="#ff0000">
    <h2>Red Background</h2>
</section>

<section data-background-image="url.jpg">
    <h2>Image Background</h2>
</section>

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
    <h2>Gradient Background</h2>
</section>

Step 8: Validate and Test

Generate the HTML file and verify:

1. Open in browser - File loads correctly
2. Navigate all slides - Arrow keys work (→ = next, ↓ = nested)
3. Test fragments - Progressive reveals work
4. Speaker view - Press S (opens in new window)
5. Overview mode - Press ESC (thumbnail view)
6. Fullscreen - Press F
7. Search - Press Ctrl+Shift+F
8. Zoom - Alt+Click to zoom in
9. Help overlay - Press ? for shortcuts

Common issues:

• Slides not showing: Check <section> tags are inside .reveal .slides
• Fragments not working: Ensure class="fragment" is set
• Speaker notes not appearing: Press S, check <aside class="notes">
• Code not highlighted: Verify class="language-xxx" on <code>

Step 9: Deliver with Instructions

Provide the HTML file with clear instructions:

File name: [topic]-presentation.html

Usage instructions:

🎯 打开方式：在任何现代浏览器中打开此 HTML 文件

⌨️ 快捷键：
  → / Space    下一张幻灯片
  ←            上一张幻灯片
  ↓            向下进入子幻灯片（如果有）
  ↑            向上返回
  ESC          概览模式（查看所有幻灯片）
  S            演讲者视图（包含备注和计时器）
  F            全屏模式
  ?            显示所有快捷键
  Ctrl+Shift+F 搜索
  Alt+Click    放大区域

📱 移动端：左右滑动切换幻灯片

🎤 演讲提示：
  - 按 S 打开演讲者视图，可以看到备注、下一张预览和计时器
  - 建议使用双屏，一个屏幕给观众，一个屏幕给自己（演讲者视图）

Editing note:

如需修改内容，在 HTML 文件中找到 <div class="slides"> 部分，
编辑对应的 <section> 标签即可。

---

Available Layouts (with Reveal.js)

All layouts are implemented as CSS classes applied to <section> elements. Combine with Reveal.js features for enhanced interactivity.

1. Title Slide (class="slide-title")

Use for: Opening, closing, major section breaks

<section class="slide-title" data-transition="zoom">
    <h1>Main Title</h1>
    <p class="subtitle">Subtitle or description</p>
    <p class="author">Author Name | Date</p>
</section>

Features:

• Full-screen, centered
• Gradient background (primary → secondary colors)
• White text with shadow
• Large, impactful typography
• Recommended transition: zoom or fade

With animation:

<section class="slide-title" data-transition="zoom">
    <h1 class="fragment">Main Title</h1>
    <p class="subtitle fragment">Subtitle appears second</p>
    <p class="author fragment">Author appears last</p>
</section>

---

2. Content Slide (class="slide-content")

Use for: Main content, bullet points, text, code

<section class="slide-content">
    <h2>Slide Title</h2>
    <p>Introduction paragraph...</p>
    <ul>
        <li class="fragment">Point one appears first</li>
        <li class="fragment">Point two appears second</li>
        <li class="fragment">Point three appears last</li>
    </ul>
    
    <aside class="notes">
        Speaker notes: Emphasize point two.
    </aside>
</section>

With code highlighting:

<section class="slide-content">
    <h2>Code Example</h2>
    <pre><code class="language-python" data-trim data-line-numbers="1-3|5-7">
def calculate_total(items):
    total = sum(item.price for item in items)
    return total

# Usage example
items = [Item(10), Item(20)]
result = calculate_total(items)
    </code></pre>
</section>

Supported elements:

• <h2>, <h3> - Headings (styled with theme colors)
• <p> - Paragraphs
• <ul>, <ol>, <li> - Lists with custom bullets
• <code> - Inline code (monospace font)
• <pre><code> - Code blocks with syntax highlighting
• <strong> - Bold (colored with accent)
• <em> - Italic (colored with primary)

---

3. Two-Column Layout (class="two-column")

Use for: Comparisons, before/after, pros/cons

<section>
    <h2>Comparison</h2>
    <div class="two-column">
        <div class="fragment">
            <h3>Before</h3>
            <ul>
                <li>Slow performance</li>
                <li>Complex setup</li>
                <li>Limited features</li>
            </ul>
        </div>
        <div class="fragment">
            <h3>After</h3>
            <ul>
                <li>2x faster ✨</li>
                <li>One-click setup</li>
                <li>Full-featured</li>
            </ul>
        </div>
    </div>
</section>

Best practices:

• Balance content between columns
• Use parallel structure
• Animate columns separately with fragments
• Works great with auto-animate

---

4. Image + Text (class="image-text")

Use for: Product showcases, visual explanations, diagrams

<section>
    <div class="image-text">
        <div>
            <h2>Feature Name</h2>
            <p>Description of the feature...</p>
            <ul>
                <li class="fragment">Benefit one</li>
                <li class="fragment">Benefit two</li>
                <li class="fragment">Benefit three</li>
            </ul>
        </div>
        <div class="fragment">
            <img src="https://via.placeholder.com/600x400" alt="Feature screenshot">
        </div>
    </div>
</section>

Image options:

• External URLs: Quick and easy (requires internet)
• Data URIs: Embed for offline use
• SVG inline: Best for diagrams and icons

With auto-animate:

<section data-auto-animate>
    <div class="image-text">
        <div><h2>Initial State</h2></div>
        <img src="before.png" data-id="product">
    </div>
</section>
<section data-auto-animate>
    <div class="image-text">
        <div><h2>After Transformation</h2></div>
        <img src="after.png" data-id="product">
    </div>
</section>

---

5. Quote Slide (class="slide-quote")

Use for: Testimonials, impactful statements, emphasis

<section class="slide-quote" data-background-gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
    <blockquote class="fragment">
        An impactful quote that emphasizes a key message
        and inspires the audience.
    </blockquote>
    <cite class="fragment">— Author Name, Title</cite>
</section>

Features:

• Large italic font
• Centered layout
• Border-left accent
• Works great with background gradients
• Perfect for breaks between sections

---

6. Section Divider (class="slide-section")

Use for: Major topic transitions, chapter breaks

<section class="slide-section" data-background-gradient="linear-gradient(135deg, #A23B72 0%, #F18F01 100%)">
    <h2 class="fragment">Part Two</h2>
</section>

Features:

• Full-screen colored background
• Large white text with shadow
• Creates visual rhythm
• Use sparingly (2-4 per presentation)
• Recommended transition: convex or zoom

---

7. Nested Slides (Vertical Navigation)

Use for: Hierarchical content, deep dives, optional details

<!-- Main topic (horizontal) -->
<section>
    <section>
        <h2>Main Topic</h2>
        <p>Press ↓ to dive deeper</p>
    </section>
    
    <!-- Subtopic 1 (vertical) -->
    <section>
        <h3>Subtopic 1</h3>
        <p>Detailed explanation...</p>
    </section>
    
    <!-- Subtopic 2 (vertical) -->
    <section>
        <h3>Subtopic 2</h3>
        <p>More details...</p>
    </section>
</section>

<!-- Next main topic (horizontal) -->
<section>
    <h2>Next Topic</h2>
</section>

Best practices:

• Use for optional deep dives
• Main topics go horizontal (→)
• Subtopics go vertical (↓)
• Visual indicator in controls
• Great for Q&A sections

---

Reveal.js Advanced Features

Fragment Animations

Progressive reveal of content within a slide:

Basic fragments:

<ul>
    <li class="fragment">Fade in (default)</li>
    <li class="fragment fade-in">Also fades in</li>
    <li class="fragment fade-out">Fades out</li>
    <li class="fragment fade-up">Slides in from bottom</li>
    <li class="fragment fade-down">Slides in from top</li>
    <li class="fragment fade-left">Slides in from right</li>
    <li class="fragment fade-right">Slides in from left</li>
</ul>

Emphasis fragments:

<ul>
    <li class="fragment grow">Grow larger</li>
    <li class="fragment shrink">Shrink smaller</li>
    <li class="fragment strike">Strike through</li>
    <li class="fragment highlight-red">Highlight in red</li>
    <li class="fragment highlight-blue">Highlight in blue</li>
    <li class="fragment highlight-green">Highlight in green</li>
    <li class="fragment highlight-current-red">Highlight current</li>
</ul>

Fragment index (control order):

<p class="fragment" data-fragment-index="3">Appears third</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>

Combining fragments:

<span class="fragment fade-in">
    <span class="fragment highlight-red">
        <span class="fragment fade-out">
            Text fades in, highlights red, then fades out
        </span>
    </span>
</span>

---

Auto-Animate

Smooth transitions between slide states:

Basic example:

<section data-auto-animate>
    <h2>Auto-Animate</h2>
</section>
<section data-auto-animate>
    <h2 style="margin-top: 100px; color: red;">Auto-Animate</h2>
</section>

Element matching (using data-id):

<section data-auto-animate>
    <div data-id="box" style="height: 50px; background: red;"></div>
</section>
<section data-auto-animate>
    <div data-id="box" style="height: 200px; background: blue;"></div>
</section>

Code morphing:

<section data-auto-animate>
    <pre><code data-trim data-line-numbers>
let x = 10;
    </code></pre>
</section>
<section data-auto-animate>
    <pre><code data-trim data-line-numbers>
let x = 10;
let y = 20;
let sum = x + y;
    </code></pre>
</section>

Auto-animate settings:

<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<section data-auto-animate data-auto-animate-duration="2.0">

---

Speaker Notes

Visible only in speaker view (press S):

Basic notes:

<section>
    <h2>Slide Title</h2>
    <p>Public content...</p>
    
    <aside class="notes">
        These notes are only visible in speaker view.
        - Remember to mention the case study
        - Emphasize the 2x performance improvement
        - Allow 2 minutes for this slide
    </aside>
</section>

Formatted notes:

<aside class="notes">
    <h4>Key Points:</h4>
    <ul>
        <li>Point one</li>
        <li>Point two</li>
    </ul>
    
    <p><strong>Time:</strong> 3 minutes</p>
</aside>

Speaker view features:

• Current slide on left
• Next slide preview on right
• Speaker notes in center
• Timer and slide counter
• Can be full-screen on second monitor

---

Transitions

Control slide transitions:

Per-slide transition:

<section data-transition="zoom">
    <h2>This slide zooms in</h2>
</section>

<section data-transition="fade">
    <h2>This slide fades</h2>
</section>

Available transitions:

• none - Instant cut
• fade - Cross-fade
• slide - Slide horizontally (default)
• convex - Slide at a convex angle
• concave - Slide at a concave angle
• zoom - Scale in/out

Separate in/out transitions:

<section data-transition="slide-in fade-out">
    <h2>Slides in, fades out</h2>
</section>

Transition speed:

<section data-transition-speed="fast">
    <h2>Quick transition</h2>
</section>
<!-- Options: default, fast, slow -->

---

Backgrounds

Customize slide backgrounds:

Color backgrounds:

<section data-background-color="#ff0000">
    <h2>Red background</h2>
</section>

Gradient backgrounds:

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
    <h2>Gradient background</h2>
</section>

Image backgrounds:

<section data-background-image="url.jpg">
    <h2>Image background</h2>
</section>

<section data-background-image="url.jpg" data-background-size="cover">
<section data-background-image="url.jpg" data-background-opacity="0.3">

Video backgrounds:

<section data-background-video="video.mp4" data-background-video-loop data-background-video-muted>
    <h2>Video background</h2>
</section>

iframe backgrounds:

<section data-background-iframe="https://example.com" data-background-interactive>
    <h2>Interactive webpage background</h2>
</section>

---

Code Highlighting

Syntax highlighting with Highlight.js:

Basic code block:

<pre><code class="language-javascript">
function hello(name) {
    console.log(`Hello, ${name}!`);
}
</code></pre>

Line numbers:

<pre><code class="language-python" data-line-numbers>
def calculate(x, y):
    result = x + y
    return result
</code></pre>

Highlight specific lines:

<pre><code class="language-java" data-line-numbers="1-2|4-6|8">
public class Hello {
    private String name;
    
    public Hello(String name) {
        this.name = name;
    }
    
    public void greet() {
        System.out.println("Hello, " + name);
    }
}
</code></pre>

Line number offset:

<pre><code data-line-numbers="10-15">
// Code starting at line 10
</code></pre>

Supported languages: JavaScript, Python, Java, C++, C#, Ruby, PHP, Go, Rust, TypeScript, SQL, HTML, CSS, Markdown, Bash, and 150+ more

---

Math Equations

KaTeX integration for beautiful math:

Inline math:

<p>The formula $E = mc^2$ shows energy-mass equivalence.</p>

Display math:

<p>$$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$</p>

Complex equations:

<section>
    <h2>Quadratic Formula</h2>
    <p>
    $$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$
    </p>
    
    <aside class="notes">
        Explain each component of the formula.
    </aside>
</section>

Multi-line equations:

<p>
$$
\begin{aligned}
a &= b + c \\
&= d + e + f
\end{aligned}
$$
</p>

---

Markdown Support

Write slides in Markdown:

External Markdown file:

<section data-markdown="slides.md" data-separator="^\n---\n$" data-separator-vertical="^\n--\n$"></section>

Inline Markdown:

<section data-markdown>
    <textarea data-template>
        ## Slide Title
        
        - Bullet point one
        - Bullet point two
        
        **Bold text** and *italic text*
        
        ```javascript
        const code = "highlighted";
        ```
    </textarea>
</section>

Markdown with fragments:

<section data-markdown>
    <textarea data-template>
        ## Progressive Reveal
        
        - Item 1 <!-- .element: class="fragment" -->
        - Item 2 <!-- .element: class="fragment" -->
        - Item 3 <!-- .element: class="fragment" -->
    </textarea>
</section>

---

Interactive Features

Search (Ctrl+Shift+F):

• Automatically enabled with RevealSearch plugin
• Searches all slide content
• Highlights matches
• Navigate between results

Zoom (Alt+Click):

• Click any element while holding Alt
• Zooms in to that element
• Click again to zoom out
• Great for highlighting details

Overview Mode (ESC):

• Shows all slides as thumbnails
• Click to jump to any slide
• Great for navigation during Q&A
• Shows slide hierarchy (horizontal/vertical)

Help Overlay (?):

• Shows all keyboard shortcuts
• Customizable
• Automatically includes plugin shortcuts

---

Reveal.js API Usage

The template exposes the full Reveal.js API via window.PresentationAPI:

Basic navigation:

// Access Reveal instance
const reveal = window.PresentationAPI.reveal;

// Navigate programmatically
reveal.slide(3);          // Go to slide 3
reveal.slide(2, 1);       // Go to slide 2, vertical slide 1
reveal.next();            // Next slide
reveal.prev();            // Previous slide
reveal.left();            // Navigate left
reveal.right();           // Navigate right
reveal.down();            // Navigate down (nested)
reveal.up();              // Navigate up (nested)

State management:

// Get current state
const state = reveal.getState();
console.log(state);  // {indexh: 2, indexv: 0, indexf: 1}

// Get total slides
const total = reveal.getTotalSlides();

// Get current slide element
const currentSlide = reveal.getCurrentSlide();

// Check if at first/last
reveal.isFirstSlide();
reveal.isLastSlide();

Toggle features:

// Toggle overview mode
reveal.toggleOverview();

// Toggle pause
reveal.togglePause();

// Toggle help overlay
reveal.toggleHelp();

// Toggle auto-slide
reveal.toggleAutoSlide();

Event listeners:

// Slide changed event
reveal.on('slidechanged', event => {
    console.log('Now on slide:', event.indexh);
    // Send analytics
    // Update external UI
    // Trigger custom logic
});

// Fragment shown/hidden
reveal.on('fragmentshown', event => {
    console.log('Fragment shown:', event.fragment);
});

reveal.on('fragmenthidden', event => {
    console.log('Fragment hidden:', event.fragment);
});

// Ready event
reveal.on('ready', event => {
    console.log('Presentation ready');
});

// Overview toggled
reveal.on('overviewshown', () => {
    console.log('Overview mode activated');
});

reveal.on('overviewhidden', () => {
    console.log('Overview mode deactivated');
});

Sync with external systems:

// Send slide changes to server
reveal.on('slidechanged', async event => {
    await fetch('/api/analytics', {
        method: 'POST',
        body: JSON.stringify({
            slide: event.indexh,
            timestamp: Date.now()
        })
    });
});

// Multi-screen synchronization
reveal.on('slidechanged', event => {
    // Broadcast to other windows
    localStorage.setItem('currentSlide', JSON.stringify(event));
});

window.addEventListener('storage', e => {
    if (e.key === 'currentSlide') {
        const {indexh, indexv} = JSON.parse(e.newValue);
        reveal.slide(indexh, indexv);
    }
});

Dynamic content:

// Load slide content dynamically
reveal.on('slidechanged', async event => {
    const slideId = event.currentSlide.getAttribute('data-slide-id');
    if (slideId) {
        const data = await fetch(`/api/slides/${slideId}`).then(r => r.json());
        event.currentSlide.innerHTML = data.content;
    }
});

Custom theme switching:

// Change theme colors dynamically
function changeTheme(themeName) {
    const themes = {
        blue: { primary: '#2E86AB', secondary: '#A23B72', accent: '#F18F01' },
        green: { primary: '#2d6a4f', secondary: '#52b788', accent: '#d8f3dc' },
        red: { primary: '#9d0208', secondary: '#dc2f02', accent: '#f48c06' }
    };
    
    const theme = themes[themeName];
    Object.entries(theme).forEach(([key, value]) => {
        const cssVar = `--color-${key}`;
        document.documentElement.style.setProperty(cssVar, value);
    });
}

// Usage: changeTheme('green')

Complete API reference: https://revealjs.com/api/

---

Advanced Customization

Custom CSS

Add custom styles in the <style> section:

/* Custom slide variant */
.slide-highlight {
    background: linear-gradient(135deg, #fff5f5, #ffffff);
    border-left: 8px solid var(--color-accent);
    padding-left: 3em !important;
}

/* Custom animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse-on-show.fragment.visible {
    animation: pulse 0.5s ease-in-out;
}

/* Responsive grid layout */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2em;
}

Adding External Libraries

Charts (Chart.js):

<!-- In <head> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>

<!-- In slide -->
<section>
    <h2>Sales Data</h2>
    <canvas id="salesChart" width="800" height="400"></canvas>
    <script>
        Reveal.on('slidechanged', event => {
            if (event.currentSlide.querySelector('#salesChart')) {
                new Chart(document.getElementById('salesChart'), {
                    type: 'line',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
                        datasets: [{
                            label: 'Sales',
                            data: [12, 19, 3, 5],
                            borderColor: '#2E86AB',
                            tension: 0.1
                        }]
                    }
                });
            }
        });
    </script>
</section>

Diagrams (Mermaid):

<!-- In <head> -->
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

<!-- In slide -->
<section>
    <h2>Architecture</h2>
    <div class="mermaid">
    graph TD
        A[Client] --> B[Load Balancer]
        B --> C[Server 1]
        B --> D[Server 2]
    </div>
</section>

3D Visualizations (Three.js):

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>

<section>
    <h2>3D Model</h2>
    <div id="three-container" style="width: 800px; height: 600px;"></div>
    <script>
        // Initialize Three.js scene when slide is shown
        Reveal.on('slidechanged', event => {
            if (event.currentSlide.querySelector('#three-container')) {
                // Three.js setup code...
            }
        });
    </script>
</section>

---

Keyboard Shortcuts Reference

Provide these shortcuts to users:

Action	Shortcut	Description
Next slide	→ or Space or N	Move to next slide
Previous slide	← or P	Move to previous slide
Navigate down	↓	Go to nested slide below
Navigate up	↑	Go to nested slide above
First slide	Home	Jump to first slide
Last slide	End	Jump to last slide
Speaker view	S	Open speaker notes window
Overview mode	ESC or O	Toggle thumbnail overview
Fullscreen	F	Toggle fullscreen mode
Search	Ctrl+Shift+F	Search presentation content
Zoom	Alt+Click	Zoom into element
Help overlay	?	Show all shortcuts
Pause	. (period) or B	Pause presentation (black screen)
Auto-slide	A	Toggle auto-advance
Print/PDF	E	Switch to print view (add ?print-pdf to URL)

Mobile gestures:

• Swipe left → Next slide
• Swipe right → Previous slide
• Swipe up → Navigate down
• Swipe down → Navigate up
• Pinch → Toggle overview

---

Design Guidelines

Content Density

Per slide guidelines:

• Title slides: 1 title + 1-2 supporting lines
• Content slides: 1 heading + 3-7 bullet points OR 2-3 paragraphs
• Two-column: 3-5 items per column
• Image slides: 1 image + short description

The 6×6 rule: Maximum 6 bullets with 6 words each

Avoid:

• ❌ Paragraphs longer than 4 lines
• ❌ More than 7 bullet points per slide
• ❌ Tiny font sizes (< 24px)
• ❌ Wall of text
• ❌ Cramped spacing

Animation Best Practices

Use fragments for:

• ✅ Building lists progressively
• ✅ Revealing data points step-by-step
• ✅ Highlighting key information
• ✅ Controlling information flow

Use auto-animate for:

• ✅ Showing transformations
• ✅ Morphing code examples
• ✅ Animating diagrams
• ✅ Data visualizations

Avoid:

• ❌ Excessive animations (don't animate every element)
• ❌ Distracting transitions
• ❌ Animations longer than 1 second
• ❌ Too many concurrent animations

Visual Hierarchy

Create clear structure:

• Large to small: Titles (3em) → Headings (2em) → Body (1em)
• Bold to regular: Important points → Supporting details
• Color emphasis: Accent color → Primary → Body text
• Spacing: More space = more importance

Color and Accessibility

Accessibility requirements:

• Maintain 4.5:1 contrast for normal text
• Maintain 3:1 contrast for large text (18pt+)
• Don't rely solely on color to convey information
• Test with colorblind simulators

Color usage:

• Primary: Headings, links, emphasis
• Secondary: Gradients, backgrounds
• Accent: Call-to-actions, highlights

---

Troubleshooting

Slides Not Displaying

Issue: Blank screen or no slides appear
Solution:

• Check browser console for JavaScript errors
• Ensure <section> tags are inside .reveal .slides
• Verify CDN links are accessible (internet required)
• Check for unclosed HTML tags

Fragments Not Working

Issue: All content appears at once
Solution:

• Verify class="fragment" is set correctly
• Check that fragments: true in configuration
• Ensure no CSS overrides are hiding fragments
• Test in different browser

Speaker Notes Not Showing

Issue: Press S but no speaker window opens
Solution:

• Check popup blocker settings
• Ensure <aside class="notes"> is inside <section>
• Verify RevealNotes plugin is loaded
• Try opening in a new browser tab manually

Code Not Highlighted

Issue: Code appears as plain text
Solution:

• Add class="language-xxx" to <code> element
• Ensure RevealHighlight plugin is loaded
• Check that CDN for highlight styles is accessible
• Verify language identifier is supported

Navigation Issues

Issue: Arrow keys don't work
Solution:

• Check if presentation has focus (click on it)
• Ensure keyboard: true in configuration
• Check for JavaScript errors in console
• Test in incognito mode (disable extensions)

Vertical Slides Not Showing

Issue: Can't navigate down to nested slides
Solution:

• Ensure slides are properly nested (outer <section> contains inner ones)
• Check for proper HTML structure
• Look for down arrow indicator in controls
• Try pressing ↓ or clicking down arrow

---

Example Presentation Structures

Product Launch (12-15 slides)

1. 🎬 Title - Product name + tagline [TITLE, zoom transition]
2. 📋 Agenda - What we'll cover [CONTENT, fragments]
3. 🔴 Section - "The Problem" [SECTION, red background]
4. 😰 Pain Points - Current challenges [CONTENT, fragment list]
5. 💡 Solution Overview - How product solves it [CONTENT]
6. 🟢 Section - "Key Features" [SECTION, green background]
7-10. 📱 Feature Deep Dives [IMAGE-TEXT, one per slide, auto-animate]
    ├─ 7. Performance (fragment metrics)
    ├─ 8. Security (diagram)
    ├─ 9. UX (before/after comparison)
    └─ 10. Integration (code example)
11. 💰 Pricing - Tiers and packages [TWO-COLUMN]
12. 💬 Testimonial [QUOTE, gradient background]
13. 📞 Call to Action [TITLE, zoom transition]
14. 🙏 Thank You + Q&A [TITLE]

Technical Talk (20-25 slides)

1. Title + Speaker Bio [TITLE]
2. Agenda [CONTENT, fragment]
3. Section - "Background" [SECTION]
4-6. Context (nested slides)
    <section>
        4. Main concept [CONTENT]
        5. Why it matters [CONTENT]
        6. Current approaches [TWO-COLUMN]
    </section>
7. Section - "Deep Dive" [SECTION]
8-15. Technical Details
    8. Architecture diagram [IMAGE-TEXT]
    9-11. Code examples (auto-animate)
    12. Performance metrics [CONTENT, fragments]
    13-14. Comparison (before/after)
    15. Demo transition [TITLE, fade]
16. Section - "Results" [SECTION]
17-19. Outcomes
    17. Benchmark data [CONTENT, chart.js]
    18. Real-world impact [QUOTE]
    19. Lessons learned [CONTENT]
20. Future Work [CONTENT, fragments]
21. Resources + Links [CONTENT]
22. Q&A [TITLE]

Educational Lesson (25-30 slides)

1. Lesson Title [TITLE]
2. Learning Objectives [CONTENT, fragment]
3. Section - "Introduction" [SECTION]
4-7. Background (vertical nested)
8. Section - "Core Concepts" [SECTION]
9-20. Main Content
    - One concept per slide
    - Use fragments for progressive reveal
    - Mix layouts: content, two-column, image-text
    - Add speaker notes for teaching points
21. Section - "Practice" [SECTION]
22-25. Examples and Exercises
    - Code examples with line highlighting
    - Interactive elements
    - Step-by-step walkthroughs
26. Summary [CONTENT, fragments]
27. Additional Resources [CONTENT]
28. Questions [TITLE]

---

Best Practices Checklist

Before Creating:

• Ask all discovery questions to user
• Confirm slide structure and count
• Clarify animation requirements
• Verify color/brand guidelines
• Understand special feature needs

During Creation:

• Read template file first
• Use appropriate layouts for content types
• Add fragments for progressive reveal
• Include speaker notes for key slides
• Apply consistent color scheme
• Add transitions strategically
• Nest slides for hierarchical content
• Test code highlighting
• Verify math formulas render

After Creation:

• Test in browser (open HTML file)
• Navigate through all slides
• Test speaker view (press S)
• Check overview mode (press ESC)
• Verify fragments animate correctly
• Test keyboard shortcuts
• Check mobile responsiveness
• Validate accessibility (contrast)
• Proofread content
• Test fullscreen mode

DO:

✅ Ask questions before starting
✅ Use fragments for progressive reveals
✅ Include speaker notes for presentations
✅ Keep slides focused (one idea each)
✅ Test navigation thoroughly
✅ Ensure good color contrast
✅ Use nested slides for deep dives
✅ Provide clear instructions
✅ Test on different screen sizes
✅ Leverage Reveal.js API when needed

DON'T:

❌ Skip the discovery questions
❌ Overcrowd slides with text
❌ Use too many different animations
❌ Forget to test speaker view
❌ Ignore accessibility standards
❌ Create slides without clear purpose
❌ Use more than 3 font families
❌ Add distracting effects
❌ Skip validation testing
❌ Forget to provide usage instructions

---

Additional Resources

Official Documentation:

• Reveal.js Official Docs - Complete API reference
• Reveal.js GitHub - Source code and examples
• Reveal.js Plugins - Community plugins

Reference Files (in this skill):

• reference/layouts.md - Detailed layout guide with Reveal.js examples
• reference/themes.md - Theme customization and color theory with Reveal.js
• templates/viewer-reveal.html - Reveal.js base template with full documentation
• examples/reveal-advanced-demo.html - Advanced features showcase

Design Tools:

• Coolors.co - Color palette generator
• Google Fonts - Web font library
• SVG OMG - SVG optimizer
• WebAIM Contrast Checker - Accessibility testing

Related Libraries:

• Chart.js - Data visualization charts
• Mermaid - Diagram and flowchart generation
• KaTeX - Math equation rendering
• Highlight.js - Syntax highlighting for 190+ languages

Reveal.js Themes:

• Reveal.js Themes Gallery - Official themes
• Custom Theme Builder - Visual theme creator

Export and Sharing:

• PDF Export: Add ?print-pdf to URL and use browser print (Ctrl+P)
• Hosting: Upload to GitHub Pages, Netlify, Vercel for free hosting
• Embedding: Use <iframe> to embed in websites

---

Migration Guide (from Classic Template)

If you have existing presentations using viewer.html, here's how to migrate:

Key Differences

Feature	Classic (viewer.html)	Reveal.js (viewer-reveal.html)
Framework	Custom JavaScript	Reveal.js 5.x
Slides	JavaScript array	HTML <section> tags
Animations	CSS transitions only	Fragments, auto-animate, transitions
Speaker Notes	❌ Not available	✅ Full speaker view (press S)
Overview Mode	❌ Not available	✅ Thumbnail overview (press ESC)
Vertical Slides	❌ Not available	✅ Nested navigation
Code Highlighting	Basic	Highlight.js with line numbers
Math Equations	❌ Not available	✅ KaTeX support
Search	❌ Not available	✅ Full-text search (Ctrl+Shift+F)
Plugins	❌ None	✅ Extensive ecosystem
API Access	Limited	Full Reveal.js API

Migration Steps

1. Convert slide structure:

// OLD (viewer.html)
const SLIDES = [
    {
        layout: "title",
        content: `<h1>Title</h1>`
    }
];

// NEW (viewer-reveal.html)
<section class="slide-title">
    <h1>Title</h1>
</section>

2. Update theme configuration:

// OLD
const PRESENTATION = {
    title: "...",
    theme: { primary: "#...", ... }
};

// NEW
const PRESENTATION_CONFIG = {
    title: "...",
    theme: { primary: "#...", ... },
    revealOptions: { ... }
};

3. Add new features:

• Add class="fragment" for progressive reveals
• Wrap nested content in <section> for vertical navigation
• Add <aside class="notes"> for speaker notes
• Use Reveal.js transitions and animations

---

Summary

This skill creates modern, interactive presentations powered by Reveal.js as single HTML files. The upgraded workflow features:

Interactive Workflow

1. Ask discovery questions - Gather content, style, and animation requirements
2. Propose structure - Collaborative slide planning with user confirmation
3. Configure features - Select animations, transitions, and special functions
4. Read template - Study templates/viewer-reveal.html
5. Generate slides - Create HTML content with appropriate layouts
6. Configure presentation - Set theme colors and Reveal.js options
7. Add advanced features - Fragments, speaker notes, nested slides, plugins
8. Validate thoroughly - Test all features and navigation
9. Deliver with instructions - Provide complete usage guide

Key Advantages over Classic Template

• ✅ Advanced animations: Fragments, auto-animate, parallax
• ✅ Speaker tools: Notes, timer, next slide preview
• ✅ Navigation: Vertical slides, overview mode, search
• ✅ Rich content: Code highlighting, math equations, Markdown
• ✅ Plugin ecosystem: Extensible with hundreds of plugins
• ✅ Full API: Complete programmatic control
• ✅ Active development: Reveal.js is actively maintained
• ✅ Community: Large user base and resources

Success Factors

• Always ask questions first - Don't assume requirements
• Use appropriate layouts - Match content type to layout
• Leverage fragments - Progressive reveals keep audience engaged
• Add speaker notes - Essential for presentations
• Test thoroughly - Verify all features work
• Ensure accessibility - Good contrast, keyboard nav, semantic HTML
• Provide clear instructions - Users need to know all features

The Result

A professional, feature-rich presentation that:

• Runs in any modern browser
• Works offline (CDN resources cached)
• Supports advanced features (speaker view, overview, search)
• Offers smooth animations and transitions
• Provides full keyboard and touch control
• Scales from simple pitches to complex technical talks
• Can be easily shared, embedded, or hosted

Ready to create amazing presentations! 🎉

---

For detailed layout examples and animation techniques, see reference/layouts.md
For theme customization and color theory, see reference/themes.md
For a complete working example, see examples/reveal-advanced-demo.html