devbasex · takemi-ohama · Aug 6, 2026 · Aug 6, 2026 · Aug 6, 2026 · Aug 6, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -64,6 +64,7 @@ ai-plugins/
 | [docs/plugin-development-guide.md](docs/plugin-development-guide.md) | プラグイン開発ガイド（構造、plugin.json、バージョン管理、検証） |
 | [docs/ndf-plugin-reference.md](docs/ndf-plugin-reference.md) | NDFプラグイン詳細リファレンス |
 | [docs/specifications/](docs/specifications/) | 完了済みplan/issue由来の確定仕様 |
+| [docs/presentations/](docs/presentations/) | 勉強会などで使うスライド資料（Marp形式）とビルド手順 |
 | [docs/claude-code-skills-survey.md](docs/claude-code-skills-survey.md) | Claude Code Skills調査レポート |
 | [docs/development-history/](docs/development-history/) | 開発履歴と知見 |
 | [plugins/ndf-claude/README.md](plugins/ndf-claude/README.md) | Claude Code版NDFプラグイン |

diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="refresh" content="0; url=./presentations/">
+<title>ai-plugins</title>
+</head>
+<body>
+<p>公開しているのはプレゼンテーション資料です。<a href="./presentations/">プレゼンテーション資料</a>へ移動します。</p>
+<p>リポジトリ: <a href="https://github.com/devbasex/ai-plugins">devbasex/ai-plugins</a></p>
+</body>
+</html>
diff --git a/docs/presentations/2026-08-06-ai-plugins-intro.html b/docs/presentations/2026-08-06-ai-plugins-intro.html
diff --git a/docs/presentations/2026-08-06-ai-plugins-intro.md b/docs/presentations/2026-08-06-ai-plugins-intro.md
diff --git a/docs/presentations/2026-08-06-ai-plugins-intro.pdf b/docs/presentations/2026-08-06-ai-plugins-intro.pdf
diff --git a/docs/presentations/README.md b/docs/presentations/README.md
@@ -0,0 +1,108 @@
+# プレゼンテーション資料
+
+社内勉強会などで使うスライド資料を Marp 形式で管理します。
+
+公開先: **https://devbasex.github.io/ai-plugins/presentations/**
+
+`main` にマージすると GitHub Pages が更新されます。Pages は `main` ブランチの `docs/` を配信するよう設定されています。Jekyll は無効（`docs/.nojekyll`）で、ファイルはそのまま配信されます。サイトのルート（`docs/index.html`）は資料一覧へ転送します。
+
+## 資料一覧
+
+| ファイル | 内容 | 想定時間 |
+|---|---|---|
+| [2026-08-06-ai-plugins-intro.md](2026-08-06-ai-plugins-intro.md) | ai-plugins / NDF v4.20.1 の個別機能紹介。各スキルに何が書いてあり、何を重視しているかを扱う | 15分 / 15枚 |
+
+書き出し済みの成果物も同じディレクトリに置いています。**Markdown を編集したら `build.sh` で両方を再生成してコミットしてください。**
+
+| 成果物 | 用途 | 特徴 |
+|---|---|---|
+| [2026-08-06-ai-plugins-intro.pdf](2026-08-06-ai-plugins-intro.pdf) | 配布・共有ドライブへの掲載 | しおり付き。どこでも開ける。台本は出力されない |
+| [2026-08-06-ai-plugins-intro.html](2026-08-06-ai-plugins-intro.html) | 発表本番 | 単一ファイル。**プレゼンタービューで台本が読める** |
+
+HTML は画像を data URI として埋め込み、絵文字も文字に戻してあるため、このファイル1つで完結します。外部への通信は発生しません。ブラウザで開いたときの操作は以下のとおりです。
+
+| キー | 動作 |
+|---|---|
+| `→` / `←` / スペース | スライド送り・戻し |
+| `f` | フルスクリーン |
+| `p` | プレゼンタービュー（次スライド・台本・タイマー）を別ウィンドウで開く |
+| `o` | 一覧表示 |
+
+各スライドの HTML コメントに発表台本と時間配分を書いており、プレゼンタービューに表示されます。
+
+## ディレクトリ構成
+
+```
+docs/presentations/
+├── README.md
+├── index.html                       # 公開ページの入口（資料一覧）
+├── 2026-08-06-ai-plugins-intro.md   # スライド本体（Marp Markdown）
+├── 2026-08-06-ai-plugins-intro.pdf  # 配布用 PDF（build.sh が生成）
+├── 2026-08-06-ai-plugins-intro.html # 発表用の単一ファイル HTML（build.sh が生成）
+├── build.sh                         # PDF と HTML を書き出す
+├── diagrams/                        # 図版のソース（Mermaid）
+│   ├── overview.mmd
+│   ├── pr-flow.mmd
+│   └── cross-review.mmd
+└── images/                          # diagrams/ から生成した PNG
+    ├── overview.png
+    ├── pr-flow.png
+    └── cross-review.png
+```
+
+図版は Mermaid で書き、PNG に変換したものをスライドから参照します。Marp は Mermaid を直接描画しないため、`.mmd` を編集したら PNG を再生成してください。
+
+## ビルド
+
+### スライドを表示する
+
+VS Code の [Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode) 拡張を入れると、Markdown をプレビューするだけでスライドとして表示されます。
+
+### PDF / HTML に書き出す
+
+```bash
+bash docs/presentations/build.sh
+```
+
+PDF と、単一ファイル化した HTML の両方を書き出します。
+
+`build.sh` が単一ファイル化まで行うのは、Marp の HTML 出力が `images/` を相対パスで参照し、絵文字を CDN 上の SVG に置き換えるためです。そのまま配ると画像が表示されず、オフラインでは絵文字も欠けます。`build.sh` は画像を data URI として埋め込み、絵文字を文字へ戻したうえで、外部アセット参照が残っていないことを検証します。
+
+Chromium が必要です。見つからない場合は取得してからもう一度実行してください。
+
+```bash
+npx playwright@1.49 install chromium
+```
+
+台本も配る場合は、`--pdf-notes` を付けると各スライドの HTML コメントが PDF の注釈として埋め込まれます。
+
+```bash
+npx @marp-team/marp-cli@4 --pdf --pdf-notes --allow-local-files 2026-08-06-ai-plugins-intro.md
+```
+
+### 図版を再生成する
+
+```bash
+cd docs/presentations
+
+cat > /tmp/puppeteer.json <<'EOF'
+{"executablePath":"/home/user/.cache/ms-playwright/chromium-1148/chrome-linux/chrome",
+ "args":["--no-sandbox","--disable-dev-shm-usage"]}
+EOF
+
+for d in overview pr-flow cross-review; do
+  npx @mermaid-js/mermaid-cli@11 \
+    -i "diagrams/$d.mmd" -o "images/$d.png" \
+    -p /tmp/puppeteer.json -b transparent -s 3
+done
+```
+
+`executablePath` は自分の環境の Chromium パスに置き換えてください。`-s 3` は 3 倍解像度でのレンダリング指定で、スライドに拡大表示しても文字が潰れないようにするためのものです。
+
+## 新しい資料を追加するとき
+
+- ファイル名は `YYYY-MM-DD-{topic}.md` とし、日本語は含めない
+- 図版は Mermaid で書いて `diagrams/` にソースを残す。PNG だけをコミットしない
+- 発表台本は各スライド末尾の HTML コメントに書く
+- 書き出しは `build.sh` を使う（引数にスライドの Markdown を渡せる）
+- 公開ページに載せる場合は `index.html` の資料一覧にも追加する
diff --git a/docs/presentations/build.sh b/docs/presentations/build.sh
@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+# スライドを PDF と単一ファイル HTML に書き出す。
+# Usage: bash docs/presentations/build.sh [SLIDE.md]
+set -euo pipefail
+
+cd "$(dirname "$0")"
+SRC="${1:-2026-08-06-ai-plugins-intro.md}"
+BASE="${SRC%.md}"
+MARP="npx -y @marp-team/marp-cli@4"
+
+command -v npx >/dev/null 2>&1 || { echo "ERROR: npx が必要です" >&2; exit 1; }
+
+if [ -z "${CHROME_PATH:-}" ]; then
+  for candidate in "$HOME"/.cache/ms-playwright/chromium-*/chrome-linux/chrome \
+                   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome; do
+    [ -x "$candidate" ] && { export CHROME_PATH="$candidate"; break; }
+  done
+fi
+if [ -z "${CHROME_PATH:-}" ]; then
+  echo "ERROR: Chromium が見つかりません。以下で取得して CHROME_PATH を設定してください:" >&2
+  echo "  npx playwright@1.49 install chromium" >&2
+  exit 1
+fi
+
+echo "==> PDF: $BASE.pdf"
+$MARP --pdf --pdf-outlines --allow-local-files -o "$BASE.pdf" "$SRC"
+
+echo "==> HTML: $BASE.html"
+$MARP --html --allow-local-files -o "$BASE.html" "$SRC"
+
+# Marp の HTML 出力は画像を相対パスで参照し、絵文字を CDN の SVG に置き換える。
+# 単体で配布・閲覧できるように、画像を data URI へ埋め込み、絵文字は文字に戻す。
+echo "==> HTML を単一ファイル化"
+python3 - "$BASE.html" <<'PY'
+import base64, mimetypes, pathlib, re, sys
+
+path = pathlib.Path(sys.argv[1])
+html = path.read_text(encoding="utf-8")
+
+def embed(match):
+    src = match.group(1)
+    asset = path.parent / src
+    if not asset.is_file():
+        sys.exit(f"ERROR: 画像が見つかりません: {asset}")
+    mime = mimetypes.guess_type(asset.name)[0] or "application/octet-stream"
+    data = base64.b64encode(asset.read_bytes()).decode("ascii")
+    return match.group(0).replace(src, f"data:{mime};base64,{data}")
+
+html, images = re.subn(r'<img[^>]*src="((?!data:|https?:)[^"]+)"[^>]*>', embed, html)
+html, emojis = re.subn(r'<img[^>]*data-marp-twemoji[^>]*alt="([^"]*)"[^>]*/?>',
+                       lambda m: m.group(1), html)
+html, emojis2 = re.subn(r'<img[^>]*alt="([^"]*)"[^>]*data-marp-twemoji[^>]*/?>',
+                        lambda m: m.group(1), html)
+
+# 本文中のリンク (<a href>) は残ってよい。表示に必要な外部アセットだけを検出する。
+assets = re.findall(r'\bsrc="(https?://[^"]+)"', html)
+assets += re.findall(r'<link[^>]*href="(https?://[^"]+)"', html)
+if assets:
+    sys.exit("ERROR: 外部アセット参照が残っています: " + ", ".join(sorted(set(assets))))
+
+path.write_text(html, encoding="utf-8")
+print(f"    画像 {images} 件を埋め込み、絵文字 {emojis + emojis2} 件を文字に戻しました")
+PY
+
+echo "完了: $BASE.pdf / $BASE.html"
diff --git a/docs/presentations/diagrams/cross-review.mmd b/docs/presentations/diagrams/cross-review.mmd
@@ -0,0 +1,15 @@
+flowchart LR
+  P(["PR"]) --> CX["codex がレビュー"]
+  P --> GM["gemini がレビュー"]
+  CX --> J{"両方 APPROVE?"}
+  GM --> J
+  J -- "No" --> FIX["/ndf:fix<br/>サブエージェントで修正"]
+  FIX --> P
+  J -- "Yes" --> DONE(["収束・完了"])
+
+  classDef ai fill:#eaf2fb,stroke:#4a90d9,stroke-width:1.5px,color:#12263a
+  classDef gate fill:#fff4e5,stroke:#f5a623,stroke-width:1.5px,color:#12263a
+  classDef done fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px,color:#12263a
+  class CX,GM,FIX ai
+  class J gate
+  class P,DONE done
diff --git a/docs/presentations/diagrams/overview.mmd b/docs/presentations/diagrams/overview.mmd
@@ -0,0 +1,17 @@
+flowchart TB
+  S["plugins/ndf-shared/<br/>skills 49 個<br/><i>ここだけを編集する</i>"]
+
+  S --> C["ndf-claude<br/>skills 29 + agents 8<br/>+ SessionStart/Stop hook"]
+  S --> X["ndf-codex<br/>skills 30 + hook"]
+  S --> K["ndf-kiro<br/>skills 28 + install.sh"]
+
+  C --> C2(["Claude Code"])
+  X --> X2(["Codex CLI"])
+  K --> K2(["Kiro CLI"])
+
+  classDef src fill:#1f3a5f,stroke:#4a90d9,stroke-width:2px,color:#ffffff
+  classDef dist fill:#eaf2fb,stroke:#4a90d9,stroke-width:1.5px,color:#12263a
+  classDef rt fill:#ffffff,stroke:#7a8a99,stroke-width:1.5px,color:#12263a
+  class S src
+  class C,X,K dist
+  class C2,X2,K2 rt
diff --git a/docs/presentations/diagrams/pr-flow.mmd b/docs/presentations/diagrams/pr-flow.mmd
@@ -0,0 +1,12 @@
+flowchart LR
+  A["/ndf:implementation-plan<br/><b>① 作る前</b><br/>プランを issues/ に置く"]
+  B["/ndf:pr<br/><b>② 出す</b><br/>commit → push → PR"]
+  C["/ndf:review<br/>/ndf:cross-review<br/><b>③ レビューを回す</b><br/>指摘 → 修正 → 再レビュー"]
+  D["/ndf:plan-to-spec<br/><b>④ 残す</b><br/>docs/ の確定仕様へ"]
+
+  A --> B --> C --> D
+
+  classDef step fill:#eaf2fb,stroke:#4a90d9,stroke-width:1.5px,color:#12263a
+  classDef keep fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px,color:#12263a
+  class A,B,C step
+  class D keep
diff --git a/docs/presentations/images/cross-review.png b/docs/presentations/images/cross-review.png
diff --git a/docs/presentations/images/overview.png b/docs/presentations/images/overview.png
diff --git a/docs/presentations/images/pr-flow.png b/docs/presentations/images/pr-flow.png
diff --git a/docs/presentations/index.html b/docs/presentations/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>プレゼンテーション資料 — ai-plugins</title>
+<style>
+  :root { color-scheme: light dark; }
+  body {
+    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
+    max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem; line-height: 1.8;
+    color: #12263a; background: #ffffff;
+  }
+  h1 { font-size: 1.7rem; color: #1f3a5f; border-bottom: 3px solid #4a90d9; padding-bottom: .4rem; }
+  h2 { font-size: 1.15rem; color: #1f3a5f; margin-top: 2.5rem; }
+  .card { border: 1px solid #c3cfd9; border-radius: 8px; padding: 1.2rem 1.4rem; margin: 1rem 0; }
+  .card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
+  .card p { margin: .3rem 0 .9rem; color: #5a6b7a; font-size: .92rem; }
+  a { color: #2b6cb0; }
+  .actions a {
+    display: inline-block; margin-right: .6rem; padding: .45rem 1rem;
+    border: 1px solid #4a90d9; border-radius: 6px; text-decoration: none; font-size: .92rem;
+  }
+  .actions a.primary { background: #1f3a5f; border-color: #1f3a5f; color: #fff; }
+  footer { margin-top: 3rem; font-size: .85rem; color: #7a8a99; }
+  @media (prefers-color-scheme: dark) {
+    body { color: #e6edf3; background: #0d1117; }
+    h1, h2 { color: #9fc4e8; }
+    .card { border-color: #30363d; }
+    .card p, footer { color: #9aa7b4; }
+    a { color: #79b8ff; }
+    .actions a.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
+  }
+</style>
+</head>
+<body>
+
+<h1>プレゼンテーション資料</h1>
+
+<p>社内勉強会などで使うスライド資料です。ソースは
+<a href="https://github.com/devbasex/ai-plugins/tree/main/docs/presentations">devbasex/ai-plugins</a> で管理しています。</p>
+
+<div class="card">
+  <h3>ai-plugins — NDF、実際のところ どう使うのか</h3>
+  <p>2026-08-06 ／ 15分 ・ 15枚 ／ NDF v4.20.1<br>
+  各スキルに何が書いてあり、何を重視しているかを紹介します。</p>
+  <div class="actions">
+    <a class="primary" href="2026-08-06-ai-plugins-intro.html">スライドを開く</a>
+    <a href="2026-08-06-ai-plugins-intro.pdf">PDF</a>
+    <a href="https://github.com/devbasex/ai-plugins/blob/main/docs/presentations/2026-08-06-ai-plugins-intro.md">Markdown</a>
+  </div>
+</div>
+
+<h2>スライドの操作</h2>
+
+<p>ブラウザで開いたあと、<code>→</code> / <code>←</code> でスライドを送り、<code>f</code> でフルスクリーン、
+<code>o</code> で一覧表示。<code>p</code> を押すと発表者用の別ウィンドウが開き、次のスライドと発表台本とタイマーが表示されます。</p>
+
+<footer>
+ai-plugins — Claude Code / Codex CLI / Kiro CLI 向けプラグインマーケットプレイス
+</footer>
+
+</body>
+</html>