# Presentation Slide Generator

> HTMLプレゼンテーションスライドを生成するスキル。Kanagawaテーマ、GSAPアニメーション、23種類のスライドタイプ対応。ホバーエフェクト・ツールチップによるインタラクティブ機能、無料CDNアイコン（FontAwesome 6 Free推奨）、GASデプロイ可能な1ファイルHTML出力。 Anchors: • Presentation Zen (Garr Reynolds) / 適用: スライド構成 / 目的: 1スライド1メッセージの原則 • GSAP 3.x / 適用: アニメーション / 目的: スライドタイプ別enter/leaveアニメーション • Kanagawa Color Scheme / 適用: テーマ / 目的: 一貫したカラーパレット • FontAwesome 6 Free / 適用: アイコン / 目的: 無料CDN、2000+アイコン、ブランドロゴ対応 Trigger: Use when user requests creating HTML presentation slides, generating slide decks, or building animated presentations with Kanagawa theme. プレゼン, スライド, プレゼンテーション, HTMLスライド, Kanagawa, 発表資料, presentation, slides

- Skill: `majiayu000/presentation-slide-generator-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/presentation-slide-generator-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/presentation-slide-generator-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/presentation-slide-generator-2

---


# Presentation Slide Generator

## 概要

ユーザーの情報を元に、Kanagawaテーマで統一されたHTMLプレゼン資料を生成するスキル。
**Script First**の原則で決定論的処理を自動化し、**Progressive Disclosure**で必要なリソースのみを読み込む。

## 設計原則

| 原則 | 説明 |
|------|------|
| Script First | 決定論的処理はすべてスクリプトで実行（100%精度） |
| LLM for Judgment | LLMは判断・創造が必要な部分のみ担当 |
| Progressive Disclosure | 必要な時に必要なリソースのみ読み込み |
| Schema Driven | 入出力はJSONスキーマで検証 |
| 16:9 Aspect Ratio | すべてのスライドは16:9アスペクト比を厳守 |

## モード一覧

| モード | 用途 | 発動条件 |
|--------|------|----------|
| create | 新規スライド作成 | プレゼン作成要求 |
| modify | 既存スライド修正 | structure.md存在 + 修正要求 |
| verify | 視覚検証 | HTML生成後 |
| pdf | PDF出力 | PDF/印刷要求 |

---

# Part 1: スライド作成ワークフロー

## createモードワークフロー

```
Phase 1: ヒアリング（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ hearing-facilitator                                     │
│ 📖 Read: agents/hearing-facilitator.md (必要時)         │
│                                                         │
│ Output: ヒアリング結果                                   │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 2: 構成設計（LLM Task + Script Validation）
┌─────────────────────────────────────────────────────────┐
│ structure-designer → [validate-structure.mjs]           │
│ 📖 Read: agents/structure-designer.md                   │
│ 📖 Read: references/strategy.md (構成戦略)              │
│ 📖 Read: references/icons.md (アイコン選定時)           │
│                                                         │
│ Output: structure.md → ユーザー承認                     │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 3: HTML生成（LLM Task + Script Validation）
┌─────────────────────────────────────────────────────────┐
│ html-generator                                          │
│ 📖 Read: agents/html-generator.md                       │
│ 📖 Read: references/slide-components.md (スライドタイプ)│
│ 📖 Read: references/theme-style.md (テーマ)             │
│ 📖 Read: assets/slide-template.html (テンプレート)      │
│                                                         │
│ Output: index.html + deploy-guide.md                    │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 3.5: 視覚検証（Script Task - 100%精度）
┌─────────────────────────────────────────────────────────┐
│ [verify-slides.mjs]                                     │
│                                                         │
│ Input: index.html                                       │
│ Output: スクリーンショット + 問題レポート               │
│                                                         │
│ 問題発見時 → LLMが修正 → 再検証                         │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 4: 完了（Script Task）
┌─────────────────────────────────────────────────────────┐
│ [log_usage.mjs] → フィードバック記録                    │
└─────────────────────────────────────────────────────────┘

