スライドショー

最初に、このスキルを最新の状態に保ってください——実行前にユーザーに確認してください: npx hyperframes skills update slideshow。すべてが最新の場合は高速なno-opです。それ以外の場合は、このスキルと、それが依存するコアドメインスキルを、それらに依存する前に更新します。

figma ソース: デッキのコンテンツやストーリーボードがfigma.comのURLから来ている場合、先に/figmaを実行してください——アセットエクスポート、ブランドトークン、およびソースがシーンフレームのストリップである場合のストーリーボード再構築——そしてその出力からビルドします。生のMCPツールを介して直接Figmaを操作しないでください。それはSVGサニタイゼーション、.media/manifest.jsonlの来歴、およびブランドトークンのvar()バインディングをスキップするため、後でブランドが変更された場合、完全な再インポートなしでは伝播できなくなります。

スライドショーオーサリング契約

HyperFramesスライドショーは、通常のHyperFramesコンポジション（シーン、クリップ、GSAPタイムライン）に、1つの追加要素があります。それは、どのシーンがスライドであり、それらがどのように接続されるかを宣言するJSONアイランドです。プレイヤーのSlideshowControllerがこのアイランドを読み取り、連続したGSAPタイムラインを、離散的でナビゲーション可能なデッキに変換します。

最初に/hyperframes-coreを読んでください。ベースとなるコンポジション契約（クリップ、トラック、data-*属性、決定性ルール）について説明されています。このスキルでは、新しいものだけをカバーします：アイランドスキーマ、スライド作成ルール、フラグメント、分岐、バリデーション、およびラッピングコンポーネントです。

出力——リニアなMP4ではなく、ナビゲーション可能なデッキ

スライドショーの出力は実行中のデッキです：hyperframes present <project-dir>（またはStudioのプレゼントモード）で提供します。プレイヤーのSlideshowControllerがアイランドを読み取り、ナビゲーション、フラグメント、分岐、プレゼンターモードを駆動します。プレゼンテーションとハンドオフのセクションを参照してください。

スライドショーをhyperframes renderで単一のMP4にレンダリングしないでください。 デッキは、いくつかのトップレベルのシーンコンポジション（スライドごとに1つのdata-composition-id）として作成され、それらをラップするマスタールートコンポジションはありません。そのため、renderは最初のコンポジションのみを解決し、静かに切り詰められたMP4（例：40秒のデッキのうち6秒）を出力します。リニアなメインラインエクスポート（メインスライドのみ、ブランチシーケンスは除外）は延期されています——出荷されるまでは、サポートされる出力はライブのpresentデッキとスライドごとのsnapshot静止画です。ユーザーが今日リニアなMP4を必要とする場合は、この制限を表面化させ、デッキにrenderを向けないでください。

意図の確認

ユーザーが明示的にスライドショー、スライド表示、またはHyperFramesスライドショーを要求した場合は、このスキルを進めてください。リクエストが/hyperframesを通じて届いた場合、インテントレイヤーのトリアージがこの確認を所有しています——ここにルーティングされたということは既に確認済みであることを意味するため、再度尋ねないでください。レイヤーの実行形状に関する質問は該当しません（成果物はレンダリングされたビデオではなくデッキです）。BRIEF.mdが存在する場合、それは確認された意図を伝えています——それを読んでください。

「プレゼンテーション」、「ピッチデッキ」、「デッキ」、「インタラクティブデッキ」、または「このページを変換」などの隣接するリクエストからスキルがトリガーされた場合は、オーサリングの前に一時停止し、確認を求める前に選択肢を提示してください。HyperFramesスライドショーが、離散的なスライド、組み込みのナビゲーションとプレゼンターモード、編集可能なスピーカーノート、共有メディア処理、およびハンドオフ前のバリデーションを備えた実行可能なデッキを意味することを簡単に説明してください。ソースページの変換については、ページの移動をスライド間のトランジションに変換しながら、元のページのビジュアルデザイン、インタラクション、モーション、メディア動作を維持することを目標とすることも言及してください。

その後、短い確認質問をしてください：

これをHyperFramesスライドショーにしますか？

環境が提供する場合ははい/いいえの選択UIを使用し、それ以外の場合はプレーンテキストで質問してください。

ユーザーが「はい」と言うまでスライドショーを実装しないでください。「いいえ」と言った場合は、このスキルの使用を停止し、/hyperframesを読んでインテントレイヤーに再ルーティングさせてください。この確認はルーティングの決定であり、好みのゲートではありません——../hyperframes/references/brief-contract.md § 1に従い、自律モードでも存続します（「驚かせて」でもスキップされません）：間違った成果物タイプを構築することは、創造的な判断ではなく、品質の失敗です。

---

2つの構成要素

1. シーン——通常の方法で宣言

