Communitygithub.com

AlessandroFare/fluxychat

既存の単一被写体のトーキングヘッド動画に、映像を編集せずに字幕やキャプションを追加します。原稿通りのキャプション、被写体の背後に埋め込むシネマティックなキャプション、VFXキャプション、「炸/特效/酷炫字幕」、または35スタイルのカタログから選んだ名前付きアイデンティティに使用できます。バックエンドエンジンではなく、視覚的なアイデンティティでルーティングします。静かな `anchor` レールがデフォルトです。ユーザーが明示的に完全なシネマティック処理を希望する場合にのみ、すべての単語を埋め込みます。ワークフローは、文字起こしと被写体のマット処理を含め、すべてローカルでエンドツーエンドに実行されます。適用する前に、マルチショットの映像を分割してください。

fluxychat とは?

このスキルは、単一被写体のトーキングヘッド動画に、映像そのものを編集せずにプロフェッショナルな字幕を追加するためのものです。主に3つの動作モードがあります。デフォルトの「Standard」モードでは、ほとんどのテキストを表示するクリーンなレール(下部3分の1の字幕)と、映像のクライマックスで被写体の背後に合成される埋め込みキャプションを組み合わせます。「Cinematic」モードでは、レールは使用せず、すべてのキャプションを被写体の背後に埋め込み、ヒーロータイポグラフィ、蓄積、オクルージョンなどの視覚効果を適用します。「Theme」モードでは、「ordnance」「terminal」「neonsign」などの登録済みテーマから選ばれた、完全にテーマ化された構成を提供します。このスキルは、Hyperframesフレームワーク上で動作し、選択された視覚的アイデンティティに基づいてルーティングを行います。パイプラインは、映像の調査と不適切なクリップの拒否から始まり、並列処理による準備、クリエイティブな設定ファイルの作成、プレビューによるビジュアルQA、そして最終的なレンダリングと合成へと進みます。ワークフロー全体がローカルで実行されるため、外部サービスに依存しません。重要な注意点として、埋め込みキャプションは厳選して使用すべきであり(すべての単語を埋め込むのは間違い)、映像自体は変更されず、キャプションのみが追加されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/embedded-captions

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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

埋め込みキャプション

1つのカタログを事前に選択(CATALOG.md — 35のアイデンティティ。背後にあるエンジンはバックエンドの詳細です)。Standard(デフォルト)は、クリーンな逐語的なレール(ほとんどのテキストを表示する下部3分の1の字幕)と、映像のクライマックスで被写体の背後に合成される埋め込みを構築します。Cinematicは純粋な埋め込みです。レールはなく、すべてのキャプションが被写体の背後に合成されます(ヒーロータイポグラフィ、蓄積、オクルージョンが効果として適用されます)。Themeは、完全なテーマ化された構成です。ボディパラダイム×ヒーローセットピース×フロントFX×プレートリアクションを、レジストリ(themes/README.md)から構成します:ordnance terminal neonsign stardust stomp。ほとんどの解説動画/ナレーションはStandardです。埋め込みは、希少で価値のあるクライマックスです。すべての単語を埋め込むのはよくある間違いです。ThemeはVFXレベルの要求(「炸」、「特效」、「AEで作ったように」)に適しています。


運用フロー(概要)

/hyperframes を介してルーティングされます。インテントレイヤーは、入力(どのクリップか)のみを確認し、アイデンティティの選択を先送りされた要求として通知します。ショートリストは調査済みのクリップを必要とするため、以下のステップ1に留まります。レイヤーの実行形状に関する質問は該当しません(映像は未編集であり、レビューするストーリーボードはありません)。BRIEF.md が存在する場合、確認された入力とユーザーノートが含まれています。最初にそれを読んでください。

