最初に、このスキルを最新の状態に保つため、次のコマンドを尋ねずにバックグラウンドで実行してください:
npx hyperframes skills update slideshow。すべてが最新の場合、高速に動作し何も変更しません。そうでない場合、このスキルと、それが依存するコアドメインスキルを、それらに依存する前に更新します。
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 がアイランドを読み取り、ナビゲーション、フラグメント、分岐、プレゼンターモードを駆動します。以下のプレゼンテーションと引き渡しを参照してください。
スライドショーを単一の MP4 に hyperframes render しないでください。デッキは複数のトップレベルシーンコンポジション（スライドごとに1つの data-composition-id）として作成され、それらをラップするマスタールートコンポジションはありません。そのため、render は最初のコンポジションのみを解決し、静かに切り詰められた MP4（例えば40秒のデッキが6秒になるなど）を出力します。線形のメインライン出力（メインスライドのみ、ブランチシーケンスは除外）は延期されています。これが出荷されるまでは、サポートされる出力はライブの present デッキと、スライドごとの snapshot 静止画です。ユーザーが今日線形 MP4 を必要とする場合は、render をデッキに向けるのではなく、この制限を表面化してください。
意図確認
ユーザーが明示的にスライドショー、スライド表示、または HyperFrames スライドショーを要求した場合は、このスキルを進めてください。リクエストが /hyperframes を通じて到着した場合、インテント層のトリアージがこの確認を担当します。ここにルーティングされたということは、すでに確認済みであることを意味します。そのため、再度尋ねないでください。層の実行形状に関する質問は適用されません（成果物はデッキであり、レンダリングされた動画ではありません）。BRIEF.md が存在する場合、確認済みの意図が含まれています。それを読んでください。
「プレゼンテーション」、「ピッチデッキ」、「デッキ」、「インタラクティブデッキ」、「このページを変換」など、隣接するリクエストからこのスキルがトリガーされた場合は、作成を一時停止し、確認を求める前に選択肢を提示してください。HyperFrames スライドショーが、個別のスライド、ビルドインのナビゲーションとプレゼンターモード、編集可能なスピーカーノート、共有メディア処理、および引き渡し前のバリデーションを備えた実行可能なデッキであることを簡単に説明してください。ソースページ変換の場合は、元のページのビジュアルデザイン、インタラクション、モーション、メディア動作を維持しながら、ページ移動をスライド間の遷移に変換することを目標とすることを述べてください。
その後、短い確認質問をしてください：
これを HyperFrames スライドショーとして作成しますか？
環境が提供する場合は、はい/いいえの選択 UI を使用してください。そうでない場合は、平文で質問してください。
ユーザーが「はい」と言うまでスライドショーを実装しないでください。ユーザーが「いいえ」と言った場合、このスキルの使用を中止し、/hyperframes を読んでインテント層に再ルーティングさせてください。この確認はルーティングの決定であり、好みのゲートではありません。../hyperframes-core/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>
アイランドは、スライドの順序、ノート、フラグメント保持ポイント、ホットスポット、およびブランチシーケンスの単一の信頼できる情報源です。<body> の先頭近く、シーンの div の前に配置すると見つけやすくなります。
スライドショーマニフェストを、代替の <script type="application/json"> ブロックと、アイランドを作成するランタイムコードの背後に隠さないでください。present コマンドはコンポジション HTML を静的に読み取り、実際の application/hyperframes-slideshow+json アイランドがすでに存在することを期待します。
スキーマ
SlideshowManifest（トップレベルのアイランドオブジェクト）
{
"slides": [
/* SlideRef[] — メインライン、順序通り */
],
"slideSequences": [
/* SlideSequence[] — オフラインのブランチシーケンス */
]
}
SlideRef
{
"sceneId": "problem",
"notes": "Lead with the pain, not the company.",
"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": "How did we calculate this?",
"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": "Market sizing methodology",
"slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}
シーケンス内の slides は、メインラインと同じ SlideRef の形状を使用します。フラグメントとネストされたホットスポットは許可されます。
スライド作成ルール
これらは提案ではなく、厳格な制約です。これらに違反するスライドは、レビュアーが見つけた時点で完全に置き換えられます。
- 見出しはラベルではなく、完全な文による主張であること。「スケジューリング問題」ではなく、「SMB は手動スケジューリングに週14時間を費やしている」と書いてください。ビジュアルが無視されても、文はそれだけで成立する必要があります。
- スライドごとに1つのアイデアと1つのビジュアル。 2つ目の箇条書きや2つ目のチャートを追加したくなったら、スライドを分割してください。
- 結論から述べること。 最も強いポイントを最初に持ってきます — スライド上でも、デッキの順序でも。投資家は左から右、上から下に読み、そして読むのをやめます。
- ボトムアップの市場規模測定のみ。 計算を示さずに「$500億 TAM」と書かないでください。ユニットエコノミクスから構築します：アカウント数 × ACV、またはトランザクション数 × テイクレート。
- フォントは最低30pt相当。 1920×1080の場合、見出しは72〜96px、本文は48pxです。観客が読む必要のあるテキストについては、40pxを下回らないでください。
ソースページの移植
既存のページをスライドショーに変換する場合、ソースの忠実性は契約の一部です。ユーザーが明示的に再設計を要求しない限り、ソース固有のウィジェットを単純化された近似値に置き換えないでください。
- 元のページのビジュアルデザイン、モーション言語、インタラクティブな動作、メディア動作、およびプレゼンテーションのアフォーダンスを、実用的な範囲で可能な限り忠実に維持します。スライドショーシステムがプレゼンターモードをサポートしている場合は、デッキ固有の実装ではなく、共有の編集可能ノート動作を使用してスピーカーノートを含めます。
- ソースの 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 ループによって駆動される動作を監査します。固定ビューポートと変換/スケーリングされた「ワールド」レイヤー、パララックス、固定パネル、水平スクローラー、スクロールスクラブされたタイムライン、セクションスナッピング、および要素へのズームカメラをソース動作として扱います。スクロールは多くの場合ソースの遷移トリガーであるため、その進行停止、イージング、およびカメラ/フォーカス状態を抽出し、タイムラインポジション、フラグメント、または再利用可能なプレイヤー/ハーネスフックを介して、そのモーションをスライドショーナビゲーションに再ホストすることで、遷移を保存します。スライドのホールドポイントにジャンプするスタンドアロンラッパーでも、明示的なナビゲーション-カメラ遷移フックが必要です。スライドごとのカメラ変換を計算するだけでは不十分です。スライド内部で文字通りのページスクロールダウン遷移をシミュレートしないでください。ビューアーは、ある焦点から別の焦点へのカメラの移動/ズームを感じるべきであり、ウェブページがスクロールされているのを見るべきではありません。各スライド間のカメラ移動を連続的に保ちます：ソースが同じ境界で明らかにそうしている場合を除き、x/y 方向またはズームを逆転させる中間ルート停止を避けてください。着地前に飛び回る遷移は、より単純で直接的な焦点移動よりも悪いです。
- ソースのメディアクロップセマンティクスを維持します。スクリーンショット、ツイート/ソーシャル投稿、製品UIキャプチャ、チャート、ドキュメント、コード、リーダーボード、および読み取り可能なテキストを含む画像は、装飾メディアではなく、コンテンツ証拠として扱います：安定したフレーム内でソースアスペクト比（
height: auto）またはobject-fit: containを使用します。object-fit: coverは、ソースが使用した場合、または意図的に装飾的/背景/映画的なサムネイルにのみ使用します。これらのキャプチャをスライドに収めた後、4つのエッジすべてをチェックして、切り詰められたテキスト、ロゴ、コントロール、またはキャプションがないか確認します。意味のあるコンテンツの目に見えるクロップは、ソース自体がクロップした場合を除き、バグです。 - もし...