HyperFrames 向け RoleModel ブランド
私たちはすでに充実した HyperFrames ツール群を持っています。それらのインベントリから始めてください。ゼロから始めてはいけません。 このスキルはその上に被さるブランドレイヤーに過ぎません。つまり、私たちの価値観の源泉、どのトークンを選ぶべきか、そして私たちがやらないことを定義します。
インベントリ
2 つのセットがインストールされており、名前が重複しています。どちらを呼び出しているかを認識してください。
公式 (HeyGen) — ~/.claude/skills 内:
| スキル | 使用するタイミング |
|---|---|
hyperframes | コンポジション作成、タイミング、メディア、プロダクションワークフロー |
hyperframes-core | コンポジション契約と data-* タイミング属性 |
hyperframes-animation | モーションルール、シーンブループリント、GSAP およびその他のランタイム |
hyperframes-keyframes | パンチイン、カメラ移動、リフレーミング、シークセーフなキーフレーム |
hyperframes-creative | パレット、ビート計画、ナレーション、コンポジションパターン |
hyperframes-audio | 既に配置されたトラックのミキシング — フェード、ダッキング、オートメーション |
hyperframes-cli | init、lint、check、preview、render、transcribe、tts |
hyperframes-registry | ブロックとコンポーネントのインストール |
media-use | 音楽、SFX、画像、音声のソーシングまたは生成 |
標準 (弊社) — ~/.claude/skills/synced 内:
| スキル | 使用するタイミング |
|---|---|
hyperframes | 弊社独自のコンポジションスキル — design.md、house-style.md を読み込む |
hyperframes-cli | 弊社独自の CLI ノート |
hyperframes-direction-harness | ディレクションが確定していない場合、最終的な index.html の前に |
optics-context | プロダクトサーフェスとしても機能する必要があるものすべて |
gsap | GSAP 固有の内容 |
impeccable | 私たちのクラフトフロア |
名前の衝突。
hyperframesとhyperframes-cliは両方のセットに存在します。 どちらを取得するかが重要な場合は、明示的に指定してください。
ここにそれらのルールを再記述しないでください。 コンポジション契約、lint エラー、トラックの衝突、一時停止されたタイムライン — これらはすべてそれらのスキルに属し、そこでメンテナンスされます。コピーを二重に持つと、リリースが配信された瞬間にずれてしまい、誰も気づきません。ルールが不足している場合は、このファイルではなく上流で修正してください。
ブランドは design.md を通じて HyperFrames に到達する
標準の hyperframes スキルは、プロジェクトルートの design.md を 「ブランドカラー、フォント、制約の信頼できる情報源」 として既に読み込み、値を独自に発明するのではなくその正確な値を使用するように指示されています。それがフックです。それを利用してください。
ブランドリポジトリが design.md を生成します:
cp rolemodel-brand/dist/design.md <video-project>/design.md
これは rolemodel-brand/tokens/brand.json から scripts/build-tokens.mjs によって生成されるため、他のすべての RoleModel サーフェスが使用するトークンと矛盾することはありません。手動で編集しないでください — brand.json を変更して再実行してください。
このファイルには、カラー、タイポグラフィ、完全なモーションスケール、4 つのモーション原則、および以下の制約が含まれています。プロジェクトに配置されれば、既存のスキルが残りの処理を行います。
コンポジション自体の CSS カスタムプロパティについては:
<link rel="stylesheet" href="rolemodel-brand/css/academy-theme.css">
<body data-theme="academy">
モーショントークンの選択
完全な値は design.md にあります。選択ルールは短いです:
見た目ではなく、要素が何をしているかで選びます。
- 何かが到着する →
--duration-base+--ease-enter - 同じものが退場する →
--duration-fast+--ease-exit。 退場は常に到着よりも速くします。 - すでに画面上にあるものが場所やサイズを変える →
--ease-move - 意図的な「私を見て」 →
--ease-emphasis— オーバーシュートが許される唯一のカーブ - グループ → 兄弟間で 1 つの
--stagger、決して同時には実行しない
コンポジションに生の duration や生の cubic-bezier を決して書かないでください。スタジオがカラーに適用するのと同じルールであり、同じ理由です。
私たちがやらないこと
以下は拘束力があります。いくつかはツールキットの npm run check によって強制され、すべてはコンポジションスキルが読み取る design.md に記載されています。
- ラジアルグラデーションは使用禁止。 ブランドはリニア（線形）です — 方向性であり、塊ではありません。
- フレームワイプは禁止。 シーントランジションとして、白や薄い線のフレーム、境界線、またはボックスを描いてスイープさせないでください。Claude はこれをプロンプトなしでよく使用しますが、これはストックテンプレートの飾りであり、私たちのスタイルではなく、注目を何もないところに向けます。トランジションはカット、または
--ease-enterで入ってくるコンテンツを表示することで行います。フレームの周りにボックスを描くことはしません。 - 装飾的な線、アンダーライン、区切り線は禁止。 見出しに下線を引いたり、セクション間に区切り線を入れたり、カード、統計、引用、ローワーサードの周りに境界線を描いたりしないでください。Claude は構造を示すためにこれらを使用しますが、それらは「何かが追加された」ことだけを示します。区切りは、スペース、ウェイト、グラウンド（地面）によって生み出されます。システムで唯一許可されているルールは、タイトルの下にある短いブランドバーであり、
rm-titleがそれを描画します — 手動で 2 つ目を追加しないでください。 - エッジはソリッドボーダーであり、フェードではありません。 これは必要なエッジをどのように描画するかを規定するものであり、エッジを追加する許可を与えるものではありません。エッジがなくても曖昧でなければ、エッジはありません。
- オレンジはアクセントカラーとしてのみ使用 — 背景には決して使用しません。
- 装飾（オーナメント）は禁止。 要素が情報を伝えたり注意を誘導したりしないなら、削除してください。
ディレクションが確定していない場合
index.html を書き始めないでください。hyperframes-direction-harness を使用してください — これはまさにこの目的のために構築されており、コンポジション前にレビュー可能なボードを生成します:
01_intake.md → 02_design_direction.md → 03_critical_frame_plan.md
→ direction_board.html (ディレクターワークベンチ、レビュー対象)
→ 04_render_plan.md (レビュー後にのみ準備完了)
→ hand off to the hyperframes skill
既存のコンポジションへの小さな編集 — タイプミス、タイミングの微調整、1 つの色、lint 修正 — の場合にのみバイパスします。
どのツールがどの問題を解決するか
HyperFrames はコンポーズ（構成） するものであり、キャプチャ（収録）するものではありません。動画に実際のプロダクト UI を表示する必要がある場合、それは適切なツールではありません。
| 入力 | ツール | 最新状態を保つか？ | |
|---|---|---|---|
| 録画 | あなたの画面 | openscreen | いいえ — 手動で再録画が必要 |
| コンポーズ | スクリプトまたはブリーフ | HyperFrames | ブリーフを再実行 |
| テストから | Playwright トレース | playwright-recast | はい — テストを再実行 |
キャプチャの上に重ねるタイトルカード、ローワーサード、モーショングラフィックスには HyperFrames を使用してください。
ナレーション、タイミング、納品
コンポジション内部でナレーションを合成しないでください。
rm-voice <project> --script opener --voice af_nova
1 行につき 1 クリップ、それぞれ測定済み、既知の持続時間から SRT が書き出されるため、タイミングは設計上正確であり、コピー編集では変更された部分のみが再合成されます。Kokoro はローカルで実行されるため、API キーは不要であり、未リリースのクライアント製品に関する情報がマシンの外に出ることはありません。
レンダリングとナレーショントラックは異なるクロックで動作します。 playwright-recast はアイドル時間を圧縮します。ナレーションは言葉がかかる時間だけ長くなります。22 秒の字幕トラックを 3.8 秒のレンダリングに焼き付けると、キュー 1 がクリップ全体の間待機し、残りは静かにドロップされます — あたかも機能したように見えます。
rm-mux --video demo.mp4 --audio narration.wav --srt narration.srt -o final.mp4
rm-share final.mp4 --project "Ridgeline Railing"
rm-share は、クライアントがアカウントなしで開き、タイムスタンプ付きのコメントを残せるリンクを返します。rm-share --check で設定されているかどうかを確認できます。
クライアントプロジェクトの前に
export HYPERFRAMES_NO_TELEMETRY=1
テレメトリはデフォルトでオンになっています。プロジェクト名と動画コンテンツが収集されることはありませんが、hyperframes auth login はあなたの HeyGen アカウントメールをあなたの使用状況にリンクし、以前の匿名アクティビティもそれに結合します。 スキャフォールディングにオプトアウトを入れてください。
バージョンを固定してください。HyperFrames は Apache-2.0 ライセンスです — シート数や企業規模の制限はなく、それが私たちのデフォルトである理由です — しかし、pre-1.0 であり、互換性保証なしでほぼ毎日リリースされています。今日レンダリングされるクライアントプロジェクトは、6 か月後も同じようにレンダリングされるべきです。
クレジット
3 レベルのフレーミングと、カット → ストーリーボード → モーショングラフィックスパイプラインは、RoboNuggets の Jay による hyperframes-helper から来ており、CC BY 4.0 のもとで使用されています。これを再共有する場合は、帰属表示を維持してください — それがライセンスの条件です。