以下のクラフト散文は長いですが、パイプライン自体は短いです。そして、決定論的なすべてのものは計算またはコンパイルされ、手書きされることはありません。

  1. 決定ゲート(不良クリップを拒否)→ ** CATALOG.md から1つのアイデンティティを選択**(35のアイデンティティ。エンジン/コンパイラはルックアップによって導出されます。モード/カテゴリの質問をユーザーに提示しないでください)
  2. hyperframes init(プロジェクトディレクトリが既に存在し、その中にビデオがある場合はスキップ — matte.cjs/transcribe.cjs はディレクトリ内の任意のビデオを source.mp4 として採用します)→ bash scripts/prepare.sh <project>(マット処理 ∥ 文字起こし ∥ オーディオエンベロープを並列実行し、その後、シーンパレット/光学/照明を用いたセーフゾーンv2を実行 — 1つのコマンドで全てをカバー)
  3. 小さなJSONのクリエイティブな選択を作成(最初に safe-zones.json を読む):Cinematic → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs;Theme → theme.json → make-theme.cjs(レール/パネル/詩/テイクオーバーパラダイム。anchor は静かなレールのデフォルト)
  4. ビジュアルQA:node scripts/preview-frames.cjs <project> → 約2秒/フレームで忠実なコンポジットプレビューを生成(レンダリングは不要)。レンダリングを実行する前に § ビジュアルQA を確認してください。
  5. render-and-composite.sh → ゲート(タイミング / オクルージョン+ヒーロー / オーバーフロー / ハンドオフ)→ final.mp4

見落とされがちな重要なルール:

  • レール(デフォルト)+ 埋め込み(プロモーション)。 drop(フィラー、表示されない)/ rail(逐語的な下部3分の1の字幕、前景、ほとんどのテキストを表示)/ embed(被写体の背後に合成されるクライマックスの単語)。Standardモードは両方を行い、クライマックスのみを埋め込みます。§ キャプションモデル を参照してください。
  • **ビデオは変更されずに配信されます(Standard/Cinematic;ThemeモードのPLATE予算は唯一認められた例外です — テーマDNAごとに定義された、レジスターで制御されるリアクションビート(チャージディム、パンチ、シェイク、グレイン)で、マットコンポジットの後に適用されるため、被写体+テキスト+プレートが1つのフレームとして動きます) — 追加されるのはキャプションのみです。マットは、被写体が埋め込みトラックを隠す(オクルードする)ことを可能にするだけです。映像のグレーディング/リカラー/スキャンラインは絶対に行わないでください。
  • 2つのルールブック:レール → references/rail.md(簡潔)、埋め込みクラフト → references/composition-craft.md(豊富、埋め込み専用)。必要に応じて斜め読みしてください。

キャプションモデル — レール + 埋め込み

話されたすべてのフレーズは、次の3つのいずれかです:

内容表示方法
dropフィラー — えーと/あのー、どもり、自己訂正表示されない
railデフォルト — 通常の話し言葉(逐語的)クリーンな下部3分の1の字幕、前景、読みやすい。パンチワードはインラインの emphasis ハイライト(アクセントカラー / アクティブワードポップ)を得ることができます — レール上に留まります。
embedプロモーションされたクライマックス — 見出しビート被写体の背後に合成された1つの大きな単語(マットオクルージョン)、設計された入場と退場

レールはテキストの大部分を表示します。埋め込みは、希少で価値のあるクライマックスです。 希少性はクリップ単位ではなく、ビート/ブロック単位です:ブロック(思考)あたりヒーローは≤1、2つが同時に表示されることはなく、ヒーローウィンドウ間には少なくとも1ビートの間隔が必要です(コンパイラは0.6秒未満を警告します)。短いクリップ → 通常1〜2つ。長い解説動画 → セクションごとに約1つ。複数のヒーローの中で、最も大きいと指定されたものがAPEXです(それのみが完全なロックアップ埋め込み + 幅適合レイズを得ます)。小さいものはMINORなクライマックスで、列に沿って特大の強調線として表示されます(前景、減衰した動き)。すべてのビートがマットショーケースを必要とするわけではなく、それがまさにAPEXをイベントとして際立たせている理由です。すべての単語を埋め込むことは、今でもよくある間違いです。

レールサーフェスアイデンティティは、まさにこれを構築します(レール = rail.html、埋め込み = index.html 内のクライマックス)。カラムフローアイデンティティはレールを廃止し、すべてを埋め込みスタイルにします。これらのアイデンティティは、ムード重視で逐語性が重要でない場合(解説動画やナレーションのように単語が読めなければならない場合は不可)にのみ推奨します(CATALOG.md はこれをアイデンティティごとにエンコードしています)。


ステップ 0 — カタログから1つのアイデンティティを選択

