コンテンツ制作 · heygen-com/hyperframes

hyperframes-studio

Studio で開いて編集する HyperFrames プロジェクトを構築または編集する際に使用します:タイムラインをわかりやすく配置する方法(字幕トラックは1本、トラックごとに1種類のエレメント、各シーンはサブコンポジション)や、字幕および重要コンテンツの配置場所(セーフゾーン)。個別の編集操作(分割、トリム、リタイム、音量調整、コピー、置換)を行う方法には使用しないでください。それらは `/hyperframes-core` の `creator-editing-recipes.md` を参照してください。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0(仓库根 LICENSE 为 Apache License Version 2.0;池内值亦为 Apache-2.0)Commit d2f0bc7f34
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

ドキュメント全体の根底にある前提は Studio のレンダリングモデルです。タイムラインは各トップレベル要素に対して1行を描画します。したがって、「階層をどう分割するか」は単なる美観の問題ではなく、Studio 上でユーザーが編集できるかどうかに直結します。

skills/hyperframes-studio/SKILL.md
Studio draws one timeline row per top-level element. A project that follows the rules below opens as a short, readable timeline; one that does not opens as a wall of unlabeled rows the user cannot edit.
ここでの目的:「構造の規約」を「ユーザビリティの制約」として論証し、失敗状態(編集不能な名前のない行が並ぶ状態)を提示した上で4つのルールを示します。

ルール1:ルートコンポジションにはトップレベルのホスト、メディア、音声のみを配置します。ネスト構造を持つシーンはすべて別ファイルに分割し、data-composition-src 経由でマウントします。ルートに残されたネストマークアップは独立した行になりません。

skills/hyperframes-studio/SKILL.md
The root composition holds only timed hosts, media and audio.
ここでの目的:判定基準(「子要素があれば分割する」)を提示し、分割しないネストは個別のトリミングができない不透明な白い行の中に隠れてしまうという結果を明示します。

ルール2:すべての字幕は1トラックのみに集約します。data-track-kind="captions" を持つ単一のサブコンポジションホストが、すべての字幕グループを順番に保持します。字幕グループごとに行を分けたり、他の種類とトラックを混在させたりすることは禁止です。

skills/hyperframes-studio/SKILL.md
- All captions live on one track: a single sub-composition host (one `data-track-index`)
ここでの目的:「トラック」を「ユーザーがまとめて選択/ミュート/ドラッグできるひとかたまり」と定義し、内容別ではなく種類別で集約します。単語レベルのタイミング規約は引き続き /embedded-captions および caption_* の lint ルールに従います。

ルール3:各トラックには1種類の要素タイプのみを配置し、data-track-kind(video/graphics/captions/audio)で明示します。data-track-index は表示上の並び順にすぎず、レイヤー階層(重なり順)を決定しません。重なり順は CSS で決定します。

skills/hyperframes-studio/SKILL.md
Give each kind its own `data-track-index`; the number is display only; it never changes what renders on top.
ここでの目的:よくある誤解(track-index が z-index であるという思い込み)を解消し、手書き HTML で混同しやすい「トラック順とレイヤー順」を明確に切り離します。

ルール4:セーフゾーンはプレビューパネル上でのみ描画し、コンポジション内に書き込んではいけません。横型・縦型の両フォーマットで同一のセーフフレーム基準(Adobe Premiere のデフォルト:アクションセーフ 90%、タイトルセーフ 80%)を共有し、字幕や重要コンテンツは必ずタイトルセーフ枠内に収めます。

skills/hyperframes-studio/SKILL.md
Safe margins: everything visible stays inside the action-safe box (90%), and captions and key content stay inside the title-safe box (80%).
ここでの目的:「ガイドラインはツールに属し、成果物には属さない」という規律を確立し、エディタ専用の枠線がエクスポートされる HTML に混入するのを防ぎます。2カラム/分割レイアウトもそれぞれタイトルセーフ枠内に収める必要があります。

最終ステップは二重検証です。まず hyperframes lint を実行して検出された問題をすべて解消し、次に Studio 上でタイムラインの構成(ベース行 + シーンホストごとの行 + 字幕行1本 + 音声行)を目視確認します。

skills/hyperframes-studio/SKILL.md
Run `hyperframes lint` and fix every finding.
ここでの目的:「構造の正しさ」を静的チェックに委ね、「視認性の良さ」を人間の目で確認し、両方をクリアすることを求めます。

明確な境界線:本スキルは「どのような形状を構築すべきか」のみを扱います。特定のクリップの編集方法(分割/トリム/リタイム/音量/コピー/置換)はすべて /hyperframes-core の creator-editing-recipes.md に戻り、独自の手法を勝手に作ることは禁止します。

skills/hyperframes-studio/SKILL.md
For how to change a clip, follow `/hyperframes-core` `references/creator-editing-recipes.md` and never invent a different form of the same edit.
ここでの目的:他のルールを重複定義することを明示的に拒否し(単一情報源の原則)、トリガー条件(誰がこのスキルを使用すべきか)を description で明確にします。

2コア機能

