mcpField
P
presentation-generator

presentation-generator

github.com/glebisドキュメント401321 回インストール1 日前に更新
リポジトリ

presentation-generator について

presentation-generatorは、JSON、YAML、Markdownからネオブルータリズム調のプレゼンテーションを作成するスキルです。複数のスライド構成に対応し、操作可能なHTMLやPNG、PDFに出力できます。

主な機能

  1. 01JSON、YAML、Markdownから生成
  2. 02複数のスライドレイアウト
  3. 03ナビゲーションとキー操作対応のHTML
  4. 04PNGスライドとPDFへの出力

活用シーン

  1. 01ワークショップのメモを発表資料に変換
  2. 02コード、統計、画像を含むスライドの作成
  3. 03スライドをPNG画像として一括出力
  4. 04印刷・共有用PDFの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/glebis/claude-skills --skill presentation-generator

インストール後、Claude Code で/presentation-generatorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.claude-plugin/
plugin.json
scripts/
export-slides.js
generate-presentation.js
templates/
base.html
styles.css

詳細

プレゼンテーション生成ツール

概要

Agency のブランドカラーを使ったネオブルータリズムスタイルの、魅力的なプレゼンテーションを作成します。スムーズなスクロールナビゲーションを備えたインタラクティブな HTML プレゼンテーションの生成、各スライドの PNG 書き出し、PDF ドキュメントの作成ができます。

出力形式：

  • HTML - ナビゲーションドット、キーボード操作、スムーズスクロールに対応したインタラクティブなプレゼンテーション
  • PNG - Playwright による個別スライドの画像（1920x1080）
  • PDF - Playwright による複数ページのドキュメント

クイックスタート

1. JSON/YAML コンテンツからプレゼンテーションを作成する
node scripts/generate-presentation.js --input content.json --output presentation.html
2. スライドを PNG に書き出す
node scripts/export-slides.js presentation.html --format png --output ./slides/
3. PDF に書き出す
node scripts/export-slides.js presentation.html --format pdf --output presentation.pdf

ブランドの反映

一貫したスタイルを適用するため、このスキルでは brand-agency を参照します。

カラー（brand-agency から）
カラーHex用途
プライマリー（オレンジ）#e85d04タイトルスライド、CTA、アクセント
セカンダリー（イエロー）#ffd60aハイライト、アクセントスライド
アクセント（ブルー）#3a86ff情報スライド、リンク
成功（グリーン）#38b000ポジティブなコンテンツ
エラー（レッド）#d62828警告、強調
前景色#000000テキスト、枠線
背景色#ffffff明るいスライド
タイポグラフィ
  • 見出し：Geist ExtraBold（800）
  • 本文：EB Garamond
  • コード/ASCII：Geist Mono

スライドの種類

1. タイトルスライド（--title）

サブタイトルと色付き背景（プライマリー／セカンダリー／アクセント／ダーク）を備えた全画面のタイトルです。

2. コンテンツスライド（--content）

見出し＋本文テキスト＋任意の箇条書きです。

3. 2 カラムスライド（--two-col）

比較、テキスト＋画像、ビフォー／アフター向けの分割レイアウトです。

4. コードスライド（--code）

タイトル付きの、構文強調表示されたコードブロックを含むダークな背景です。

5. 統計スライド（--stats）

ラベル付きの大きな数値です（例：「14 個のテンプレート | 4 種類の形式 | 1 つのスキル」）。

6. タスクグリッドスライド（--grid）

番号、タイトル、説明を記載したカードのグリッドです。

7. ASCII アートスライド（--ascii）

ASCII の罫線文字を使った装飾スライドです。

8. 画像スライド（--image）

任意のキャプションを付けられる、画面全体または枠内に配置した画像です。

ASCII 装飾

テック感のあるデザインには、ASCII の罫線文字を使います。

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃ ━━━ ───

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

コンテンツ形式

JSON 形式：
{
  "title": "Presentation Title",
  "footer": "Company / Date",
  "slides": [
    {
      "type": "title",
      "bg": "primary",
      "title": "Main Title",
      "subtitle": "Subtitle text"
    },
    {
      "type": "content",
      "title": "Section Title",
      "body": "Introduction paragraph",
      "bullets": ["Point 1", "Point 2", "Point 3"]
    },
    {
      "type": "code",
      "title": "Code Example",
      "language": "javascript",
      "code": "const x = 42;"
    },
    {
      "type": "stats",
      "items": [
        {"value": "14", "label": "templates"},
        {"value": "4", "label": "formats"},
        {"value": "∞", "label": "possibilities"}
      ]
    }
  ]
}
YAML 形式：
title: Presentation Title
footer: Company / Date
slides:
  - type: title
    bg: primary
    title: Main Title
    subtitle: Subtitle text

  - type: content
    title: Section Title
    body: Introduction paragraph
    bullets:
      - Point 1
      - Point 2

インタラクティブ機能

生成される HTML には以下が含まれます。

  • ナビゲーションドット - クリック可能なドットを備えた、右側に固定されたサイドバー
  • キーボードナビゲーション - 矢印キー、Page Up/Down、Home/End
  • スムーズスクロール - CSS のスクロールスナップとスムーズな動作
  • Intersection Observer - アクティブなスライドのハイライト表示
  • レスポンシブ - さまざまな画面サイズに対応（16:9 に最適化）

使用例

ワークショップのまとめを作成する：
# Generate from today's session
node scripts/generate-presentation.js \
  --title "Claude Code Lab — Day Summary" \
  --footer "29.11.2025" \
  --slides slides-content.json \
  --output workshop-summary.html
Markdown から手早くプレゼンテーションを作成する：
# Convert markdown outline to presentation
node scripts/md-to-slides.js notes.md --output presentation.html
一括で書き出す：
# Export all slides as PNGs
node scripts/export-slides.js presentation.html --format png --output ./export/

# Result: slide-01.png, slide-02.png, etc.

ファイル構成

presentation-generator/
├── SKILL.md              # This file
├── templates/
│   ├── base.html         # Base HTML template
│   ├── slides/           # Slide type partials
│   │   ├── title.html
│   │   ├── content.html
│   │   ├── code.html
│   │   ├── stats.html
│   │   ├── two-col.html
│   │   ├── grid.html
│   │   └── ascii.html
│   └── styles.css        # Neobrutalism styles
├── scripts/
│   ├── generate-presentation.js  # Main generator
│   ├── export-slides.js          # PNG/PDF export
│   └── md-to-slides.js           # Markdown converter
└── output/               # Generated files

依存関係

  • Node.js 18+
  • Playwright（npm install playwright）

ヒント

  1. ASCII は控えめに使う - テック／開発向けのプレゼンテーションには最適ですが、それ以外では古めかしく感じられることがあります
  2. ブランドカラーを使う - 独自の色を混ぜず、5 色のパレットを使いましょう
  3. タイトルスライドには大きな文字を使う - h1 は最低でも 4-5rem にしましょう
  4. 1 枚のスライドにつき 1 つのアイデアにする - ネオブルータリズムは、内容を絞ると最も効果を発揮します
  5. インタラクティブ機能をテストする - 書き出す前に必ず HTML をプレビューしましょう

コメント

Markdown 対応