eyaprak/skills

HyperFrames Studio

あなたは3種類のHyperFrames出力のうち1つを生成します：水平のフック（イントロ）、垂直のショート、または16:9のスライドデッキ。3つすべてが同じエンジン、フォント、ブランド色導出式、レンダリングプリセットを共有します。異なるのはアスペクト比、字幕の有無、フレーミングのみです。まずモードを決定し、次にパッケージ内の既製スターターをコピーして編集します。白紙からコンポジションを書くことはありません。

エンジンの全体はreferences/engine.mdに、モードの違いはreferences/{hook,shorts,slidedeck}.mdに、トランスクリプションとリエンコードはreferences/transcription.mdにあります。スターターテンプレートはassets/templates/<mode>/にあります—ニュートラルなインディゴプレースホルダーパレット（--brand:#6366f1）で動作可能な状態で提供され、ユーザーの色で再着色されます。

ステップ0 — モードを決定する（Q0、最初に一致したものが優先）

1. リクエスト/引数に明示的なモード — mod:hook|shorts|slidedeck または明確な表現（intro/hook → hook；shorts/vertical/reels → shorts；slidedeck/sunum/slide → slidedeck）。固定。
2. フォルダ名 — 作業中/対象フォルダが -hook / -shorts / -slidedeck で終わっている場合、そのモード。
3. アスペクト比の意図 — "水平イントロ" → hook；"垂直" → shorts；"プレゼンテーション/デッキ" → slidedeck。
4. いずれでもない場合 AskUserQuestionで質問："何を生成しますか？フック（水平16:9イントロ）/ ショート（垂直9:16）/ スライドデッキ（16:9プレゼンテーション）"。

モードが決まったら、該当する references/<mode>.md ファイルを読み、その手順に従います。

常時ルール — 毎回の実行で組み込み済み、質問不要、スキップ不可

