mcpField
H
html-slides

html-slides

github.com/claude-office-skillsドキュメント54513.6k 回インストール39 週間前に更新
リポジトリ

html-slides について

html-slides は reveal.js プレゼンテーションを作成するスキルです。テーマやデザインの要望に応じて、アニメーション、コードハイライト、発表者ノートを備えたスライドを生成します。

主な機能

  1. 01reveal.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 を使って、魅力的な 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 対応