すべてのスライドはシーンによって支えられています。data-composition-id、data-start、data-duration、data-labelを使用してシーンを宣言します：

<div
  data-composition-id="problem"
  data-start="0"
  data-duration="8"
  data-label="The problem"
  data-width="1920"
  data-height="1080"
>
  <!-- クリップはここに配置 -->
</div>

ブランチスライド（ホットスポット経由でのみ到達可能で、メインラインから除外される）もまったく同じ方法で宣言されます——アイランドのslideSequencesエントリにのみ表示され、メインのslides配列には表示されません。

2. JSONアイランド——コンポジションごとに1つのスクリプトブロック

コンポジションHTMLに、<script type="application/hyperframes-slideshow+json">ブロックを1つだけ追加します。これにより、すべてのスライドショーメタデータが保持されます：

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [...],
    "slideSequences": [...]
  }
</script>

アイランドは、スライドの順序、ノート、フラグメントのホールドポイント、ホットスポット、ブランチシーケンスに関する単一の真実の情報源です。シーンのdivの前に、<body>の上部近くに配置して、見つけやすくしてください。

スライドショーマニフェストを、代替の<script type="application/json">ブロックと、アイランドを作成するランタイムコードの背後に隠さないでください。presentコマンドはコンポジションHTMLを静的に読み取り、実際のapplication/hyperframes-slideshow+jsonアイランドが既に存在することを期待します。

---

スキーマ

SlideshowManifest（トップレベルのアイランドオブジェクト）

{
  "slides": [
    /* SlideRef[] — メインライン、順序通り */
  ],
  "slideSequences": [
    /* SlideSequence[] — オフラインのブランチシーケンス */
  ]
}

SlideRef

{
  "sceneId": "problem",
  "notes": "痛みから始め、会社からは始めない。",
  "fragments": [3.5, 5.2, 7.0],
  "hotspots": [
    /* SlideHotspot[] */
  ],

  "ttsScript": null,
  "ttsAudioUrl": null,
  "ttsDurationMs": null
}

フィールド	必須	備考
sceneId	はい	シーンのdata-composition-idと完全に一致する必要があります（または明示的なstartTime/endTimeを提供）。リントルールはdata-composition-idでシーンを解決します。
notes	いいえ	発表者のみのテキスト。聴衆には決して表示されません。
fragments	いいえ	スライドの[start, end]範囲内の時間（秒）の配列——以下のフラグメントを参照。
hotspots	いいえ	ブランチをトリガーするインタラクティブなオーバーレイ——以下の分岐を参照。
startTime	いいえ	オプション。一致したシーンの時間境界をオーバーライドします。デフォルトはシーンの開始/終了。
endTime	いいえ	オプション。一致したシーンの時間境界をオーバーライドします。デフォルトはシーンの開始/終了。
ttsScript, ttsAudioUrl, ttsDurationMs	いいえ	予約済み。 スキーマフィールドは存在しますが、TTS再生はまだ配線されていません。将来のビルドのために事前に入力する場合を除き、省略してください。

SlideHotspot