凡例: [script] = Script Task (100%精度), 無印 = LLM Task
```

## modifyモードワークフロー

```
Phase 1: 修正分析（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ slide-modifier                                          │
│ 📖 Read: agents/slide-modifier.md                       │
│ 📖 Read: 既存structure.md                               │
│                                                         │
│ Output: 修正案 → ユーザー承認                           │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 2: 修正適用（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ html-generator（再生成）                                │
│                                                         │
│ Output: 更新されたindex.html + structure.md             │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 3: 視覚検証 + 完了
（createモードと同様）
```

---

# Part 2: スライドタイプ（23種）

## 基本タイプ（15種）

| タイプ | クラス名 | 用途 | アニメーション |
|--------|---------|------|---------------|
| タイトル | `slide-title` | 表紙 | scale + rotation |
| アジェンダ | `slide-agenda` | 目次 | stagger x軸移動 |
| セクション | `slide-section` | 見出し | scale + y軸移動 |
| メッセージ | `slide-message` | 主張 | y軸移動 + fade |
| リスト | `slide-list` | 箇条書き | stagger x軸移動 |
| 比較 | `slide-compare` | Before/After | 左右から同時出現 |
| フロー | `slide-flow` | プロセス | stagger scale |
| タイムライン | `slide-timeline` | 時系列 | stagger y軸 |
| テーブル | `slide-table` | データ表 | 行ごとstagger |
| 統計 | `slide-stats` | 数値強調 | scale + グラデ |
| チャート | `slide-chart` | グラフ | scaleY |
| 図解 | `slide-diagram` | 図形 | stagger scale |
| 引用 | `slide-quote` | 引用文 | y軸移動 + fade |
| 画像 | `slide-image` | 画像+テキスト | x軸移動 |
| フルイメージ | `slide-full-image` | 全画面背景 | fade |

## 拡張タイプ（8種）

| タイプ | クラス名 | 用途 | アニメーション |
|--------|---------|------|---------------|
| ピラミッド | `slide-pyramid` | 階層構造 | scaleX展開 |
| サークル | `slide-circle` | 中心+周辺 | 中心→周辺scale |
| グリッド | `slide-grid` | カード一覧 | stagger scale |
| ハイライト | `slide-highlight` | 重要値強調 | scale + グラデ |
| アイコングリッド | `slide-icon-grid` | アイコン一覧 | stagger rotation |
| プロセス（縦） | `slide-process` | 縦ステップ | stagger x移動 |
| 引用（拡張） | `slide-quote-extended` | 引用+著者 | mark rotation |
| ヒーロー | `slide-hero` | CTA見出し | badge→title→cta |

**詳細仕様**: 📖 `references/slide-components.md`（HTML生成時に読み込み）

---

# Part 3: Progressive Disclosure リソースマップ

## 読み込みタイミング

リソースは**必要な時のみ**読み込む。全てを一度に読み込まない。

### agents/ （LLM Task仕様）

| Agent | 読み込み条件 | 責務 |
|-------|-------------|------|
| [hearing-facilitator.md](agents/hearing-facilitator.md) | Phase 1開始時 | ヒアリング・情報収集 |
| [structure-designer.md](agents/structure-designer.md) | Phase 2開始時 | 構成設計・スライドタイプ判定 |
| [html-generator.md](agents/html-generator.md) | Phase 3開始時 | HTML生成・アニメーション実装 |
| [slide-modifier.md](agents/slide-modifier.md) | modifyモード時 | 既存スライド修正 |

### schemas/ （入出力スキーマ）

| Schema | 読み込み条件 | 用途 |
|--------|-------------|------|
| [structure-definition.json](schemas/structure-definition.json) | 構成設計時 | structure.md検証 |
| [slide-definition.json](schemas/slide-definition.json) | HTML生成時 | スライド定義検証 |
| [validation-result.json](schemas/validation-result.json) | 検証完了時 | 検証結果検証 |

### references/ （詳細知識）

| Reference | 読み込み条件 | 内容 |
|-----------|-------------|------|
| [strategy.md](references/strategy.md) | 構成設計時 | BSEC構成・ボリューム設計 |
| [writing-rules.md](references/writing-rules.md) | 構成設計時 | タイトル・メッセージ作成 |
| [layout-visual.md](references/layout-visual.md) | HTML生成時 | レイアウト・余白 |
| [diagram-chart.md](references/diagram-chart.md) | 図解スライド時 | 14種図解・グラフ |
| [slide-components.md](references/slide-components.md) | HTML生成時 | 23種スライドタイプ詳細 |
| [theme-style.md](references/theme-style.md) | HTML生成時 | Kanagawaテーマ・CSS変数 |
| [icons.md](references/icons.md) | アイコン選定時 | 18カテゴリ・マッピング |
| [print-layout.md](references/print-layout.md) | PDF出力時 | 印刷用CSS |
| [llm-script-separation.md](references/llm-script-separation.md) | 設計時参照 | 責務分離ガイド |

### assets/ （テンプレート）

| Asset | 読み込み条件 | 用途 |
|-------|-------------|------|
| [slide-template.html](assets/slide-template.html) | HTML生成時 | 完全HTMLテンプレート |
| [structure-template.md](assets/structure-template.md) | 構成設計時 | structure.mdテンプレート |
| [gas-deploy-guide.md](assets/gas-deploy-guide.md) | 完了時出力 | GASデプロイ手順 |
| [print-styles.css](assets/print-styles.css) | PDF出力時 | 印刷用CSS |

### scripts/ （決定論的処理 - 100%精度）

| Script | 用途 | 実行タイミング |
|--------|------|---------------|
| `validate-structure.mjs` | 構成案検証（23種対応） | Phase 2完了時 |
| `verify-slides.mjs` | 視覚検証（16:9対応） | Phase 3.5 |
| `log_usage.mjs` | フィードバック記録 | 完了時 |

---

# Part 4: 必須制約

## 16:9アスペクト比（最重要）

**すべてのスライドは16:9アスペクト比を厳守すること。**

### 必須HTML構造

```html
<div class="slider" id="slider">
  <div class="slide-area">  <!-- 16:9強制コンテナ -->
    <div class="slider__container">
      <!-- スライドHTML -->
    </div>
  </div>