01ルートコンポジション分割規約:ルートにはタイミングホスト/メディア/音声のみを残し、子要素を含むシーンは別ファイルに分割して data-composition-src でマウントする
02字幕シングルトラック規約:すべての字幕グループは data-track-kind="captions" を持つ1本のホストトラックにまとめ、グループごとに行を分けたり他タイプと混在させたりしない
03トラック種別一覧と指定方法:video(タグから判定)/ graphics / captions / audio(タグから判定)。サブコンポジションホストには data-track-kind の明記が必須
04セーフゾーン仕様:アクションセーフ 90%(各辺 5% インセット)、タイトルセーフ 80%(各辺 10% インセット)を両フォーマットで共有。2カラム/分割レイアウトもそれぞれタイトルセーフ枠に準拠
05ガイドラインの分離:セーフフレームやルーラーはプレビューパネル内のみに存在させ、成果物 HTML に補助要素を含めない
06二重検証による完了確認:lint オールグリーン + Studio 上でタイムラインが「ベース行 / 各シーンホスト行 / 字幕行1本 / 音声行」で構成されていることを目視確認

3外部依存関係

KindDependency / Endpoint
clihyperframes lint(唯一被本 skill 点名的外部命令,作为结构正确性的静态门禁)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: プロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への影響はありません
監査ノート: 判定対象=スキル自体のディレクトリ:Markdown ファイル1つのみで構成され、スクリプト、ネットワーク呼び出し、クレデンシャル/環境変数の読み込み、書き込み指示は一切ありません。グローバルトークンスキャン(http(s) URL / fetch / process.env / child_process / writeFile / API_KEY|TOKEN|SECRET)のヒット数は 0 件です。本スキルが行うのは、タイムライン構造の4つの規約とセーフゾーンパーセンテージの提示、および hyperframes lint の実行と目視確認の要求の2点のみです。実行はホスト CLI 側で行われ、「ホストの挙動は判定ランクを変更しない」という原則に基づき、ランクを上げることなく reason に記録しています。検証可能な唯一の外部参照(セーフゾーン定数が含まれる packages/studio/src/utils/previewSafeMargins.ts)はリポジトリ内の読み取り値であり、実測値 ACTION_SAFE_PERCENT=90、TITLE_SAFE_PERCENT=80 はドキュメントの記載と一致しています。

5二重目の独立検証

  • [ok] 安全区百分比与宿主源码常量是否一致(文档唯一可被代码验证的声明) — SKILL.md 给出 Action-safe 90%(每边 5%)、Title-safe 80%(每边 10%),并指明来源 packages/studio/src/utils/previewSafeMargins.ts。打开该文件实测:`export const ACTION_SAFE_PERCENT = 90;` 与 `export const TITLE_SAFE_PERCENT = 80;`,注释亦写明「Adobe Premiere default: action-safe and title-safe margins are 10% and 20% total (5% and 10% per edge)」——文档与代码一致。
  • [ok] 是否遗漏网络调用 / 脚本 / 凭证(绿档判定的关键反例检查) — 全域扫描 URL、fetch、process.env、child_process、writeFile、credential 关键词均为 0 命中;目录内只有 1 个 md 文件,无 scripts/、references/、资产。因此不存在隐藏执行面。
  • [ok] 「轨类型 / 字幕单轨」等约定是否与仓库 lint 规则对得上(避免文档与实现脱节) — 文档自述「Author as if a structure lint rejects any violation」,并把词级时间规则交给 /embedded-captions 与 caption_* lint 规则;同仓 /embedded-captions 与 /hyperframes-core 的 lint 域存在对应规则,故约定不是孤例自说。本 skill 自身不实现 lint,属声明面。
  • [ok] 是否存在夸大(把宿主能力说成自己的) — 文档通篇用祈使式约定(该建出什么形状)与指向(去看某文件),没有声称自己执行检查或渲染;收尾要求跑的是 hyperframes lint(宿主命令)。与同批 hyperframes-keyframes 同型:纯约定文档,能力来自宿主。

6結論

  • 構造上の規約をスタイル上の好みではなく、ユーザビリティの制約(違反すると Studio 上で編集不能な無名行が並ぶ)として論証している点
  • 各ルールが判定可能であり、アンチパターンの説明(子要素があれば分割、字幕で行を細分化しない、track-index はレイヤー順ではない)も備えているため、初見でも迷わず実行できる点
  • コード検証が可能な唯一の記述(セーフフレームのパーセンテージ)がホストソースコードの定数値と実測で一致しており、ドキュメントの信頼性が高い点
  • クリーンな境界線:「どのような形状を構築すべきか」のみを定義し、個別編集は /hyperframes-core の creator-editing-recipes.md に委ね、独自の類似手法の作成を禁止している点
  • 二重検証(lint オールグリーン + Studio でのタイムライン構成の目視確認)を義務付け、静的チェックのみや目視のみへの依存を防止している点
  • 最適な用途: Studio で開いて編集される HyperFrames プロジェクトを作成する際の構造規範として最適です。ルートコンポジションをスリムに保ち、シーンをサブコンポジション化し、字幕を1トラックにまとめ、種類ごとにトラックを分け、コンテンツをセーフゾーン内に収め、最後に lint と目視でタイムライン構成を確認します。また、チームの標準規約として他のワークフロースキルから再利用するのにも適しています(HyperFrames ファミリーの構造規律の基盤の1つです)。
    不向きな用途: 不向きなケース:① 具体的な編集手順が必要な場合(分割/トリム/リタイム/音量/コピー/置換 → /hyperframes-core を使用);② Studio での編集を想定しない純粋なレンダリング専用プロジェクト(本規約の恩恵が得られない);③ 特定のアニメーションの実装方法のみを知りたい場合(hyperframes-animation / hyperframes-keyframes を参照);④ 構造エラーの自動修正を期待する場合(本スキルは規約とチェックポイントを提示するのみで、自動修正は行いません)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload hyperframes-studio.tar.gz
    sha256: e1afb0832db4ac26…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.