# Web Presentation > Create modern, interactive web presentations powered by Reveal.js. Supports both single-file HTML presentations AND multi-presentation repository management with GitHub Pages deployment. Use for creating slides, presentations, slide decks, presentation repositories with auto-generated index pages. Features advanced animations, speaker notes, overview mode, and full Reveal.js API access. - Skill: `zhaoxuanzzz/web-presentation` (Agent Skill, multi-file: 19 files) - Install (CLI): `npx skillmds add zhaoxuanzzz/web-presentation` - Raw SKILL.md: https://api.skillmd.com/api/skills/zhaoxuanzzz/web-presentation/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: Complete terms in LICENSE.txt - Author: zhaoxuanZzz (https://skillmd.com/u/zhaoxuanzzz) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/zhaoxuanzzz/web-presentation --- ⚠️ **READ THIS ENTIRE FILE BEFORE CREATING A WEB PRESENTATION** ⚠️ # Web Presentation Skill Create elegant, interactive presentations powered by **Reveal.js**. Supports **two modes**: 1. **Single-file mode**: Self-contained HTML presentations for quick sharing 2. **Repository mode**: Multi-presentation management system with GitHub Pages deployment and auto-generated index Perfect for product launches, technical talks, educational content, and building a complete presentation portfolio. ## Overview This skill supports two distinct modes: ### Mode 1: Single Presentation (Quick & Simple) 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** - Automatic scaling to fit any screen size (desktop, tablet, 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 ### Responsive Design Features ✨ **Smart Screen Adaptation** - **Automatic scaling** - Presentations automatically scale to fill available screen space while maintaining proper aspect ratio - **Viewport optimization** - Dynamic sizing based on window dimensions (16:9 aspect ratio) - **Mobile-friendly** - Optimal font sizes and layouts for devices of all sizes - **Margin management** - Configurable margins to ensure content stays readable on any screen - **Window resize handling** - Presentations reflow automatically when browser is resized 🎯 **Configuration Options** - `minScale` / `maxScale` - Control minimum (20%) and maximum (200%) scaling ranges - `margin` - Set presentation margins (default 5%) to ensure breathing room - `width` / `height` - Use 100% to fill available space with responsive sizing ### Mode 2: Presentation Repository (Professional & Scalable) Manages multiple presentations with: - **📁 Organized structure** - Each presentation in its own folder with metadata - **🖼️ Auto-generated index** - Beautiful gallery page showing all presentations - **🏷️ Metadata system** - JSON metadata files for each presentation (title, author, date, tags, etc.) - **🌐 GitHub Pages ready** - One-command deployment to GitHub Pages - **📸 Thumbnail support** - Visual previews for each presentation - **🔍 Searchable & filterable** - Index page with tags and categories - **🛠️ Build scripts** - Automated index generation via Node.js - **📦 Template system** - Quick creation of new presentations from templates ## When to Use Each Mode **Single Presentation Mode - Use for:** ✅ Quick one-off presentations ✅ Sharing a single deck via email or chat ✅ Embedding in documents or websites ✅ Claude.ai artifacts ✅ No-setup requirements **Repository Mode - Use for:** ✅ Managing multiple presentations ✅ Building a presentation portfolio ✅ Team/organization presentation library ✅ GitHub Pages publication ✅ Categorized presentation collections ✅ Professional presentation website ## Common Use Cases **Use this skill 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 ✅ Presentation portfolio websites ✅ Team presentation libraries **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) --- ## Repository Structure (Repository Mode) When using repository mode, the following structure is created: ``` presentation-repo/ ├── index.html # Auto-generated index page (DO NOT EDIT) ├── .nojekyll # GitHub Pages config ├── package.json # Project configuration ├── package-lock.json # Dependencies lock file ├── presentations/ # All presentations directory │ ├── my-first-presentation/ # Individual presentation folder │ │ ├── index.html # Presentation HTML file │ │ ├── metadata.json # Presentation metadata │ │ └── thumbnail.png # Presentation thumbnail (800x600) │ └── another-presentation/ │ ├── index.html │ ├── metadata.json │ └── thumbnail.png ├── templates/ # Template files │ ├── presentation-template.html # Presentation template │ ├── metadata-template.json # Metadata template │ └── index-template.html # Index page template ├── scripts/ # Build scripts │ └── generate-index.js # Index generation script ├── assets/ # Shared resources │ └── css/ │ └── custom.css # Custom global styles └── README.md # Repository documentation ``` ### Metadata JSON Schema Each presentation has a `metadata.json` file: ```json { "id": "my-presentation", // Unique identifier "title": "My Awesome Presentation", // Display title "description": "A brief description", // Short description "author": "Author Name", // Author name "date": "2026-02-10", // Date (YYYY-MM-DD) "tags": ["tech", "tutorial"], // Tags array "thumbnail": "thumbnail.png", // Thumbnail filename "slides": 15, // Number of slides "language": "zh-CN", // Language code "category": "Tutorial" // Category } ``` --- ## Workflow 🎯 **CRITICAL:** First determine which mode the user needs, then follow the appropriate workflow. ### Decision: Which Mode? **Ask the user:** ``` 您需要创建什么类型的演示文稿项目？ 1. **单个演示文稿** - 创建一个独立的HTML文件 - 适合：快速分享、一次性演讲、嵌入文档 2. **演示文稿仓库** - 创建一个完整的演示文稿管理系统 - 适合：多个演示文稿、团队库、GitHub Pages发布、演示文稿作品集 请选择：[1] 单个演示文稿 [2] 演示文稿仓库 ``` --- ## Workflow A: Single Presentation Mode This workflow 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 `
` tags within `.reveal .slides`: **Basic structure:** ```html

Title

Content

  • Point 1
  • Point 2

Main Topic

Subtopic 1

Subtopic 2

``` **Fragment animations (progressive reveal):** ```html ``` **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: ```javascript 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):** ```html

Slide Title

Public content...

``` **Code highlighting with line numbers:** ```html

Code Example


function hello(name) {
    console.log(`Hello, ${name}!`);
}

// Usage
hello('World');
``` **Math equations (KaTeX):** ```html

Mathematical Formula

The quadratic formula:

$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

``` **Auto-animate (element transitions):** ```html

Animate

Animate

``` **Custom backgrounds:** ```html

Red Background

Image Background

Gradient Background

``` ### 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 `
` tags are inside `.reveal .slides` - **Fragments not working:** Ensure `class="fragment"` is set - **Speaker notes not appearing:** Press S, check `