Html Slides

作者 claude-office-skills9c4c7d5cd281MIT499 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫8 個月前更新

僅含說明Documents & Office

AI 產生的概覽

產生以 reveal.js 為基礎的 HTML 簡報，支援主題、轉場、片段動畫、程式碼高亮與講者備註。

功能: 這個技能會產出以 reveal.js 框架為基礎的 HTML 投影片。它提供投影片結構、巢狀垂直投影片、Markdown 投影片、主題、轉場效果、片段動畫、程式碼高亮、講者備註與背景選項的標記寫法，以及各項設定。最後輸出是一個自足的 HTML 簡報檔案，透過 CDN 載入 reveal.js。
適用情境: 當你需要網頁形式的簡報而非 PowerPoint 或 PDF 投影片時使用，例如技術分享、程式碼導覽或產品發表。它適合需要動畫、語法高亮或講者備註的互動式投影片需求。
執行需求: 這個技能沒有附帶指令碼，只有說明文件。產生的 HTML 會從 CDN 載入 reveal.js 及其外掛，因此檢視投影片時需要網路連線。中繼資料中引用了一個名為 pptx_to_html 的 office-mcp 伺服器工具。

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

Describe the presentation you want to create
Specify theme, transitions, and features needed
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

<!doctype html><html><head>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css"></head><body>    <div class="reveal">        <div class="slides">            <section>Slide 1</section>            <section>Slide 2</section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

<!doctype html><html><head>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css"></head><body>    <div class="reveal">        <div class="slides">            <section>Slide 1</section>            <section>Slide 2</section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

Slide Structure

html

<!-- Horizontal slides --><section>Slide 1</section><section>Slide 2</section>
<!-- Vertical slides (nested) --><section>    <section>Vertical 1</section>    <section>Vertical 2</section></section>
<!-- Markdown slides --><section data-markdown>    <textarea data-template>        ## Slide Title        - Point 1        - Point 2    </textarea></section>

<!-- Horizontal slides --><section>Slide 1</section><section>Slide 2</section>
<!-- Vertical slides (nested) --><section>    <section>Vertical 1</section>    <section>Vertical 2</section></section>
<!-- Markdown slides --><section data-markdown>    <textarea data-template>        ## Slide Title        - Point 1        - Point 2    </textarea></section>

Themes

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

Transitions

javascript

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

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

Fragments (Animations)

html

<section>    <p class="fragment">Appears first</p>    <p class="fragment fade-in">Then this</p>    <p class="fragment fade-up">Then this</p>    <p class="fragment highlight-red">Highlight</p></section>

<section>    <p class="fragment">Appears first</p>    <p class="fragment fade-in">Then this</p>    <p class="fragment fade-up">Then this</p>    <p class="fragment highlight-red">Highlight</p></section>

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

Code Highlighting

html

<section>    <pre><code data-trim data-line-numbers="1|3-4">def hello():    print("Hello")    print("World")    return True    </code></pre></section>

<section>    <pre><code data-trim data-line-numbers="1|3-4">def hello():    print("Hello")    print("World")    return True    </code></pre></section>

Speaker Notes

html

<section>    <h2>Slide Title</h2>    <p>Content</p>    <aside class="notes">        Speaker notes go here. Press 'S' to view.    </aside></section>

<section>    <h2>Slide Title</h2>    <p>Content</p>    <aside class="notes">        Speaker notes go here. Press 'S' to view.    </aside></section>

Backgrounds

html

<!-- Color background --><section data-background-color="#4d7e65">
<!-- Image background --><section data-background-image="image.jpg" data-background-size="cover">
<!-- Video background --><section data-background-video="video.mp4">
<!-- Gradient background --><section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">

<!-- Color background --><section data-background-color="#4d7e65">
<!-- Image background --><section data-background-image="image.jpg" data-background-size="cover">
<!-- Video background --><section data-background-video="video.mp4">
<!-- Gradient background --><section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">

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]});

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

