跳到主要内容
知知仓学习社ZHICANG

html-slides

>

不碰外部（只输出文字）无严重或高危命中claude-office-skills/skills

它会碰到什么

扫了多少1 个文本文件，8 KB
它会碰到什么不碰外部（只输出文字）
命中总数0 处
命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

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

<!-- 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

<link rel="stylesheet" href="reveal.js/dist/theme/moon.css">

Transitions

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

Fragments (Animations)

<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

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

Speaker Notes

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

Backgrounds

<!-- 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

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>
<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>api-team@company.com</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

<!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

想直接用这个技能？

本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。

去原始仓库

它属于哪个仓库

仓库claude-office-skills/skills
星标★ 470
本站分层T2
该仓技能数137
原文件路径html-slides/SKILL.md

同一个仓库里的其他技能

看这个仓库的全部 137 个技能