name	html-presentation
description	Generate HTML-based presentations with reveal.js or similar frameworks. Use when creating web-based presentations.

HTML Presentation Generator Skill

HTMLベースのプレゼンテーションを生成するスキルです。reveal.jsを使用した美しく、インタラクティブなスライドショーを作成できます。

概要

このスキルは、マークダウン形式のコンテンツから、プロフェッショナルなHTMLプレゼンテーションを自動生成します。

主な機能

reveal.jsベース: 業界標準のプレゼンテーションフレームワーク
レスポンシブデザイン: あらゆる画面サイズに対応
豊富なテーマ: 複数のビルトインテーマ
コードハイライト: プログラミングコードの美しい表示
PDF出力対応: プレゼンテーションをPDFとしてエクスポート可能
スピーカーノート: 発表者用のメモ機能
アニメーション: スライド遷移とフラグメントアニメーション

使用方法

基本的な使い方

HTMLプレゼンテーションを作成してください。
タイトル: "C++のメモリ管理"
スライド内容:
1. イントロダクション
2. メモリリークの問題
3. スマートポインタ
4. まとめ

カスタマイズオプション

以下の設定でHTMLプレゼンテーションを作成:
- テーマ: black
- トランジション: slide
- コードハイライト: monokai
- タイトル: "技術プレゼンテーション"

生成されるファイル

presentation/
├── index.html          # メインのプレゼンテーションファイル
├── README.md           # 使い方ガイド
└── assets/             # カスタムアセット（オプション）
    ├── images/
    └── code/

サポートする機能

1. スライドの種類

タイトルスライド: プレゼンテーションの表紙
コンテンツスライド: 通常のコンテンツ
コードスライド: シンタックスハイライト付きコード表示
2カラムレイアウト: 左右分割レイアウト
画像スライド: 画像メインのスライド

2. テーマオプション

利用可能なテーマ:

black (デフォルト): ダークテーマ
white: ライトテーマ
league: グレーベース
beige: ベージュ
sky: ブルー系
night: ダーク + コントラスト
serif: セリフフォント
simple: シンプル
solarized: Solarizedカラー

3. トランジション効果

none: トランジションなし
fade: フェード
slide: スライド（デフォルト）
convex: 凸面
concave: 凹面
zoom: ズーム

4. コードハイライト

サポートする言語:

C/C++
C#
Python
JavaScript
Java
Rust
Go
その他多数

実装例

例1: 技術プレゼンテーション

入力:

C#とC++の相互運用についてのプレゼンテーションを作成。
スライド:
1. タイトル: "C# ⇔ C++ Interop"
2. なぜ相互運用が必要か
3. P/Invokeの基本
4. コード例
5. まとめ

生成される内容:

reveal.jsベースのフルHTMLプレゼンテーション
各スライドが適切にフォーマットされている
コード例がハイライトされている
レスポンシブ対応

例2: データ可視化プレゼン

入力:

データ分析結果のプレゼンを作成。
テーマ: white
グラフや図を含むスライドを5枚

生成される内容:

Chart.jsまたはD3.jsを統合したスライド
データ可視化の実例
インタラクティブな要素

プレゼンテーションの実行

生成されたプレゼンテーションを表示するには:

# ローカルサーバーを起動
cd presentation
python -m http.server 8000

# ブラウザで開く
# http://localhost:8000

または、単純に index.html をブラウザで開くだけでも動作します。

キーボードショートカット

プレゼンテーション実行時の操作:

→ / Space: 次のスライド
←: 前のスライド
↑ / ↓: 縦方向のナビゲーション
Home / End: 最初/最後のスライド
ESC / O: スライド一覧表示
S: スピーカーノート表示
F: フルスクリーン
B / .: 画面を黒く/白く（プレゼン中断時）
?: ヘルプ表示

PDF出力

プレゼンテーションをPDFとして保存:

ChromeまたはChromiumベースのブラウザで開く
URLに ?print-pdf を追加: index.html?print-pdf
ブラウザの印刷機能で「PDFとして保存」

カスタマイズ

CSSカスタマイズ

<style>
.reveal h1 {
    color: #42A5F5;
}

.reveal code {
    background: #272822;
    padding: 2px 6px;
}
</style>

JavaScriptカスタマイズ

Reveal.initialize({
    controls: true,
    progress: true,
    center: true,
    hash: true,
    transition: 'slide'
});

ベストプラクティス

1スライド1メッセージ: 情報を詰め込みすぎない
視覚的に: 図やコードを活用
コントラスト: テーマに合わせた配色
フォントサイズ: 最小でも24px以上
アニメーション控えめ: 過度なエフェクトは避ける

トラブルシューティング

reveal.jsが読み込まれない

CDNから読み込んでいるため、インターネット接続を確認してください。オフライン使用の場合は、reveal.jsをローカルにダウンロードして参照を変更します。

コードハイライトが機能しない

highlight.jsが正しく読み込まれているか確認してください。言語指定が正しいか確認（例: language-cpp）

スライドが表示されない

ブラウザの開発者コンソールでエラーを確認してください。多くの場合、HTMLの構文エラーやJavaScriptのエラーです。

高度な使い方

縦方向のスライド

<section>
    <section>メイントピック1</section>
    <section>詳細1-1</section>
    <section>詳細1-2</section>
</section>

フラグメント（段階的表示）

<ul>
    <li class="fragment">最初に表示</li>
    <li class="fragment">次に表示</li>
    <li class="fragment">最後に表示</li>
</ul>

スピーカーノート

<aside class="notes">
    これは発表者だけに見えるノートです。
    重要なポイントをメモしておけます。
</aside>

参考リンク

制限事項

インターネット接続が必要（CDN使用時）
最新のブラウザ推奨（IE11非対応）
大量の画像使用時はパフォーマンスに注意

バージョン情報

reveal.js: 4.5.0
highlight.js: 11.8.0

使用例:

次のトピックでプレゼンテーションを作成してください：
- タイトル: "Agentベース開発"
- テーマ: night
- スライド5枚
- コード例を含む

このプロンプトで、完全なHTMLプレゼンテーションが生成されます！

html-presentation

Install Skill

SKILL.md