HTML Slides

HTML Slides Skill

Overview

This skill enables creation of stunning HTML-based presentations using reveal.js - the web's most popular presentation framework. Create interactive, responsive slides with animations, code highlighting, speaker notes, and more.

How to Use

1. Describe the presentation you want to create
2. Specify theme, transitions, and features needed
3. I'll generate a reveal.js presentation

Example prompts:

• Create an interactive presentation about our product
• Build a code walkthrough presentation with syntax highlighting
• Make a presentation with speaker notes and timer
• Create slides with animations and transitions

Domain Knowledge

reveal.js Basics

<!doctype html>

    
    

    
        
            Slide 1
            Slide 2
        
    
    
    Reveal.initialize();

Slide Structure

Slide 1
Slide 2

    Vertical 1
    Vertical 2

    
        ## Slide Title
        - Point 1
        - Point 2

Themes

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

Transitions

Reveal.initialize({
    transition: 'slide',  // none, fade, slide, convex, concave, zoom
    transitionSpeed: 'default',  // default, fast, slow
    backgroundTransition: 'fade'
});

Fragments (Animations)

Appears first
    Then this
    Then this
    Highlight

Fragment styles: fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green, strike

Code Highlighting

def hello():
    print("Hello")
    print("World")
    return True

Speaker Notes

Slide Title
    Content
    
        Speaker notes go here. Press 'S' to view.

Backgrounds

Configuration

Reveal.initialize({
    // Display controls
    controls: true,
    controlsTutorial: true,
    progress: true,
    slideNumber: true,
    
    // Behavior
    hash: true,
    respondToHashChanges: true,
    history: true,
    keyboard: true,
    overview: true,
    center: true,
    touch: true,
    loop: false,
    rtl: false,
    shuffle: false,
    
    // Timing
    autoSlide: 0,  // 0 = disabled
    autoSlideStoppable: true,
    
    // Appearance
    width: 960,
    height: 700,
    margin: 0.04,
    minScale: 0.2,
    maxScale: 2.0,
    
    // Plugins
    plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});

Examples

Example 1: Tech Talk

<!doctype html>

    
    API Design Best Practices
    
    
    

    
        
            
                API Design
                Best Practices for 2024
                Engineering Team
            
            
            
                Agenda
                
                    RESTful Principles
                    Authentication
                    Error Handling
                    Documentation
                
            
            
            
                
                    RESTful Principles
                
                
                    Resource Naming
                    
GET /users           # Collection
GET /users/123       # Single resource
POST /users          # Create
PUT /users/123       # Update
DELETE /users/123    # Delete
                    
                
            
            
            
                Questions?
                api-team@company.com
            
        
    
    
    
    
    
        Reveal.initialize({
            hash: true,
            plugins: [RevealHighlight]
        });

Example 2: Product Launch

<!doctype html>

    Product Launch
    
    
    
        .reveal h1 { color: #2d3748; }
        .metric { font-size: 3em; color: #3182ce; }
    

    
        
            
                Introducing
                ProductX 2.0
            
            
            
                The Problem
                Teams waste 20% of time on manual tasks
            
            
            
                Our Solution
                
                    AI-Powered Automation
                
            
            
            
                Our Solution
                
                    AI-Powered Automation
                    90% faster
                
            
        
    
    
    Reveal.initialize();

Resources

• reveal.js Documentation
• GitHub Repository
• Demo Slides