1つのフロントエンド、背後に3つのエンジン。 ユーザーは CATALOG.md からアイデンティティを選択します(35エントリ:10のクラシック + 25のテーマ)。エンジン、コンパイラ、および作成ファイルは、カタログ行からのルックアップによって導出されます。「Standard vs Cinematic vs Theme」を質問として提示しないでください — これらはバックエンドの名前です(1つの製品は、複数のエンジンを持つ場合でも1つのUXを持ちます)。カタログはルーティングに必要なすべてをエンコードしています:読み取りサーフェス、ボイス、推奨対象、シーンのニーズ、および実際に近いペア(loud↔ordnance、neon↔neonsign、cream↔stardust)に関する隣接ノート。

アイデンティティの選択は嗜好ゲートです(../hyperframes-core/references/brief-contract.md § 1):自律モード(「驚かせて」/「決めて」)の場合、自分でショートリストから選択し、なぜそれを選んだかの一文の理由を述べてください。質問はしないでください。

手順:クリップを調査 → カタログから2〜3のアイデンティティをショートリストアップ → 一文の理由とともに1つを推奨 → ユーザーが選択(自律モード:あなたが選択し、理由を述べる)→ そのアイデンティティのファイルを作成します。アイデンティティはエンジンに固定されています(クロスコンボは不可。1つを開くことは検証イベントです — dna/README.md を参照)。

常に推奨事項を提示し、作成する前にユーザーに選択させてください。 黙ってデフォルトにしないでください。

(完全なアイデンティティテーブルは CATALOG.md にあります — ルーティングのための単一の信頼できる情報源。以下のエンジンドキュメントは、各バックエンドの作成契約を説明しています。)

推奨ヒューリスティック:CATALOG.md の「ショートリスト作成ヒューリスティック」を使用してください。これらはアイデンティティレベルです(例:「炸」は ordnance/stomp/terminal/loud をショートリストアップし、何が爆発するかで選択します)。カテゴリレベルではありません。不明な場合 → anchor。

  • Cinematic → ロックされたテンプレート用に plan.json を作成し、make-composition.cjs でコンパイルします。
  • Theme → themes/README.md を読み、theme.json を作成し、scripts/render-theme.sh を実行します(コンパイル + レンダリング + プレートリアクション → final_fx.mp4)。

決定ゲート — 最初に実行

ビデオを調査し、いずれかのモードの前にシーンを分類します。

ffprobe <video.mp4>                    # スペック
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # 20/50/80% の位置で

サンプルを読んでください。以下の場合は拒否します:

  • 複数の話者 / ハードカットがある(各ショットを分割してレンダリングするか、拒否)
  • 人間の被写体がいない(このスキルはトーキングヘッド用です)
  • 3秒未満、音声なし、または顔がはっきり見えない — transcribe.cjs はオーディオがほぼ無音の場合に警告します(Whisperは沈黙の中で「ありがとうございます。」のような単語を幻覚します)。その警告に従い、でっち上げられた単語にキャプションを付ける代わりに拒否してください。
  • ソースに既に焼き付けられたキャプション/字幕/重いテキストグラフィックがある — 2つ目のキャプションシステムを追加すると競合が発生し、映像は未編集のまま提供されます(カバー/インペイントは行いません)。焼き付けられたテキストはクリップの中盤にのみ現れることがよくあります。1fpsのコンタクトシート(ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png)をサンプリングしてください。3つのスポットフレームだけを信頼しないでください。
  • 文字起こしが意味不明である — 非ネイティブ/強いアクセントのある音声は、自信満々の意味不明なテキストに文字起こしされる可能性があります。作成前に transcript.json を常識的に読んでください。言語として解析できない場合は、一度 WHISPER_MODEL=medium を試し、それでもダメなら拒否してください(でっち上げられた単語の逐語的なレールは、キャプションがないよりも悪いです)。
  • 高速な動きを伴う手ぶれの激しい映像(マットがちらつく)

