hyperframes-creative

HyperFrames Creative

ブランド、テンポ、スタイル、ナレーション、構成の方向性を定めます。hyperframes-core で技術的な契約を整えた後に使用してください。

モーションパターン、シーンの設計図、トランジション、CSS マーカーエフェクトには、hyperframes-animation を使用してください。このスキルは、意図的にアニメーションを扱いません。

複雑な構成では、まず次の2つを必ずお読みください。ウェブ制作の直感よりも、これらを優先してください。

• references/house-style.md — 「プロンプトを解釈し、実際のコンテンツを生成する」という考え方、安易なデフォルトの一覧、背景／前景レイヤーのレシピです。これにより、単なる見た目の変更ではなく、コンセプト が生まれます。
• references/video-composition.md — 映像ならではの密度、スケール、前景メタデータ（データバー、レジストレーションマーク、等幅フォントの表示など、「生成された」ではなく「作り込まれた」印象を生むディテール、1シーンあたり8～10要素）を扱います。

これらを読み飛ばすことが、ありきたりでウェブページのような出力になる最大の原因です。以下のルーティング表にある任意の項目ではありません。1行を修正するだけでない作業では、色を選んだりHTMLを書いたりする前に、両方を開いてください。

ワークフロー

1. プロジェクトにデザイン仕様書がある場合は、まずそれを読み、フロントマターのトークンをブランドの正として扱います（色、フォント、間隔、トーン、制約）。読むファイルの優先順位（frame.md → design.md → DESIGN.md）と解析方法（フロントマター＝規範、本文＝背景情報）は、references/design-spec.md で定義されています。このドキュメントに従って解決し、読み込んでください。
2. デザイン仕様書がなく、ユーザーがビジュアルの方向性を求めている場合は、次の中から選びます。
   • 既製のフレームプリセット（任意） → frame-presets/（FRAME.md を frame.md として採用します。references/design-spec.md を参照してください）
   • スタイル名またはムード → references/visual-styles.md
   • 手早く決める場合のデフォルト → references/house-style.md
   • 対話形式で選ぶ場合 → references/design-picker.md
3. 複数シーンの作業では、HTMLを書く前にビートとリズムを計画します → references/beat-direction.md。シーンのトランジションについては、hyperframes-animation/transitions/ を参照してください。
4. モーションを多用する作業では、まず高レベルの指針である 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/narration.md
モーションに対応付けた事前計算済みのオーディオ帯域	references/audio-reactive.md

スクリプト

• scripts/contrast-report.mjs — レンダリング済みフレームのコントラスト警告を確認します。
• scripts/extract-audio-data.py — オーディオリアクティブな構成向けに、オーディオ帯域を事前に抽出します。
• scripts/package-loader.mjs — 同梱されたクリエイティブツール用のサポートスクリプトです。

次のように、リポジトリのルートから明示的なパスを指定して実行します。

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

アニメーション分析（animation-map.mjs）は hyperframes-animation/scripts/ にあります。

境界

• hyperframes-core の技術的なルールを上書きしないでください。
• 最小限の技術的な構成にデザインシステムを必須としないでください。
• 依頼に含まれていない限り、または拡張案を先に提示しない限り、シーン、ナレーション、音楽、字幕、トランジションを追加しないでください。
• レシピの参照はタスクに必要なものに絞り、簡単な編集ですべての参照を読まないでください。