1仕組みと動作原理
成果物の定義が最優先：納品するものは MP4 ではなく「動作するデック」であり、デックを hyperframes render に渡すことは明確に禁止されています。デックは複数のトップレベル scene から合成されており master root が存在しないため、render は最初の合成のみを解析し、無音のまま極めて短い動画に切り捨ててしまいます。
skills/slideshow/SKILL.md
**Do not `hyperframes render` a slideshow into a single MP4.**
ここで行っていること：レンダリング時に最も発生しやすいサイレントエラーをレッドラインとして規定し（例：40秒のデックが6秒しか出力されない）、リニアエクスポートを「保留（deferred）」と宣言します。それまでは、サポートされる出力は present による動的デックとページごとの snapshot のみとなります。
実装メカニズムは「通常の合成 ＋ 宣言的 JSON アイランド」：合成自体は引き続き HF の scenes/clips/GSAP であり、追加される要素は application/hyperframes-slideshow+json です。プレイヤーの SlideshowController がこれを読み込み、連続したタイムラインを離散的にナビゲーション可能なデックへと変換します。
skills/slideshow/SKILL.md
A HyperFrames slideshow is a normal HyperFrames composition — scenes, clips, GSAP timelines — with one extra ingredient: a **JSON island**
ここで行っていること：離散ナビゲーション機能を独自のナビゲーションスクリプトに頼るのではなく、データ（スライド順、ノート、フラグメントのタイムスタンプ、ホットスポット、分岐シーケンス）へと集約し、アイランドを唯一の真実のソースとして定めます。
アイランドは実在するブロックである必要があり、配置は自由ですが body の前方にある必要があります：present は合成 HTML を静的に解析するため、マニフェストを他の script タグの後ろに隠してランタイムコードで生成した場合、present は読み取ることができません。
skills/slideshow/SKILL.md
The `present` command reads the composition HTML statically and expects the real `application/hyperframes-slideshow+json` island to already be present.
ここで行っていること：一見スマートに見えるものの present を無効化してしまう「アイランドの動的注入」を排除し、sceneId と data-composition-id を正確に一致させることを義務付けます（lint は後者に基づいて解析します）。
フラグメント（fragments）は**絶対合成時間**における公開の一時停止ポイントであり、ナビゲーションは再生ではなく確定的なシークによって行われます：フラグメントを含むページに入ると即座に fragments[0] までシークして停止し、Next で順次次の停止ポイントまでシークします。
skills/slideshow/SKILL.md
Navigation is seek-driven, not play-driven.
ここで行っていること：「ページめくり」を再生セマンティクスからアドレス指定セマンティクスへと変更し、前後の行き来による不具合を防ぎます。同時に、フラグメントのないページには slide.end ではなくページ内の静止フレーム（通常は中間点）で停止するよう規定します。
分岐は実在するシーンですが、メインラインには記載されません：ホットスポットをクリックすると {sequenceId, slideIndex:0} がスタックにプッシュされて分岐のトップページに入り、back でスタックからポップして親ページに戻り、backToMain でスタックをクリアします。パンくずリストとカウンターはシーケンスのスコープに従ってレンダリングされます。
skills/slideshow/SKILL.md
Clicking a hotspot pushes `{sequenceId, slideIndex: 0}` onto the nav stack and enters the branch's first slide.
ここで行っていること：明示的なナビゲーションスタックを使用して「Q&A スタイルのジャンプ」を実現し、分岐の sceneId をメインラインの slides に記述することを禁止します（lint で重複と判定されます）。
執筆規律は提案ではなく厳格な制約です（完全な文のタイトル、1ページ1アイデア、最も強烈なポイントを最初に提示、市場規模の算出はボトムアップ必須、フォントサイズの下限、作業前にライブカタログを検索して既存の構成要素を探す）。これには理由も示されており、違反したページはレビュー時に直接差し替えられます。
skills/slideshow/SKILL.md
**Headline is a complete-sentence claim, not a label.**
ここで行っていること：「投資家へのプレゼンのように」という要求を判定可能なルール（72〜96px のタイトル、48px の本文、判読必須のテキストは 40px 以上）へと落とし込み、カタログ検索にはプロジェクトのセットアップもインストールも不要であることを強調します。
既存ページを移植する際は、メカニズム層に至るまでの忠実性が求められます：ネイティブの media 要素を唯一の真実のソースとし、メディアイベントと media.currentTime から視覚状態を導出し、フォントトークンは具体的なフォントスタックへと解決し、スクリーンショット系コンテンツは cover ではなく元の比率で contain する必要があります。
skills/slideshow/SKILL.md
Treat native `<video>` / `<audio>` elements as the source of truth for any custom media chrome, canvas visualizer, waveform, beat grid, or playhead.
ここで行っていること：「インタラクション詳細の完全な再現」を契約事項とし（カスタムプレイヤー、ビジュアライゼーション、スクロール連動のカメラワークもすべて移植）、共通の振る舞いは各デックのプライベートスクリプトではなくプレイヤー/コントローラーに配置することを明確にします。
プレゼンターモードは共有コンポーネントが管理します：Present ボタン/P キー、新しい audience タブのオープン、2つのタブ間を BroadcastChannel で同期。ノートは発表者ビュー内で編集され、localStorage に保存されます（合成ファイルを変更することなくマニフェストを上書きします）。
skills/slideshow/SKILL.md
**Presenter mode:** use the built-in Present icon button in the slideshow nav capsule, or press P.
ここで行っていること：独自の Present ボタン、ミュートボタン、ノート用スクリプトの作成を明確に禁止し（共有コンポーネントが位置、アイコン、スタイル、audience モード時の非表示を管轄）、Meet/Zoom での共有方法を実行可能なアドバイスとして提示します（画面全体ではなく、audience タブを共有する）。
メディアのクリーンアップとミュートはコントローラーの責務であり、クロスレルムの考慮点があります：ページやシーケンスの切り替え時にはコントローラーが stopMedia を呼び出します。同一ページ内のフラグメントナビゲーションではメディアをクリアしません。iframe 内のメディアの判定には親ページの instanceof を使用できません（実際のブラウザでは false を返します）。
skills/slideshow/SKILL.md
The slideshow controller owns slide-exit media cleanup.
ここで行っていること：「一時停止/ミュート」の責任境界を固定して各デックが独自にクリーンアップスクリプトを書く事態を防ぎ、この種の修正は単一レルムのユニットテストではなく、実際のブラウザで検証する必要があることを強調します。
スタンドアロンハーネス（standalone harness）は暫定対応であり正規の手段ではありません：エンジン管理パス（preview --slideshow / studio present mode）が実装されるまでは、素のプレイヤーで開くデモには3つの回避策が必要です（シーク可能な root タイムラインの公開、アイランドの wrapper へのコピー、wrapper による音声の自己保持）。
skills/slideshow/references/standalone-harness.md
These patterns are a **temporary workaround** for standalone demos.
ここで行っていること：落とし穴リスト（アイランド未コピー → ナビゲーションバーが描画されない、wrapper の SFX を iframe に配置 → 無音、セルフクロックなし → 初期表示で誤ったページに飛ぶ、Three.js の遮蔽 → 3D が非表示）を備えた実装リファレンスを提供しつつ、「エンジン側のパスが完成すれば大部分は不要になる」ことを重ねて明記します。
2コア機能
01JSON アイランドのオーサリング：1つの application/hyperframes-slideshow+json ブロックでメインラインの slides、分岐の slideSequences、各ページの notes / fragments / hotspots を宣言（TTS の3フィールドは予約領域）
02フラグメント表示：1ページ内の複数の表示停止ポイントを絶対時間配列として記述し、ナビゲーションは再生することなく各ポイントへシークして停止
03分岐ナビゲーション：ホットスポット（パーセンテージ指定の領域、または全画面ボタンへの縮退）によって分岐シーケンスを開始し、back / backToMain、パンくずリスト、シーケンススコープのカウンターをサポート
04プレゼンターモード：Present ボタン / P キーで audience タブを開き、発表者ビューには現在の縮小版、次のスライドのプレビュー、ノート、タイマーを表示。両ページは BroadcastChannel で同期され、ノート編集内容は localStorage に保存
05プレゼンテーションと納品：present によるローカルサーバー起動（package.json の dev スクリプト例を含む）、Meet/Zoom 共有ガイドライン、ページ切り替え時の自動メディアクリーンアップ、iframe およびトップレベル音声を上書きするグローバルミュートオプション
06元ページの移植：元サイトのビジュアル、モーション、インタラクション、メディアの挙動を維持し、スクロール連動のカメラワークをスライドナビゲーションに再マッピング。スクリーンショット等の証拠コンテンツは元のアスペクト比を維持して contain
07構造検証契約：lint により sceneId の解決、ホットスポットの target の存在、ページ範囲内に収まるフラグメント、メインライン時間の非重複をチェック。check でさらにランタイム検証を実行
08スタンドアロンハーネス（暫定）：親ラッパーによるアイランドの複製、root タイムラインおよび可視性コントローラーの合成からの公開、postTimeline メッセージブリッジ、Three.js の独立した rAF ループ、オーディオアンロックと自前 SFX の保持
09確認ゲート：スライドショーが明確に要求されていない場合は、作成前に一旦停止して「Do you want this as a HyperFrames slideshow?」と確認（納品物の種類の誤りは好みの問題ではなく品質上の不合格となるため）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | 官方 hyperframes CLI：present（起 deck 服务与讲者/观众同步）、lint、check、preview、snapshot（逐页静帧） |
| package | 播放器构建产物（本仓 packages/player/dist 的 hyperframes-player / hyperframes-slideshow 全局包；改播放器行为后需在 packages/player 跑 bun run build） |
| network | CDN 资源（harness 示例）：Three.js 模块从 jsdelivr 导入，供独立 demo 的 3D 背景层使用（产物期由浏览器拉取，按范式不判级） |
| package | 浏览器平台 API（非外部服务）：BroadcastChannel 讲者/观众同步、localStorage 备注持久化、postMessage 与 iframe 播放器通信、WebAudio/Audio 自持音效 |
| package | 兄弟 skill 关联：deck 内容来自 Figma 时必须先跑 /figma（资产导出/品牌令牌/分镜重建），基础合成契约在 /hyperframes-core，词级字幕规则在 /embedded-captions |
| cli | 官方 registry 搜索/安装（写页面前先 catalog 查现成视觉积木，需要时 add 进 deck） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: 本スキルディレクトリ内には**独自のスクリプトは含まれていません**（SKILL.md + references/standalone-harness.md の2ファイルのみ）；ha
- 网络端点: 外部ネットワークアクセスの宣言: 成果物の実行時（規約上は評価対象外、記録のみ）：ハーネスの Three.js サンプルが cdn.jsdelivr.net から [email protected] をインポートし、ブラウザによって取得
- 本地工作目录: ファイルの読み書きと成果物の出力: プロジェクトファイル（エージェントが作成）：合成 HTML（アイランドとシーン div を含む）、wrapper/index.html、composition/
監査ノート： 評価対象＝スキル自身のディレクトリ：Markdown 2ファイルのみ、スクリプトなし、ネットワーク呼び出しなし、認証情報読み取りなし、書き込み命令なし。HTTP(S) 全域スキャンでも1箇所しか検出されず、それもハーネス例にある [email protected] の CDN インポートのみです（成果物の実行時にブラウザが取得するため規約上は評価対象外、reason と network_calls に記録済み）。機能の実現方法は「宣言データの作成 ＋ ローカル CLI およびサーバー」です。合成 HTML/JSON アイランドを記述し、npx hyperframes present/lint/check/snapshot を使用してローカルでのサーバー起動と検証を行い、本リポジトリの packages/player/dist にあるプレイヤーパッケージを介して成果物を実行します。これは「ローカル CLI およびローカル読み書きのみ」に該当し、同リポジトリの先行事例である hyperframes-core（青）、talking-head-recut（青）と同等です。オレンジ評価には該当しません：認証情報や環境変数の読み取りは一切なく、ユーザーの素材を外部の生成バックエンドに送信することもありません（TTS や画像生成の呼び出しはなく、アイランド内の TTS フィールドは明示的に予約領域となっています）。レッド評価には該当しません：サンドボックスの無効化、TLS ダウングレード、自動化防止の回避、任意のコード実行面はありません（サンプルコードは人間が採用するためのリファレンス実装であり、自動実行スクリプトではありません）。
5二重目の独立検証
- [ok] 网络面是否真如声明（蓝档判定的关键反例检查） — 全目录仅 1 处 http(s) 命中：standalone-harness.md 第 895 行的 [email protected] jsdelivr 导入（示例代码块内）；无 fetch(、无 process.env、无 child_process、无凭证关键词。SKILL.md 侧只有本地命令（present/lint/check/preview/snapshot）与浏览器 API（BroadcastChannel/localStorage/postMessage），均为本地或浏览器内行为。
- [ok] 「禁止 render」的声明是否与机理自洽（不是随口警告） — SKILL.md 给出原因：deck 由多个顶层 scene 合成（每页一个 data-composition-id）且**没有 master-root 合成**，所以 render 只解析第一个合成，产出静默截断的 MP4（举例 6s/40s）；并说明线性导出（仅主线、排除分支）目前是 deferred，故支持输出为 present 活 deck 与逐页 snapshot。声明与结构描述一致。
- [ok] island 的「静态可读」要求与 present 行为是否一致 — 文档明确 present 静态解析合成 HTML、期望真实的 application/hyperframes-slideshow+json 已存在，并禁止用另一个 application/json 块 + 运行时代码生成 island。这与「JSON 岛是唯一真源、sceneId 必须匹配 data-composition-id」的 lint 契约自洽。
- [ok] harness 内容是否被当成正统做法（避免误判为「本 skill 主张两套实现」） — harness 开头即写 interim framing（临时绕行）与「When that path ships, most of what follows collapses」，SKILL.md 亦写「Do not treat the patterns there as the blessed model」。两处口径一致，属过渡文档而非第二套正统。
- [ok] 是否存在夸大（把引擎/播放器能力算作本 skill 能力） — 文档反复把导航、presenter mode、媒体清理、静音归给共享播放器组件（<hyperframes-slideshow> / SlideshowController / hyperframes-player.stopMedia），本 skill 只声明 island 数据契约与写作/移植纪律，未见据他人之功。
6結論
最適な用途： プレゼン可能なデックを作成したい方に最適：資金調達や営業ピッチ、社内レビュー、講義や技術共有などで、個別スライド、段階的な表示、Q&A スタイルの分岐（ホットスポットで補足ページへ遷移し復帰）、発表者ノート、視聴者画面とのデュアルスクリーン同期が必要な場合。また、既存の Web ページ（カスタムプレイヤー、ビジュアライゼーション、スクロールアニメーションを含む）を高忠実度のインタラクティブデックへ変換したい場合や、ローカルで present を起動して他者へ納品・閲覧させたい場合にも適しています。
不向きな用途： 以下には適していません：① MP4/動画ファイルでの納品が必要なケース（本スキルは明確にサポート外であり、リニアエクスポートは保留中です。動画が必要な場合は /general-video または該当のワークフローを利用してください）；② ナレーション音声を必要とするプレゼンテーション（TTS は未配線です。/hyperframes-audio などの音声ワークフローを利用してください）；③ 1枚の静止画やポスターのみを求めている場合（snapshot や他のスキルの方が直接的です）；④ Studio エディタでの即座に使える GUI 操作フローを期待している場合（本スキルでは最終納品として Studio ではなく present の利用を推奨しています）；⑤ フロントエンド成果物の保守を望まない場合（デックは動的な Web ページであり、長期的な利用可能性はプレイヤーパッケージやブラウザの挙動に依存します）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload slideshow.tar.gz
sha256:
Option B · Copy Guide for Agent034ea590dd179243…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.