事前調査プローブ(コストはかからず、最悪の障害を防ぎます)

  1. ショットカットプローブ。 20%、50%、80% の位置でフレームをサンプリングします。異なる被写体/シーンが現れた場合は、カットの前にクリップをトリミングします。
  2. レターボックス / ピラーボックスプローブ。 最初のフレームに黒いバーがありますか?安全なコンテンツ矩形を計算し、キャプションの配置をその内部に制限します。
  3. 輝度プローブ。 キャプション領域の平均輝度をサンプリングします — 60未満 → 明るいテキストはそのままで読めます、60-180 → グリフスクリムを追加、180+ → 不透明テキスト + スクリム(裸の明るいテキストは絶対に避ける)。Cinematicテンプレートはクリーム+screen で固定されています — このプローブを使用して_適合するアイデンティティを選択_します(明るいシーン → ink、または不透明レールの anchor テーマ)。アイデンティティのリカラーリングには使用しないでください。
  4. トーンによるアイデンティティ推奨(あなたが推奨し、ユーザーが選択します — ステップ0 + CATALOG.md を参照)。 解説動画 / インタビュー / 単語を読ませる必要がある場合 → レール/パネルサーフェスアイデンティティ。詩的 / ソーシャルメディア /「シネマティック」/ 名前付きワールド → レジスターによるカラムフローアイデンティティ。戦術的な「炸 / 特效 / VFX」→ テーマアイデンティティ。不明な場合 → anchor(単語を読み、シーンセーフ)。ただし、ショートリストを提示し、ユーザーに選択させてください。

パイプライン — 5ステップ

1. hyperframes init <project> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <project>       # マット処理 ∥ 文字起こし(並列)→ セーフゾーン。1つのコマンド。
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [エージェントステップ — 唯一のクリエイティブなステップ] 小さなJSONを作成します。以下のモードを参照。
   Cinematic: plan.json を作成 → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Theme:     theme.json を作成 → bash scripts/render-theme.sh <project>   (コンパイル + レンダリング + プレートFX)
4. node scripts/preview-frames.cjs <project>   # 約2秒/フレームのコンポジットプレビュー → § ビジュアルQA(レンダリングの前)
5. bash scripts/render-and-composite.sh <project>  # ゲート → final.mp4 + history/ スナップショット
   (Themeモード:ステップ3b/5をスキップ — render-theme.sh がコンパイルと render-and-composite + _postfx.sh を既に実行しています。
    成果物は final_fx.mp4 で、final.mp4 はプレートリアクション前のものです)

ステップ1の init は、インストールされているスキルをGitHub上の最新版と比較し、いずれかが古い場合はグローバルセットを更新します。

ステップ3はモードによって異なります:

ステップ 3 — Cinematic モード(純粋な埋め込み)

  1. 最初に safe-zones.json を読んでください。 ナレーションプレーンは zones.hugLeft/hugRight に配置されます — シルエットに隣接するクリーンなストリップ(テキストが身体から遠いと浮いて見え、埋め込まれているように見えません。遠い角はフォールバックであり、デフォルトではありません)。ヒーローはデフォルトで heroAnchor/heroBands.best に配置されます(被写体上に中央揃え、約30〜55%がオクルードされます)。recommendation:"fg" は、読みやすさのためにナレーションを前景に移動します。ヒーローは heroBands.feasible である限り、埋め込まれたままになります — ヒーロー前景は最後の手段です。
  2. DNAはステップ0で選択したアイデンティティです(CATALOG.md) — ここで選択を再開しないでください。シーンに対してそれを常識的にチェックしてください(明るいヒーローバンドの輝度 > 150 は ink を必要とします。完全な選択ガイダンスはカタログにあり、neon/glitch/chrome/velocity を含む10個すべてをカバーしています)。選択とその理由を述べてください。ユーザーが決定します。DNAはタイプ/パレット/ブレンド/モーション + ヒーロー三部作をロックします。セーフゾーンv2(palette/optics/lighting)は、これを自動的に_この_シーンにパラメータ化します。
  3. <project>/cinematic.json を作成 — "dna": "<name>" + 思考ブロック(生のグループではありません)。各ブロック = 単語の行(節の境界で2〜5語にグループ化)+ それが積み重なるプレーン + 行ごとの css(サイズ/ウェイト/スタイルのみ — 位置はなし)+ 多くとも1行が "hero": true とマークされる(プロモーションされた単語。表示フォームには "text")。スキーマ:scripts/make-cinematic.cjs ヘッダー。
  4. コンパイル:node scripts/make-cinematic.cjs <project> — ブロックを plan.json → index.html に変換します。あなたのために生成されるもの:文字起こしにシーケンスされたタイミング、ブロック内での蓄積、ブロック間でのページフリップ、ヒーローロックアップ(ヒーローブロックの事前コンテキスト、ヒーロー、および事後コンテキストが、被写体上に中央揃えされた1つの結合コンポジションとしてスタックされます — 読み順は上→下 = 構築による発話順。コンテキストは前景に浮かび、ヒーローは背後に埋め込まれます = デプスサンドイッチ。マスルールはヒーローがそのコンテキストを支配するようにします)、APEX/マイナーヒーローの分割、構築による読み順、セーフゾーンごとの前景フォールバック。その後、通常通りゲートが実行されます。(plan.json を直接手動で作成することも可能です。その場合は、fill-timings.cjs + fit-fonts.cjs + make-composition.cjs を自分で実行してください。)

