quiet-editorial-ui

Quiet Editorial UI

このスキルは、適用する HyperFrames ワークフローが決まった後に、ビジュアルレイヤーとして適用します。ユーザーが別途編集上の変更を依頼しない限り、プロジェクトのストーリー、タイミング、映像素材、音声、コピー、承認済みブランドアセットを維持してください。

コントラクトを読み込む

1. まず /hyperframes を読みます。
2. コンポジション HTML を編集する前に /hyperframes-core を読みます。
3. プロジェクトのデザイン仕様の優先順位を確認するため、/hyperframes-creative を読みます。
4. モーションを作成する前に /hyperframes-animation を読みます。
5. 字幕の作成を依頼された場合、またはすでに字幕がある場合は、/media-use の字幕ガイダンスを読みます。

このスキルのディレクトリを <skill-dir> として特定します。必要に応じて、以下のリファレンスを読みます。

• ビジュアルトークンとコンポーネントの文法：references/style-system.md
• レイアウトの選択とプロジェクトへの統合：references/layout-modes.md
• 字幕の作成：references/captions.md
• プラットフォームのセーフゾーンと重なりのルール：references/safe-zones.md
• モーションの語彙：references/motion-language.md
• ライセンス済み Georgia のセットアップ：references/font-setup.md

スタイルを適用する

1. HyperFrames のコンポジションディレクトリを特定します。ブリーフ、ストーリーボードまたはモーションボード、デザイン仕様、トランスクリプト、コンポジションファイル、代表的なフレームを読みます。

2. 顔、ロゴ、映像素材内の UI、重要な映像素材内テキスト、活用できるネガティブスペースを確認します。このスタイルからトーキングヘッドのレイアウトを推測してはいけません。

3. 最初に該当するモードを選択します。

   • available-area：安定した未使用領域に、グラフィックのアイデア全体を配置できます。
   • direct-overlay：映像素材がフレームを占め、グラフィックはその上に配置する必要があります。
   • full-frame：映像素材がない場合、またはビート全体を意図的にグラフィックに割り当てる場合です。

4. 既存の frame.md と競合する場合は、同一のバックアップがすでに存在しない限り、frame.pre-quiet-editorial-ui.md として保存します。次に、assets/frame.md をプロジェクトにコピーし、有効な frame.md とします。承認済みロゴ、コピーのルール、意味上のブランドカラーのみを、その Approved Entities セクションに統合します。タイポグラフィ、サーフェス、余白、階層、字幕、モーションは Quiet Editorial UI が管理します。

5. バンドルされている Inter のファイルを assets/fonts/ からコンポジションの public/fonts/ にコピーします。Georgia はコピーも配布もしないでください。references/font-setup.md に記載されている、ユーザーが提供するファイルを用意してもらいます。

6. レンダリングに影響するコマンドを実行する前に、フォントの事前チェックを行います。

   node <skill-dir>/scripts/preflight.mjs <composition-dir>
   

   事前チェックで Georgia のファイルがない、または無効と報告された場合は中止します。別のセリフ体で黙って代用してはいけません。

7. 選択したレイアウトモードに沿ってビジュアルのスタイルを構築します。各ビートの主役となるアイデアは1つにし、トークンの値をそのまま使用し、映像素材の内容が認識できる状態を保ちます。

8. 字幕が必要な場合は、assets/components/quiet-editorial-caption.html をプロジェクトにコピーし、references/captions.md に従います。配置に確信が持てない場合は、一時的に assets/components/quiet-editorial-safe-zones.html をトップトラックのサブコンポジションとして追加します。納品前に削除するか、非表示にしてください。

9. npx hyperframes lint、npx hyperframes check を実行し、代表的なビートのスナップショットで検証します。フル解像度だけでなく、スマートフォンの画面サイズでも結果を確認します。

制約

• 適用するナラティブワークフローを選んだり、置き換えたりしてはいけません。
• スタイルに合わせることだけを目的に、カット、タイミング、音声、ナレーション、主張、コピーを変更してはいけません。
• 映像素材、話者、固定の話者サイズ、固定の分割画面レイアウトを前提としてはいけません。
• 参照元にある製品固有の名称、ロゴ、トグル、プロンプト、インターフェースの再現、サンプルファイル、ブランド付きアイコンを導入してはいけません。
• 成功を示す緑色を、一般的なブランドアクセントとして使用してはいけません。
• 衝突を解決するために、字幕を記載された最小サイズより小さくしてはいけません。別の安全な配置場所を選んでください。
• ライセンス済み Georgia が使用できない場合、代替のディスプレイ用書体でレンダリングしてはいけません。

同梱アセット

• assets/frame.md：プロジェクト設計の有効な仕様。
• assets/components/quiet-editorial-caption.html：トランスクリプトに同期したキャプションのサブコンポジション。
• assets/components/quiet-editorial-safe-zones.html：削除可能なセーフティオーバーレイ。
• assets/examples/golden-frames.html：3 種類のアスペクト比に対応した中立的なビジュアルベンチマーク。
• assets/fonts/Inter-400-latin.woff2 および Inter-700-latin.woff2：再配布可能な UI フォント。

スキルを変更した後、パッケージの検証を実行してください。

node <skill-dir>/scripts/validate-package.mjs <skill-dir>