hyperframes-creative

プラグインのインストール： HyperFrames プラグイン内でこのスキルを使用する場合、セットアップまたは最新状態の確認コマンドを実行する前に、プラグイン実行ルールに従ってください。スタンドアロンでインストールしている場合は、以下の更新手順に従ってください。

HyperFrames Creative

ブランド、テンポ、スタイル、ナレーション、構成の指針です。hyperframes-core の技術的な仕様が整った後に使用してください。

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

複雑な構成では、まず以下の2つを必ず読んでください。ウェブ制作での直感よりも優先されます。

• references/house-style.md — 「プロンプトを解釈し、実際のコンテンツを生成する」という考え方、安易なデフォルトの一覧、背景／前景レイヤーのレシピが記載されています。単なるスタイル変更を、ひとつの コンセプト に昇華させるためのものです。
• references/video-composition.md — 動画メディアに適したスケール、奥行き、前景のディテールについて説明しています。要素数を一律に決めつけずに、ウェブページのように何もないレイアウトを避ける方法を解説しています。

これらを読まないことが、ありきたりなウェブページ風の出力になる最大の原因です。以下のルーティング表にある任意の項目ではありません。一行を超える編集では、色を選んだり 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/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パッケージのバージョンをブートストラップできます。バンドル済みのCLI／スキルをインストールせずにスキルを実行し、ブートストラップするバージョンを明示的に固定する必要がある場合に限り、HYPERFRAMES_SKILL_PKG_VERSION=<version> を設定してください。

パスを明示して実行します。例：

python <SKILL_DIR>/scripts/extract-audio-data.py <audio-file>

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

境界

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