1. セルフホストフォント — Manrope + JetBrains Mono、4つのローカル fonts/*.woff2、トルコ語のunicode-range。CDNや組み込みフォントは絶対に使用しない（トルコ語グリフが欠落する）。各スターターはこれらと OFL.txt を含む；コンポジションと一緒に fonts/ をコピーすること。
2. ローカル assets/ のみ — ../assets や親ディレクトリパスは絶対に使用しない（プレビュー/レンダリングが親ディレクトリにアクセスできず、メディアが空になる）。
3. ダークテーマ + 単一ブランド色 — ほぼ黒の背景、ほぼ白のテキスト；すべてのアクセントは単一の --brand から派生（engine.md §4）。
4. トランスクリプトはユーザーから提供 — フック/ショートでは、トランスクリプトはユーザーの入力です。リクエストと一緒に貼り付けられておらず、このプロジェクト自身のフォルダに transcript.txt がない場合、停止してユーザーに依頼—コンポジションをセットアップする前、AskUserQuestionに進む前に。別のフォルダ/プロジェクトで見つけたトランスクリプトをこのクリップのものとみなさない（同じ名前でも）し、勝手に transcribe を実行しない。ユーザーが明示的に「抽出して」と言った場合のみ、transcription.mdに従う。詳細：transcription.md §トランスクリプトを取得する。
5. RAWクリップは先にリエンコード — node scripts/reencode.mjs <clip>.mp4（キーフレームを密に）；リエンコードされた -src.mp4 を参照し、生ファイルは参照しない（transcription.md）。
6. 決定論的タイムライン — gsap.timeline({paused:true})、window.__timelines["main"]=tl、リテラル秒の位置；Math.random/Date.now/repeat:-1/setTimeout は使用禁止（engine.md §8、§11）。
7. スポンサービューなし — 固定コーナーロゴなし；ブランドマークはタイミングを合わせたアニメーション（またはオプションで中央トップマーク）。
8. レンダリングはフックとショートのみ — これら2つのモードの納品物はMP4です；プリセット（デフォルト、上書き可能）：1080p · 60fps · 16 Mbps · quality high、pinned [email protected]。スライドデッキはレンダリングされず、レンダリングについても質問しない — デッキの納品物は presentation/presentation.html です（ユーザーが明示的に動画を求めた場合は例外；ルール：slidedeck.md）。
9. 完全なソースをカバー — data-duration = 実際のクリップ/コンテンツの長さ；フック/ショートではレンダリング後に ffprobe で検証、デッキでは N × スライド の計算で確認。

ステップ1 — 実際の選択を一度だけ質問（AskUserQuestion、日本語）

引数またはステップ0の検出で解決された質問はスキップ。その後、単一のAskUserQuestion呼び出しで共通質問をそのモードの2〜3の特別質問と結合（ラウンドトリップを減らす）。オプション1は常に推奨/検出された値。 質問が残らない場合は呼び出しをスキップし、解決された値を1行の日本語前置きで述べる。

共通質問（全モード）：

• 色（ヘッダー "色"） — オプション1 = 検出されたhexがある場合は "(推奨)" 付き；なければニュートラルデフォルト。2〜3のニュートラルなパレットサンプル + その他 = カスタムhex。テーマはDarkのまま。
• テンプレートソース（ヘッダー "テンプレート"） — "パッケージ内の既製 {mode} スターターを使用（推奨)" · ワークスペースで検出された場合 "自分の以前の -{mode} プロジェクトをクローン"。

モード固有の質問は該当 references/<mode>.md から追加（hook：デモ/ロゴ/クロージング · shorts：ブランド/クロージング/サムネイル · slidedeck：スライド/テンポ）。

絶対に質問しない： スライドデッキモードで「レンダリングしますか / MP4を生成しますか / どの出力を生成しますか」。デッキはHTMLプレゼンテーションです；presentation/presentation.html は常に生成され、レンダリングは話題になりません。

必ず質問する： フック/ショートでトランスクリプトがない場合（常時ルール4）。これはAskUserQuestionの前に行う単純な要求です — 「このクリップのトランスクリプトを [MM.SS - MM.SS] 形式で共有していただけますか？」 — なぜならトランスクリプトなしではキャプション {in,out}、HOOK_END/CLOSE、シーン境界を推測することになるからです。

ステップ2 — セットアップ（引き継ぎ）

1. assets/templates/<mode>/ フォルダをターゲットプロジェクトにコピー（index.html、fonts/、hyperframes.json、meta.json、package.json、assets/；デッキの場合はさらに presentation/ — 必ず、質問なし）。meta.json/package.json の名前を更新。
2. references/<mode>.md のビルド手順に従って index.html を処理：メディアをリンク、data-duration を実際の長さに設定、パレットを適用、シーン/キャプション/スライドをコンテンツで埋める。
3. 検証： npx --yes [email protected] lint → inspect（デッキではさらに validate）→ preview。キービートでフレームを抽出し、視覚QAを実行（engine.md §11の落とし穴に注意：リテラル位置、コメント内のメディアタグなし、WCAG false-positive、単一ルートコンポジション）。
4. 納品 — モードに応じて：
   • フック / ショート → render --quality high --fps 60 --video-bitrate 16M --output "renders/<name>.mp4"、その後 ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 renders/<name>.mp4 で長さを確認；中間フレームとオーディオストリームをチェック。出力パスと長さを直接報告。
   • スライドデッキ → レンダリングなし。presentation/presentation.html を納品し、slidedeck.mdの2行出力表を表示し、index.html がダブルクリックで開かない理由を説明。レンダリングについては何もせず、提案もしない。

初回使用の注意

• Node.js + npx と ffmpeg がPATHに 必要。HyperFramesツールチェーンは npx でオンデマンドにダウンロードされます。
• hyperframes transcribe は初回使用時にWhisperモデルをダウンロードします（大容量、数分かかる）；トルコ語の場合は .en ではなく medium/large-v3 を使用（transcription.md）。
• フォントはSIL OFL 1.1（fonts/OFL.txt）；スキルコードはMIT。
• エンジンのCLI/GSAP内部詳細についてはベースの hyperframes スキルに委譲 — ここでは繰り返さない。