HyperFrames Creative
ブランド、ペーシング、スタイル、ナレーション、コンポジション（構図）の方向性を定義します。hyperframes-core からの技術的な契約が整った後に使用してください。
モーションパターン、シーンの設計図、トランジション、CSS マーカーエフェクトについては、hyperframes-animation を使用してください。このスキルは意図的にアニメーションを扱いません。
重要でないコンポジションの場合でも、まず以下の 2 つを必ず読んでください。これらはウェブの直感を上書きします:
references/house-style.md— 「プロンプトを解釈し、本物のコンテンツを生成する」方法、デフォルトの遅延リスト、背景/前景レイヤーのレシピについて。これは文字通りのスタイル変更を コンセプト に変えるものです。references/video-composition.md— ビデオメディアにおけるスケール、奥行き、前景の詳細について。空のウェブページのようなレイアウトを避ける方法を、普遍的な要素数を強制せずに説明します。これらをスキップすることは、一般的でウェブページのような出力を生む最大の原因です。これらは以下のルーティングテーブルにおけるオプションの行ではありません。1 行の編集を超える作業では、色を選んだり 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=<version> は、バンドルされた CLI/スキルインストールの外部でこのスキルを実行し、そのブートストラップバージョンを明示的に固定する必要がある場合にのみ設定してください。
リポジトリルートから明示的なパスを指定して実行してください。例:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
アニメーション分析 (animation-map.mjs) は hyperframes-animation/scripts/ にあります。
境界
hyperframes-coreの技術ルールを上書きしないでください。- 最小限の技術的構成にデザインシステムを要求しないでください。
- リクエストが明示的に求めていない限り、または最初に拡張を提案しない限り、シーン、ナレーション、音楽、キャプション、トランジションを追加しないでください。
- レシピ参照はタスク固有に保ち、簡単な編集のためにすべての参照を読まないでください。