<!doctype html><html><head>    <meta charset="utf-8">    <title>API Design Best Practices</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css"></head><body>    <div class="reveal">        <div class="slides">            <section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">                <h1>API Design</h1>                <h3>Best Practices for 2024</h3>                <p><small>Engineering Team</small></p>            </section>                        <section>                <h2>Agenda</h2>                <ol>                    <li class="fragment">RESTful Principles</li>                    <li class="fragment">Authentication</li>                    <li class="fragment">Error Handling</li>                    <li class="fragment">Documentation</li>                </ol>            </section>                        <section>                <section>                    <h2>RESTful Principles</h2>                </section>                <section>                    <h3>Resource Naming</h3>                    <pre><code data-trim class="language-http">GET /users           # CollectionGET /users/123       # Single resourcePOST /users          # CreatePUT /users/123       # UpdateDELETE /users/123    # Delete                    </code></pre>                </section>            </section>                        <section>                <h2>Questions?</h2>                <p>[email protected]</p>            </section>        </div>    </div>        <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>    <script>        Reveal.initialize({            hash: true,            plugins: [RevealHighlight]        });    </script></body></html>

<!doctype html><html><head>    <meta charset="utf-8">    <title>API Design Best Practices</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css"></head><body>    <div class="reveal">        <div class="slides">            <section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">                <h1>API Design</h1>                <h3>Best Practices for 2024</h3>                <p><small>Engineering Team</small></p>            </section>                        <section>                <h2>Agenda</h2>                <ol>                    <li class="fragment">RESTful Principles</li>                    <li class="fragment">Authentication</li>                    <li class="fragment">Error Handling</li>                    <li class="fragment">Documentation</li>                </ol>            </section>                        <section>                <section>                    <h2>RESTful Principles</h2>                </section>                <section>                    <h3>Resource Naming</h3>                    <pre><code data-trim class="language-http">GET /users           # CollectionGET /users/123       # Single resourcePOST /users          # CreatePUT /users/123       # UpdateDELETE /users/123    # Delete                    </code></pre>                </section>            </section>                        <section>                <h2>Questions?</h2>                <p>[email protected]</p>            </section>        </div>    </div>        <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>    <script>        Reveal.initialize({            hash: true,            plugins: [RevealHighlight]        });    </script></body></html>

Example 2: Product Launch

html

<!doctype html><html><head>    <title>Product Launch</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">    <style>        .reveal h1 { color: #2d3748; }        .metric { font-size: 3em; color: #3182ce; }    </style></head><body>    <div class="reveal">        <div class="slides">            <section data-background-color="#f7fafc">                <h1>Introducing</h1>                <h2 style="color: #3182ce;">ProductX 2.0</h2>            </section>                        <section>                <h2>The Problem</h2>                <p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #3182ce; padding: 20px;">                    AI-Powered Automation                </div>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">                    <p>AI-Powered Automation</p>                    <p>90% faster</p>                </div>            </section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

<!doctype html><html><head>    <title>Product Launch</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">    <style>        .reveal h1 { color: #2d3748; }        .metric { font-size: 3em; color: #3182ce; }    </style></head><body>    <div class="reveal">        <div class="slides">            <section data-background-color="#f7fafc">                <h1>Introducing</h1>                <h2 style="color: #3182ce;">ProductX 2.0</h2>            </section>                        <section>                <h2>The Problem</h2>                <p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #3182ce; padding: 20px;">                    AI-Powered Automation                </div>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">                    <p>AI-Powered Automation</p>                    <p>90% faster</p>                </div>            </section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

Resources

來源與署名

來源：claude-office-skills/skills位於html-slides提交9c4c7d5

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Html Slides

HTML Slides Skill

Overview

How to Use

Domain Knowledge

reveal.js Basics

Slide Structure

Themes

Transitions

Fragments (Animations)

Code Highlighting

Speaker Notes

Backgrounds

Configuration

Examples

Example 1: Tech Talk

Example 2: Product Launch

Resources

來源與署名

更多來自 claude-office-skills/skills 的技能

Whatsapp Automation

Xlsx Manipulation

Web Search

Weekly Report

Tiktok Marketing

Template Engine

更多Documents & Office技能

Pdf

View Pdf

Wiki Ado Convert

Esign Field Placement

Visa Doc Translate

Google Workspace Ops