ReddRadar
Agent skill
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
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/presentation-slide-generator
SKILL.md
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アスペクト比を厳守 |
| A4印刷優先設計 | 印刷時はpt単位フォント・mm単位寸法で確実にA4内に収める |
デフォルト設定
| 項目 | デフォルト値 | 説明 |
|---|---|---|
| テーマ | Kanagawa Light（ライトモード） | 読みやすさと印刷時のインク節約を考慮 |
| アジェンダインジケーター | 有効（左上固定表示） | セクション追跡・クリックジャンプ機能付き |
| 印刷フォーマット | A4横向き16:9（281mm×158mm） | 100%スケールで最適印刷 |
| アスペクト比 | 16:9 | 画面・印刷の両方で一貫した表示 |
モード一覧
| モード | 用途 | 発動条件 |
|---|---|---|
| create | 新規スライド作成 | プレゼン作成要求 |
| modify | 既存スライド修正 | structure.md存在 + 修正要求 |
| verify | 視覚検証 | HTML生成後 |
| 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 | Phase 1開始時 | ヒアリング・情報収集 |
| structure-designer.md | Phase 2開始時 | 構成設計・スライドタイプ判定 |
| html-generator.md | Phase 3開始時 | HTML生成・アニメーション実装 |
| slide-modifier.md | modifyモード時 | 既存スライド修正 |
schemas/ （入出力スキーマ）
| Schema | 読み込み条件 | 用途 |
|---|---|---|
| structure-definition.json | 構成設計時 | structure.md検証 |
| slide-definition.json | HTML生成時 | スライド定義検証 |
| validation-result.json | 検証完了時 | 検証結果検証 |
references/ （詳細知識）
| Reference | 読み込み条件 | 内容 |
|---|---|---|
| strategy.md | 構成設計時 | BSEC構成・ボリューム設計 |
| writing-rules.md | 構成設計時 | タイトル・メッセージ作成 |
| layout-visual.md | HTML生成時 | レイアウト・余白 |
| diagram-chart.md | 図解スライド時 | 14種図解・グラフ |
| slide-components.md | HTML生成時 | 23種スライドタイプ詳細 |
| theme-style.md | HTML生成時 | Kanagawaテーマ・CSS変数 |
| icons.md | アイコン選定時 | 18カテゴリ・マッピング |
| print-layout.md | PDF出力時 | 印刷用CSS |
| llm-script-separation.md | 設計時参照 | 責務分離ガイド |
assets/ （テンプレート）
| Asset | 読み込み条件 | 用途 |
|---|---|---|
| slide-template.html | HTML生成時 | 完全HTMLテンプレート |
| structure-template.md | 構成設計時 | structure.mdテンプレート |
| gas-deploy-guide.md | 完了時出力 | GASデプロイ手順 |
| 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構造
<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）からこのスキルを呼び出す場合、出力ディレクトリはアプリの設定画面から構成可能:
| 設定項目 | 説明 |
|---|---|
| outputDirectory | スライド出力先ディレクトリ（OS標準ダイアログで選択） |
| autoCreateDirectory | ディレクトリ自動作成フラグ |
取得方法（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セクション）
ベストプラクティス
すべきこと
| 推奨事項 | 理由 |
|---|---|
| 1スライド1メッセージ | 明確な伝達 |
| 構造化データを先に出力 | 手戻り最小化 |
| ユーザー承認後にHTML生成 | 期待値合わせ |
| Script検証を必ず実行 | 100%精度 |
| index.htmlとstructure.md同期 | 整合性維持 |
避けるべきこと
| 禁止事項 | 問題点 |
|---|---|
| 全リソースを一度に読み込む | コンテキスト浪費 |
| 承認なしでHTML生成 | 手戻り発生 |
| 同期せずにファイル編集 | 整合性崩壊 |
| 定義外のスライドタイプ使用 | アニメーション不具合 |
変更履歴
| Version | Date | Changes |
|---|---|---|
| 3.4.1 | 2026-01-23 | GSAP競合対策: 各スライドタイプ別にvisibility: visibleを明示設定、全子要素の可視化ルール追加（表紙・メッセージスライドが印刷されない問題を修正） |
| 3.4.0 | 2026-01-23 | A4印刷優先設計: 設計原則に追加、print-layout.md v3.0.0全面改訂（pt単位フォント・mm単位寸法・スライドタイプ別サイズ指定・サイクル図絶対配置）、print-styles.css全面改訂 |
| 3.3.0 | 2026-01-23 | デフォルト設定セクション追加: ライトモード・アジェンダインジケーター・A4横16:9印刷をデフォルトとして明記、スキーマ追加: structure-definition.json, slide-definition.json, validation-result.json |
| 3.2.0 | 2026-01-23 | 16:9 on A4印刷対応: 100%スケール印刷用に寸法最適化（281mm×158mm）、アジェンダインジケーター: 左上固定・クリックジャンプ機能をデフォルト追加 |
| 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 | 初版作成 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?