{
  "id": "h1",
  "label": "これはどのように計算しましたか？",
  "target": "market-deep-dive",
  "region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}

フィールド	必須	備考
id	はい	スライド内で一意。
label	はい	聴衆に表示されるツールチップ/ボタンテキスト。
target	はい	slideSequences内のSlideSequence.idと一致する必要があります。
region	いいえ	スライドのパーセンテージで表したバウンディングボックス：{x, y, w, h}、範囲は0–100。省略すると、代わりにホットスポットはフルスライドのラベル付きボタンとしてレンダリングされます。

SlideSequence

{
  "id": "market-deep-dive",
  "label": "市場規模測定方法論",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

シーケンス内のslidesは、メインラインと同じSlideRef形状を使用します。フラグメントとネストされたホットスポットは許可されています。

---

スライド作成ルール

これらは提案ではなく、厳格な制約です。これらに違反するスライドは、レビュアーが確認した時点で完全に置き換えられます。

• 見出しはラベルではなく、完全な文章の主張であること。「スケジューリングの問題」ではなく、「中小企業は手動スケジューリングに週14時間を費やしている」と書きましょう。視覚を無視しても、文は単独で成立する必要があります。
• スライドあたり1つのアイデアと1つのビジュアル。 2つ目の箇条書きクラスターや2つ目のチャートを追加したくなったら、スライドを分割してください。
• 結論から始める。 最も強いポイントを最初に——スライド内でもデッキの順序でも。投資家は左から右、上から下に読み、そして止まります。
• ボトムアップの市場規模推定のみ。 計算を示さずに「$500億TAM」と決して書かないでください。ユニットエコノミクスから構築してください：アカウント数×ACV、またはトランザクション数×テイクレート。
• フォント最小30pt相当。 1920×1080では、見出しは72–96px、本文は48pxです。聴衆が読まなければならないテキストは、40pxを下回らないでください。
• 名前付きビジュアルを手動で構築する前に、ライブカタログを検索すること。 スライドに必要なすべてのルック、エフェクト、チャート、処理、トランジションについて——「CRTスキャンライン」、「グリッチ」、「棒グラフレース」、「シャマースイープ」、「ターミナルウィンドウ」——スライドのクリップを作成する前に、npx hyperframes catalog --query "<ビジュアルを平易な英語で>" --jsonを実行し、上位の結果を読んでください。この検索には何もインストールする必要はありません：プロジェクト、事前のadd、アカウントは不要です。ホストされているレジストリ全体（約400のブロックとコンポーネント）を任意のディレクトリからランク付けします。npx hyperframes add <name>は、ブロックのソースをデッキに追加し、その場でカスタマイズできます。これは、ソースページを移植する場合に特に強く適用されます。実際のブロックは、以下の移植ルールで禁止されている簡略化された近似よりも優れています。

ソースページの移植

既存のページをスライドショーに変換する場合、ソースの忠実度は契約の一部です。ユーザーが明示的に再設計を要求しない限り、ソース固有のウィジェットを簡略化された近似に置き換えないでください。

• 元のページのビジュアルデザイン、モーション言語、インタラクティブな動作、メディア動作、およびプレゼンテーションのアフォーダンスを、実用的な範囲で可能な限り忠実に保持してください。スライドショーシステムがプレゼンターモードをサポートしている場合は、デッキ固有の実装ではなく、共有の編集可能ノート動作を使用してスピーカーノートを含めてください。
• ソースのDOM/CSS/JSから機械的なビジュアルを、実用的な範囲で可能な限り正確に移植してください：カスタムプレーヤー、キャンバスビジュアライザー、タイムライン、プレイヘッド、ステム、拡大する円、ホバーステート、その他のインタラクティブな詳細は、変換後も存続する必要があります。
• ネイティブの<video>/<audio>要素は、カスタムメディアクローム、キャンバスビジュアライザー、波形、ビートグリッド、プレイヘッドの真実の情報源として扱ってください。ソースのメディアイベント（play、pause、timeupdate、seeking、seeked、ended、ratechange、volumechange）を配線し、media.currentTimeからビジュアル状態を導出してください。実際の再生からドリフトする可能性のある別個のタイマーを実行しないでください。
• srcを持つコピーされたすべての<video>または<audio>には、リントの前にHyperFramesタイミング属性（data-startおよびdata-duration）が必要です。また、ネイティブオーディオを保持する必要がある場合はdata-has-audio="true"も必要です。スライド固有のメディアにはシーンの時間範囲を使用してください。複数のフォーカスされたスライドから再生される可能性のあるユーザー制御の証拠ビデオには、デッキ全体の範囲を使用してください。メディアにpreload="none"を残さないでください。metadataまたはautoを使用してください。
• バリデーションの前にソースフォントトークンを解決してください。カスタムソースフォントを保持する場合は、ローカル/キャプチャされたフォントファイルに@font-faceルールを追加してください。システムフォールバックを使用する場合は、font-family: var(--f-body)などのトークン化された宣言を、system-ui, sans-serifやui-monospace, monospaceなどの具体的なレンダリングセーフなスタックに置き換えてください。var(...)をフォントファミリーの値として残さないでください。
• ソースで非典型的なページ移動を監査してください。特に、スクロール、ホイール、タッチ、ハッシュステート、リサイズ、またはrequestAnimationFrameループによって駆動される動作に注意してください。変換/スケーリングされた「ワールド」レイヤー、パララックス、ピン留めされたパネル、水平スクローラー、スクロールでスクラブされるタイムライン、セクションスナップ、およびズーム・トゥ・エレメントカメラを備えた固定ビューポートは、ソース動作として扱ってください。スクロールはしばしばソースのトランジショントリガーであるため、その進行停止、イージング、カメラ/フォーカス状態を抽出し、そのモーションをタイムラインポジション、フラグメント、または再利用可能なプレーヤー/ハーネスフックを介してスライドショーナビゲーションに再ホストすることで、トランジションを保持してください。スライドのホールドポイントにジャンプするスタンドアロンラッパーでも、明示的なナビゲーション-カメラトランジションフックが必要です。スライドごとのカメラ変換を計算するだけでは不十分です。スライド内でリテラルなページスクロールダウントランジションをシミュレートしないでください。ビューアーは、Webページがスクロールされるのを見るのではなく、ある焦点から別の焦点へのカメラの移動/ズームを感じるべきです。各スライド間のカメラ移動は連続的に保ってください。x/y方向を逆転させたり、アンズームを行ったりする中間ルートストップを避けてください。