Presentation Slide Generator

Presentation Slide Generator

概要

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

設計原則

モード一覧

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種）

拡張タイプ（8種）

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

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

読み込みタイミング

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

agents/ （LLM Task仕様）

schemas/ （入出力スキーマ）

references/ （詳細知識）

assets/ （テンプレート）

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

Part 4: 必須制約

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

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

必須HTML構造

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

必須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)));
}

検証コマンド

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

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

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

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

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

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

構成案検証

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

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

視覚検証

# スクリーンショット撮影（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

フィードバック記録

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）からこのスキルを呼び出す場合、出力ディレクトリはアプリの設定画面から構成可能:

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

// 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セクション）

ベストプラクティス

すべきこと

避けるべきこと

変更履歴