</div>
```

### 必須CSS変数

```css
:root {
  --slide-aspect-ratio: 16 / 9;
  --slide-max-width: min(100vw, calc(100vh * (16 / 9)));
  --slide-max-height: min(100vh, calc(100vw * (9 / 16)));
}
```

### 検証コマンド

```bash
node scripts/verify-slides.mjs ./index.html --check-ratio
```

## index.html ⇔ structure.md 同期ルール

**重要**: 両ファイルは常に整合性を維持すること。

```
【HTML修正時】
index.html 修正 → structure.md 該当セクション更新 → 修正履歴追記

【構成変更時】
structure.md 修正 → ユーザー承認 → index.html 再生成
```

---

# Part 5: 実行コマンドリファレンス

## 構成案検証

```bash
# JSON形式で検証
node scripts/validate-structure.mjs structure.json

# パイプで検証
echo '{"title":"Test","slides":[...]}' | node scripts/validate-structure.mjs
```

## 視覚検証

```bash
# スクリーンショット撮影（16:9ビューポート: 1920x1080）
node scripts/verify-slides.mjs ./index.html ./screenshots

# 16:9アスペクト比のみ検証
node scripts/verify-slides.mjs ./index.html --check-ratio

# 検証後に自動削除
node scripts/verify-slides.mjs ./index.html --auto-cleanup

# スクリーンショット削除のみ
node scripts/verify-slides.mjs ./index.html --cleanup
```

## フィードバック記録

```bash
node scripts/log_usage.mjs --result success --phase "Phase 3" --agent "html-generator"
```

---

# Part 6: 出力ディレクトリ構成

## デフォルト構成

```
05_Project/
└── スライド/
    └── slide-YYYY-MM-DD-{タイトル}/
        ├── index.html      # プレゼンテーション本体
        ├── structure.md    # 構造化データ（改善・修正用）
        └── deploy-guide.md # GASデプロイ手順
```

## Electronアプリ連携

Electronデスクトップアプリ（AIWorkflowOrchestrator）からこのスキルを呼び出す場合、出力ディレクトリはアプリの設定画面から構成可能:

| 設定項目 | 説明 |
|----------|------|
| outputDirectory | スライド出力先ディレクトリ（OS標準ダイアログで選択） |
| autoCreateDirectory | ディレクトリ自動作成フラグ |

**取得方法（Electronアプリ内）**:

```typescript
// Renderer Process
const settings = await window.slideSettingsAPI.getAll();
const outputDir = settings.data.outputDirectory;
```

**関連ドキュメント**:
- 技術仕様: `docs/technical/slide-settings.md`
- APIリファレンス: `docs/api/slide-settings-api.md`
- セキュリティ仕様: `.claude/skills/aiworkflow-requirements/references/security-api-electron.md`（slideSettingsAPIセクション）

---

## ベストプラクティス

### すべきこと

| 推奨事項 | 理由 |
|----------|------|
| 1スライド1メッセージ | 明確な伝達 |
| 構造化データを先に出力 | 手戻り最小化 |
| ユーザー承認後にHTML生成 | 期待値合わせ |
| Script検証を必ず実行 | 100%精度 |
| index.htmlとstructure.md同期 | 整合性維持 |

### 避けるべきこと

| 禁止事項 | 問題点 |
|----------|--------|
| 全リソースを一度に読み込む | コンテキスト浪費 |
| 承認なしでHTML生成 | 手戻り発生 |
| 同期せずにファイル編集 | 整合性崩壊 |
| 定義外のスライドタイプ使用 | アニメーション不具合 |

---

## 変更履歴

| Version | Date | Changes |
|---------|------|---------|
| 3.1.0 | 2026-01-14 | Electronアプリ連携（出力ディレクトリ設定機能）のドキュメント追加 |
| 3.0.0 | 2026-01-13 | **skill-creator最新仕様対応**: Progressive Disclosure形式にリファクタリング、リソースマップ追加、Schema Driven対応、設計原則明記 |
| 2.5.0 | 2026-01-07 | 整合性維持ルール強化 |
| 2.4.0 | 2026-01-07 | 16:9アスペクト比の厳格化 |
| 2.3.0 | 2026-01-04 | 印刷CSS刷新、LLM/Script責務分離 |
| 2.2.0 | 2026-01-03 | validate-structure.mjs 23種対応 |
| 2.0.0 | 2026-01-03 | ホバーエフェクト・拡張スライドタイプ追加 |
| 1.0.0 | 2026-01-02 | 初版作成 |