html-presentation

HTML Presentation Generator Skill

This is a skill for generating HTML-based presentations. You can create beautiful, interactive slideshows using reveal.js.

Overview

This skill automatically generates professional HTML presentations from Markdown-formatted content.

Main Features

reveal.js-based: Industry-standard presentation framework
Responsive design: Supports any screen size
Rich themes: Multiple built-in themes
Code highlighting: Beautiful display of programming code
PDF export support: Presentations can be exported as PDF
Speaker notes: Speaker notes feature
Animations: Slide transitions and fragment animations

How to Use

Basic Usage

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

Customization options

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

Generated Files

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

Supported Features

1. Slide Types

Title slide: Presentation cover
Content slide: Regular content
Code slide: Code display with syntax highlighting
Two-column layout: Left-right split layout
Image slides: Image-focused slides

2. Theme options

Available themes:

black (default): Dark theme
white: Light theme
league: Gray base
beige: Beige
sky: Blue-based
night: Dark + contrast
serif: Serif font
simple: Simple
solarized: Solarized colors

3. Transition Effects

none: No transition
fade: Fade
slide: Slide (default)
convex: Convex
concave: Concave
zoom: Zoom

4. Code highlighting

Supported languages:

C/C++
C#
Python
JavaScript
Java
Rust
Go
Many others

Implementation Examples

Example 1: Technical Presentation

Input:

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

Generated content:

Full HTML presentation based on reveal.js
Each slide is properly formatted
Code examples are highlighted
Responsive support

Example 2: Data Visualization Presentation

Input:

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

Generated content:

Slides integrated with Chart.js or D3.js
Real examples of data visualization
Interactive elements

Running the Presentation

To display the generated presentation:

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

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

Or, simply index.html opening it in a browser will also work.

Keyboard shortcuts

Operations during presentation playback:

→ / Space: Next slide
←: Previous slide
↑ / ↓: Vertical navigation
Home / End: First/last slide
ESC / O: Show slide list
S: Show speaker notes
F: Fullscreen
B / .: Black/white screen (when pausing presentation)
?: Show help

PDF Export

Save the presentation as PDF:

Open in Chrome or a Chromium-based browser
URLに ?print-pdf Add: index.html?print-pdf
Use the browser's print function to "Save as PDF"

Customization

CSS customization

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

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

JavaScript customization

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

Best practices

One message per slide: Don't cram too much information
Visually: Utilize diagrams and code
Contrast: Color scheme matching the theme
Font size: At least 24px
Subtle animations: Avoid excessive effects

Troubleshooting

reveal.js does not load

It is loaded from a CDN, so please check your internet connection. For offline use, download reveal.js locally and change the reference.

Code highlighting does not work

Please check that highlight.js is loaded correctly. Check that the language specification is correct (e.g.: language-cpp）

Slides do not appear

Please check for errors in the browser's developer console. In many cases, they are HTML syntax errors or JavaScript errors.

Advanced Usage

Vertical slides

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

Fragments (progressive display)

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

Speaker notes

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

Reference links

Limitations

Internet connection required (when using CDN)
Latest browser recommended (IE11 not supported)
Be mindful of performance when using large numbers of images

Version Information

reveal.js: 4.5.0
highlight.js: 11.8.0

Usage example:

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

With this prompt, a complete HTML presentation will be generated!