present

Present — ナレーション付きインタラクティブプレゼンテーション

記事／スライドの切り替えモード、ElevenLabs のナレーション、オプションの GPT Image 2 によるイラスト、スクロール表示アニメーションを備えた、自己完結型の HTML プレゼンテーションを生成します。

このスキルが生成するもの

単一の index.html ファイル（音声とオプションの画像アセットを含む）を生成します。次の方法で利用できます。

• ブラウザーでローカルに開く
• Vercel、Netlify、または任意の静的ホストにデプロイする
• フォルダーとして共有する

出力には、閲覧者が切り替えられる 2 つのモードがあります。

1. 記事モード — タフテ風のタイポグラフィを使った、スクロール可能な長文レポート
2. スライドモード — キーボード／クリックで操作でき、ナレーション付き音声を再生できるプレゼンテーション

クイックスタート

/present "AI adoption research for Arseny" --slides 12 --voice daniel --images risograph

または、ファイルを指定します。

/present path/to/research.md --detail detailed --voice alice

パラメーター

パラメーター	値	デフォルト	説明
--slides	5-20	12	スライド数
--detail	executive、standard、detailed	standard	コンテンツの詳細度
--voice	ElevenLabs の音声名	daniel	ナレーターの音声
--images	スタイル名または none	none	画像生成スタイル
--image-prompt	任意の文字列	auto	画像プロンプトのプレフィックスを上書き
--output	パス	./presentation/	出力ディレクトリ
--deploy	Vercel プロジェクトまたは none	none	自動デプロイ先
--title	文字列	auto	プレゼンテーションのタイトル
--no-audio	フラグ	false	音声生成をスキップ

詳細度レベル

• executive（5-7 枚のスライド）：主要な調査結果のみ。統計スライド 1 枚、推奨事項のスライド 1 枚、出典。要点をすばやく把握したい多忙な関係者に最適です。
• standard（10-14 枚のスライド）：全体を通したストーリー構成です。課題、根拠、分析、推奨事項、出典を含みます。ほとんどのプレゼンテーションでのデフォルトです。
• detailed（15-20 枚のスライド）：詳細な解説です。方法論、複数の根拠セクション、ケーススタディ、実施手順を含む詳細な推奨事項を含みます。

音声オプション

ElevenLabs API を使用します。キーは ~/claude-skills/elevenlabs-tts/.env 内で ELEVENLABS_API_KEY として利用できる必要があります。

プレゼンテーションにおすすめの音声：

• daniel — 安定感のあるアナウンサー、イギリス英語、フォーマル（デフォルト）
• alice — 明瞭な教育者、イギリス英語、プロフェッショナル
• matilda — 知識豊富、アメリカ英語、明るい
• brian — 深みのある響き、アメリカ英語、落ち着いた印象
• george — 温かみのあるストーリーテラー、イギリス英語、成熟した印象

画像スタイル

--images を設定すると、このスキルは GPT Image 2（~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py）を使用して、主要なスライド向けのイラストを生成します。利用可能なスタイル：

• risograph — Gerd Arntz のアイソタイプ風スタイル、落ち着いた色、砂の質感
• editorial — 雑誌写真風スタイル、ドラマチックな照明
• blueprint — 青地に白で描く、技術図面風の美学
• ink — 手描き風の黒インクイラスト
• カスタム：--image-prompt "your style description" を渡して上書きします

画像はまず --draft モードで生成されます（1 枚あたり約 $0.006）。このスキルは、イラストが有効なスライドを選定します（通常、12 枚中 3〜5 枚）。

ワークフロー

ステップ 1：コンテンツ分析

入力コンテンツ（トピックの説明、Markdown ファイル、Vault のノート、会議のトランスクリプト、または調査資料）を読み込み、以下を特定します。

• 中心となる主張またはストーリー
• 主要なデータポイントと統計
• 自然なセクションの区切り
• 出典付きの引用可能な調査結果

ステップ 2：スライドの計画

--detail と --slides に基づいて、スライドの構成案を作成します。各スライドに必要なもの：

