--- # ═══════════════════════════════════════════════════════════════════════════════ # CLAUDE OFFICE SKILL - Enhanced Metadata v2.0 # ═══════════════════════════════════════════════════════════════════════════════ # Basic Information name: html-slides description: ">" version: "1.0" author: claude-office-skills license: MIT # Categorization category: presentation tags: - html - slides - revealjs - web department: All # AI Model Compatibility models: recommended: - claude-sonnet-4 - claude-opus-4 compatible: - claude-3-5-sonnet - gpt-4 - gpt-4o # MCP Tools Integration mcp: server: office-mcp tools: - pptx_to_html # Skill Capabilities capabilities: - web_presentation - html_slides # Language Support languages: - en - zh --- # 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 ```html
Slide 1
Slide 2
``` ### Slide Structure ```html
Slide 1
Slide 2
Vertical 1
Vertical 2
``` ### Themes Built-in themes: `black`, `white`, `league`, `beige`, `sky`, `night`, `serif`, `simple`, `solarized`, `blood`, `moon` ```html ``` ### Transitions ```javascript Reveal.initialize({ transition: 'slide', // none, fade, slide, convex, concave, zoom transitionSpeed: 'default', // default, fast, slow backgroundTransition: 'fade' }); ``` ### Fragments (Animations) ```html

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 ```html 

def hello():
    print("Hello")
    print("World")
    return True
``` ### Speaker Notes ```html

Slide Title

Content

``` ### Backgrounds ```html
``` ### Configuration ```javascript 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 ```html API Design Best Practices

API Design

Best Practices for 2024

Engineering Team

Agenda

  1. RESTful Principles
  2. Authentication
  3. Error Handling
  4. 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

``` ### Example 2: Product Launch ```html Product Launch

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

``` ## Resources - [reveal.js Documentation](https://revealjs.com/) - [GitHub Repository](https://github.com/hakimel/reveal.js) - [Demo Slides](https://revealjs.com/demo/)