ステップ 3 — Theme モード(テーマ化された構成)

最初に themes/README.md を読んでください — パラダイム/セットピースのレジストリ、リンケージ、ハードルール、および正確な theme.json スキーマ。

  1. コンテンツレジスターによってテーマDNAを選択します(各 themes/<name>.json には voice + when があります)。選択とその理由を述べてください。ユーザーが決定します。
  2. <project>/theme.json を作成 — dna、lines(逐語的、文字起こし順序。1行/行、オプションの hero/fx、俯瞰的な time はなし — make-theme.cjs がコンパイルします)。詳細なスキーマは themes/README.md にあります。
  3. コンパイル+レンダリング:bash scripts/render-theme.sh <project> — コンパイル → レンダリング → ポストエフェクト(プレートリアクション)→ 最終出力 final_fx.mp4。(内部では make-theme.cjs → fit-fonts.cjs → make-composition.cjs、次に render-and-composite.sh、最後に _postfx.sh を実行します)。final.mp4 はプレートリアクション前のマイルストーンです。

キャプションクラフト — レール(Standard)

レールは、キャプションの作業馬です。これは、前景に表示されるクリーンな逐語的な下部3分の1の字幕であり、すべての通常の話し言葉を伝達します。レールのルールブック全体は references/rail.md にあります。以下は要点です:

  • 常に可視:話されている間、レール上に表示され、埋め込みの邪魔にはなりません(レールは前景にあり、埋め込みは被写体の背後にあります)。
  • 逐語的:えーと、あのー、言い間違いを含む、話されたすべての単語が表示されます。transcribe.cjs からのフィルタリングはありません。
  • クリーンなタイポグラフィ:最小限のスタイリング、高い可読性。各アイデンティティのDNAに従います。
  • 進行状況の強調:現在の単語がハイライトされることがあります(アクティブワードポップ)。

レールビルダースキーマ(<project>/rail.json):

  • "lines": テキスト行の配列。各々が "text"(表示テキスト)、"start"(秒単位の開始時間)、"end"(秒単位の終了時間)。
  • "style": オプションのCSSオーバーライド(フォントサイズ、色、配置)。
  • 注:レールJSONは、scripts/make-cinematic.cjs または scripts/make-theme.cjs によって自動的に生成されます。通常は手動での作成は必要ありません。

キャプションクラフト — 埋め込み(Cinematic / Standardのクライマックス)

埋め込みキャプションは、スキルの差別化要因です。それらは被写体の背後に合成され、被写体がテキストの一部を覆い隠す(オクルードする)ことで、奥行きと没入感を生み出します。完全なクラフトガイドは references/composition-craft.md にあります。

主要な概念:

  • オクルージョン:前景の被写体が、背後にある埋め込みテキストの一部を自然に覆い隠します。これにより、テキストがシーンに「属している」ように見えます。
  • ロックアップ:ヒーローブロック(事前コンテキスト、ヒーローワード、事後コンテキスト)は、被写体上に中央揃えされた1つの結合コンポジションとしてスタックされます。読み順は上から下へ、話される順序と一致します。
  • APEX vs マイナー:複数のヒーロービートの中で、最も大きなものだけが完全なロックアップ埋め込み(幅適合レイズ、完全なエフェクトスタック)を得ます。他のものは、同じ列内の強調された線として扱われます。
  • タイミング:各ヒーワードは、明確な入場、保持、および退場のアニメーションを持ちます。保持時間は、単語の長さと音声のテンポに基づいてコンパイラによって計算されます。
  • ビジュアルQA:レンダリングする前に、node scripts/preview-frames.cjs <project> を使用してコンポジットをプレビューします。これにより、約2秒/フレームで忠実なプレビューが生成され、高価なフルレンダリングをコミットする前に結果を確認できます。

ビジュアルQA(ステップ4 — レンダリング前)

レンダリングを実行する前に、合成結果を確認することが重要です。

node scripts/preview-frames.cjs <project>