Slide N: [Type] — [Title]
Content: [what appears on screen]
Narration: [what the voice says — always more than what's on screen]
Read time: [seconds for an average reader to absorb the visual content]
Image: [yes/no, with prompt if yes]

スライドの種類：title、summary、stat、evidence、comparison、quote、framework、recommendation、case-study、sources

ナレーションの台本は会話調にし、表示内容を超える背景情報を加えます。スライドのテキストをそのまま読み上げるだけにしてはいけません。説明し、話題をつなぎ、内容を掘り下げます。各スライドのナレーションは 15〜30 秒を目安にします。

ステップ 3：音声を生成する

各スライドのナレーションを ElevenLabs で生成します。

python3 ~/.claude/skills/elevenlabs-tts/scripts/elevenlabs_tts.py \
  --voice <voice_name> \
  --text "<narration>" \
  --output <output_dir>/audio/slide-<N>.mp3

または、このスキル内の scripts/generate_audio.py を使って直接 API を利用します。

スライド間の切り替え用に、トランジション音（Rhodes のコード）も生成します。

生成後、ffprobe で長さを取得してスライドのタイミングを計算します。

ステップ 4：画像を生成する（有効な場合）

イラストが効果的なスライドには、GPT Image 2 を使って画像を生成します。

python3 ~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py --draft --size 1536x1024 \
  "<style prefix> <slide-specific prompt>" \
  <output_dir>/images/<name>.png

12 枚のスライドからなる資料では、通常 3〜5 枚の画像を生成します。視覚的なたとえによって要点が強調されるスライドを選びます。統計スライド、コンセプトスライド、タイトルスライドが候補として適しています。すべてのスライドにイラストを付けないでください。

ステップ 5：HTML を作成する

assets/template.html のテンプレートをベースとして使います。テンプレートには次の機能があります。

• タイポグラフィ：EB Garamond（本文）＋ DM Sans（ラベル／数値）
• カラーパレット：:root 内の CSS 変数で設定可能
• 記事モード：Tufte に着想を得たレイアウト。エグゼクティブサマリーボックス、統計カード、2 カラムセクション、データテーブルを含みます
• スライドモード：フェード切り替え、キーボード操作（矢印、スペース）、ドットインジケーターを備えた全画面スライド
• 音声エンジン：再利用可能な <audio> 要素 1 つ、スライドに同期した再生と進行状況バー、スライド間のトランジション音
• コントロールの自動非表示：トップバー（モード切り替え＋音声）はカーソルがビューポート上部 20% に入ると表示されます。下部ナビゲーションは下部 20% に入ると表示されます。Shift+. で常時表示／常時非表示／ゾーンモードを切り替えます。
• スクロール時の表示アニメーション：Intersection Observer ベースのセクションのフェードアップ、段階的に表示する統計カード、カウンターのアニメーション、h2 のライン描画エフェクト
• prefers-reduced-motion：ユーザーが視差効果を抑える設定を選んでいる場合、すべてのアニメーションを無効にします

プレースホルダーのセクションを、実際のスライドと記事の内容に置き換えてテンプレートを埋めます。

ステップ 6：テストする

/real-browser または open <path> を使ってブラウザーで開き、次の点を確認します。

• 記事モードが正しく表示され、画像が読み込まれる
• スライドモード：すべてのスライドを移動でき、テキストがビューポート内に収まる
• 再生ボタンをクリックすると音声が再生される
• 音声がスライドの進行と同期する（各スライドはナレーション＋読了時間が経過するまで待機する）
• スライド間でトランジション音が再生される
• 上部と下部のバーが自動で非表示になる
• スライドモードでキーボード操作（矢印、スペース）が機能する

ステップ 7：デプロイする（依頼された場合）

--deploy が設定されている場合は、出力を対象プロジェクトの public/ フォルダーにコピーしてデプロイします。

cp -r <output_dir>/* <project_path>/public/<slug>/
cd <project_path> && vercel deploy --prod --yes

HTML アーキテクチャ

音声同期モデル

各スライドには 3 つのタイミングプロパティがあります。

• data-audio="slide-name" — 音声ファイルに対応付けます
• data-read-time="N" — ビジュアルコンテンツを読むのに必要な秒数です

音声エンジンは slide_duration = max(audio_duration, read_time) + 2s を計算します。ナレーションの終了後、残りの読了時間に 2 秒のバッファを加えた時間だけ待機し、トランジション音（1.8s）を再生してから次のスライドに進みます。

AI 生成のように見える書式を避ける

次のパターンは AI が生成したように見えるため、避けてください。

• 色付きの左側バー＋太字の見出し＋説明ブロック（調査結果カード）
• 色付きの左罫線がある大きなイタリック体の引用文
• アイコン＋見出し＋説明を並べた均一なカードグリッド
• 指標にグラデーションテキストを使用する

代わりに、次の方法を使います。

• インライン強調を使った自然な文章
• 構造化された項目には定義リスト（<dl>）を使う
• 比較にはテーブルを使う
• 流れるような文章の中に、直接的な記述を織り込む

画像パス

相対パスではなく、デプロイのルートからの絶対パス /slug/images/name.png を使います。URL の末尾にスラッシュがない状態で読み込まれると、相対パスは機能しません。

ファイル

• SKILL.md — このファイル
• scripts/generate_audio.py — ElevenLabs の TTS 一括生成スクリプト
• assets/template.html — CSS／JS をすべて含むベース HTML テンプレート
• references/slide-types.md — スライドタイプの詳細仕様と例