HyperFrames Creative
ブランド、ペース、スタイル、ナレーション、構図の方向性。hyperframes-core による技術的契約が確立された後に使用します。
モーションパターン、シーンブループリント、トランジション、CSSマーカー効果については hyperframes-animation を使用してください。このスキルは意図的に非アニメーションです。
重要な構図には、この2つを最初に読んでください。これらはWebの直感を上書きします：
references/house-style.md— 「プロンプトを解釈し、実際のコンテンツを生成する」、レイジーデフォルトリスト、背景/前景レイヤーのレシピ。文字通りのリスタイルを コンセプト に変えます。references/video-composition.md— 映像メディアのスケール、奥行き、前景の詳細。空のWebページレイアウトを避けながら、普遍的な要素数を押し付けることなく説明します。これらをスキップすることは、出力が一般的でWebページのように見える最大の原因です。以下のルーティングテーブルではオプションの行ではありません。単一行の編集以外では、色を選んだりHTMLを書く前に両方を開いてください。
ワークフロー
- プロジェクトにデザイン仕様がある場合、最初にそれを読み、そのフロントマタートークンをブランドの真実（色、フォント、間隔、トーン、制約）として扱います。読み込むファイル（優先順位
frame.md→design.md→DESIGN.md）とその解析方法（フロントマター＝規範、散文＝コンテキスト）はreferences/design-spec.mdで一度定義されています。そのドキュメントに従って解決・読み込みを行います。 - デザイン仕様がなく、ユーザーがビジュアルディレクションを求めた場合、ルートを選択します：
- 既製のフレームプリセット（オプション）→
frame-presets/（FRAME.mdをframe.mdとして採用；references/design-spec.mdを参照） - 名前付きスタイルやムード →
references/visual-styles.md - 高速デフォルト →
references/house-style.md - 対話型選択 →
references/design-picker.md
- 既製のフレームプリセット（オプション）→
- マルチシーン作業の場合、HTMLを書く前にビートとリズムを計画 →
references/beat-direction.md。シーントランジションについてはhyperframes-animation/transitions/に移動します。 - モーションが多い作業の場合、
references/motion-principles.md（高レベルガードレール）を読み、その後hyperframes-animationに移動してアトミックルールを適用します。
ルーティング
| トピック | 参照先 |
|---|---|
既製のフレームプリセットを frame.md として採用（オプション） | frame-presets/ · references/design-spec.md |
| デフォルトのパレット、モーション、タイポグラフィ、質問するレイジーデフォルト | references/house-style.md |
| 名前付きスタイルプリセット、ムード→スタイルルーティング | references/visual-styles.md |
| パレット固有のカラートークン | palettes/*.md |
| 構図パターン — PiP、テキスト背景後ろ、タイトルカード、スライドショー | references/composition-patterns.md |
| 統計/インフォグラフィックプレゼンテーション | references/data-in-motion.md |
| 自由形式プロンプトの構造化展開 | references/prompt-expansion.md |
| 映像メディアの密度、スケール、色、フレーム構図 | references/video-composition.md |
| ビートごとの方向性、リズム計画、トランジションタイミング | references/beat-direction.md |
| オーサリング後の仕様検証（色、タイプ、コーナー、間隔、奥行き） | references/design-adherence.md |
| 高レベルのモーションガードレールとGSAP品質ルール | references/motion-principles.md |
| フォント選択、ペアリング、レンダリング動画のタイプガードレール | references/typography.md |
| ストーリー教義 — フック言語、証拠より価値、提案としてのストーリーボード | references/story-spine.md |
| スクリプトのペース、トーン、オープニング、数字の発音 | references/narration.md |
| モーションにマッピングされた事前計算済みオーディオバンド | references/audio-reactive.md |
スクリプト
scripts/contrast-report.mjs— レンダリングされたフレームからコントラスト警告を検査します。scripts/extract-audio-data.py— オーディオリアクティブコンポジション用にオーディオバンドを事前抽出します。scripts/package-loader.mjs— バンドルされたクリエイティブツールのサポートスクリプト。
contrast-report.mjs は、最初に現在のプロジェクトからヘルパーパッケージを解決し、その後バンドルされた HyperFrames パッケージバージョンをブートストラップできます。HYPERFRAMES_SKILL_PKG_VERSION=<バージョン> は、バンドルされたCLI/スキルインストールの外部でスキルを実行し、そのブートストラップバージョンを明示的に固定する必要がある場合にのみ設定してください。
リポジトリルートから明示的なパスで実行します。例：
python skills/hyperframes-creative/scripts/extract-audio-data.py <オーディオファイル>
アニメーション分析（animation-map.mjs）は hyperframes-animation/scripts/ にあります。
境界
hyperframes-coreの技術ルールを上書きしないでください。- 最小限の技術的構成にデザインシステムを要求しないでください。
- リクエストが求めるか、拡張を事前に提案しない限り、追加のシーン、ナレーション、音楽、キャプション、トランジションを追加しないでください。
- レシピ参照はタスク固有に保ち、単純な編集ではすべてのリファレンスを読まないでください。