プレビューフレームを確認するために、以下の手順を実行します:

  1. 生成されたフレームを <project>/preview/ で確認します。
  2. レイアウト、タイミング、オクルージョンに問題がないかチェックします。
  3. 問題がある場合は、JSONファイル(plan.json または theme.json)を調整し、ステップ3と4を繰り返します。
  4. すべてが良好な場合にのみ、ステップ5に進みます。

よくある問題と修正:

  • 不自然なオクルージョン:safe-zones.json のヒーローバンド位置を調整するか、plan.json でヒーローの配置を変更します。
  • テキストが小さすぎる/大きすぎる:cinematic.json または theme.json でフォントサイズを調整するか、ドメイン設定を確認します。
  • タイミングが合わない:transcript.json のタイムスタンプを確認します。必要に応じて fill-timings.cjs を再実行するか、タイミングを手動で微調整します。

トラブルシューティング / よくある問題

問題診断と修正
マットがちらつく / 被写体のエッジが粗いscripts/prepare.sh のマット処理パラメータを増やします。詳細については scripts/matte/README.md を参照してください。
埋め込みテキストが被写体の前に表示されるsafe-zones.json の heroBands 設定を確認します。テキストが前景に設定されていないか確認します (recommendation:"fg")。
レールのテキストが読めないアイデンティティを変更するか (ink は暗いシーンに適しています)、safe-zones.json で fg フォールバックを強制します。
文字起こしが不正確 / 意味不明最初に WHISPER_MODEL=medium を試します。それでもダメなら、クリップを拒否します(誤ったキャプションは最悪です)。
render-and-composite.sh が特定のゲートで失敗するゲートメッセージを確認します:「TIMING」→ タイムラインを確認、「OCCLUSION」→ ヒーローが適切にオクルードされているか確認、「OVERFLOW」→ テキストが領域に収まっているか確認。
テーマモードで _postfx.sh がエラーを出すテーマDNAが有効で、必要なすべてのアセットが利用可能であることを確認します。themes/<name>.json を参照してください。

付録:ファイル構造(<project> ディレクトリ内)

<project>/
├── source.mp4              # 元の動画ファイル(scripts/prepare.sh によってコピーされる)
├── frames_fg/              # 前景フレーム(マット処理済み、被写体を含む)
├── frames_bg/              # 背景フレーム(被写体なし)
├── transcript.json         # 文字起こし結果
├── safe-zones.json         # セーフゾーン、パレット、光学、照明のデータ
├── plan.json               # Cinematicモード:コンパイルされたタイミングと配置(make-cinematic.cjs の出力)
├── cinematic.json          # Cinematicモード:エージェント作成のブロック定義(入力)
├── theme.json              # Themeモード:エージェント作成のテーマ定義(入力)
├── index.html              # 埋め込みコンポジション
├── rail.html               # レールコンポジション(Standardモード)
├── preview/                # ビジュアルQAプレビューフレーム
├── final.mp4               # 最終出力(Standard/Cinematicモード)
├── final_fx.mp4            # 最終出力(Themeモード、プレートリアクション後)
└── history/                # 以前のバージョンのスナップショット

付録:標準モードの動作例

  1. ユーザーが「この解説動画にキャプションを追加して」と要求します。
  2. エージェントがクリップを調査し、単一の被写体がはっきりと映っていることを確認します。
  3. エージェントが CATALOG.md から適切なアイデンティティ(例:anchor)を推奨します。ユーザーが承認します。
  4. エージェントが hyperframes init と scripts/prepare.sh を実行します。
  5. エージェントが safe-zones.json を読み込み、cinematic.json(Standardモードのため、1つのクライマックスブロックのみ)を作成します。
  6. エージェントが scripts/make-cinematic.cjs を実行し、plan.json と index.html(埋め込み)+ rail.html(レール)を生成します。
  7. エージェントが node scripts/preview-frames.cjs で結果をプレビューします。問題がなければレンダリングに進みます。
  8. render-and-composite.sh が最終的な final.mp4 を生成します。すべてのキャプションが追加され、元の映像は変更されていません。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

AlessandroFare/fluxychat

Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.\n

AlessandroFare/fluxychat

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.\n

AlessandroFare/fluxychat

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

AlessandroFare/fluxychat

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

AlessandroFare/fluxychat

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

AlessandroFare/fluxychat

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

AlessandroFare/fluxychat

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AlessandroFare/fluxychat

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

AlessandroFare/fluxychat

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

AlessandroFare/fluxychat

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

関連スキル