mcpField
H
html-slides

html-slides

github.com/claude-office-skills文档处理54513.6k 次安装39 周前更新
代码仓库

关于 html-slides

html-slides 是用于制作 reveal.js 演示文稿的技能，可根据主题和设计要求生成交互式幻灯片，并支持动画、代码高亮和演讲者备注。

主要功能

  1. 01生成 reveal.js 幻灯片
  2. 02设置主题与切换效果
  3. 03添加片段动画
  4. 04突出显示代码
  5. 05加入演讲者备注

适用场景

  1. 01制作交互式产品演示
  2. 02准备代码讲解演示
  3. 03为幻灯片添加备注和计时器

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/claude-office-skills/skills --skill html-slides

安装后在 Claude Code 中输入/html-slides确认已加载。

详细介绍

HTML 幻灯片技能

概述

此技能可使用 reveal.js（Web 上最受欢迎的演示框架）创建精美的 HTML 演示文稿。制作交互式、响应式幻灯片，支持动画、代码高亮、演讲者备注等功能。

使用方法

  1. 描述你想创建的演示文稿
  2. 指定所需的主题、过渡效果和功能
  3. 我会生成 reveal.js 演示文稿

示例提示词：

  • “创建一个介绍我们产品的交互式演示文稿”
  • “制作一个带语法高亮的代码讲解演示文稿”
  • “制作一个带演讲者备注和计时器的演示文稿”
  • “创建带动画和过渡效果的幻灯片”

领域知识

reveal.js 基础知识
<!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>
幻灯片结构

<section>Slide 1</section>
<section>Slide 2</section>


<section>
    <section>Vertical 1</section>
    <section>Vertical 2</section>
</section>


<section data-markdown>
    <textarea data-template>
        ## Slide Title
        - Point 1
        - Point 2
    </textarea>
</section>
主题

内置主题：black、white、league、beige、sky、night、serif、simple、solarized、blood、moon

<link rel="stylesheet" href="reveal.js/dist/theme/moon.css">
过渡效果
Reveal.initialize({
    transition: 'slide',  // none, fade, slide, convex, concave, zoom
    transitionSpeed: 'default',  // default, fast, slow
    backgroundTransition: 'fade'
});
碎片（动画）
<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>

碎片样式：fade-in、fade-out、fade-up、fade-down、fade-left、fade-right、highlight-red、highlight-blue、highlight-green、strike

代码高亮
<section>
    <pre><code data-trim data-line-numbers="1|3-4">
def hello():
    print("Hello")
    print("World")
    return True
    </code></pre>
</section>
演讲者备注
<section>
    <h2>Slide Title</h2>
    <p>Content</p>
    <aside class="notes">
        Speaker notes go here. Press 'S' to view.
    </aside>
</section>
背景

<section data-background-color="#4d7e65">


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


<section data-background-video="video.mp4">


<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
配置
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]
});

示例

示例 1：技术分享
<!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           # Collection
GET /users/123       # Single resource
POST /users          # Create
PUT /users/123       # Update
DELETE /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>
示例 2：产品发布
<!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>

资源

评论

支持 Markdown