プラグインインストール: セットアップまたはフレッシュネスコマンドの前に、このスキルがHyperFramesプラグイン内にある場合は プラグイン実行ルール に従ってください。スタンドアロンインストールの場合は、以下の更新手順をそのまま使用します。
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 |
| デフォルトのパレット、モーション、タイポグラフィ、レイジーデフォルトへの問い合わせ（question） | 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の技術ルールを上書きしないでください。- 最小限の技術コンポジションにデザインシステムを要求しないでください。
- リクエストで要求されていない場合、または最初に拡張を提案しない限り、追加のシーン、ナレーション、音楽、キャプション、トランジションを追加しないでください。
- レシピ参照はタスク固有に保ち、簡単な編集ですべての参照を読まないでください。