1仕組みと動作原理
SKILL.md 自体はルーティングテーブル兼ワークフローの骨格に過ぎず、創作ナレッジはすべて references/ ナレッジカード、palettes/、frame-presets/ アセットへ集約されオンデマンドで読み込まれます。タスク種別に応じて最初に読むカードを決定し、全カードの一括読み込みを防ぎます。
skills/hyperframes-creative/SKILL.md
| Palette-specific color tokens | `palettes/*.md` |
Routing テーブルには約 17 のトピック（house-style/visual-styles/composition-patterns/video-composition/beat-direction/narration/typography/audio-reactive…）が記載され、それぞれがファイルに対応しています。Workflow セクションで「read it first」の対象を規定しています。
「Web サイト感」の排除がコアメソドロジーです。非自明なコンポジションでは house-style と video-composition の 2 枚のカードの事前精読を義務付け、前者が「interpret the prompt, generate real content（プロンプトを解釈し本物のコンテンツを生成する）」と背景／前景レイヤーのレシピを定義します。
skills/hyperframes-creative/SKILL.md
Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
ここでの狙い：「機械的なリスタイル」を「コンセプトの創出」に置き換えること。house-style.md 内の解説文（'This is what turns a literal restyle into a _concept_'）は SKILL.md の導入部に直接反映されています。
デザイン仕様のパースには明確な優先度（frame.md → design.md → DESIGN.md）が設定されています。frontmatter のトークンが規範的な「ブランドの真実（brand truth）」であり、散文は判断のためのコンテキストに過ぎません。
skills/hyperframes-creative/SKILL.md
If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints).
対応する references/design-spec.md より: 'Prose is context — the `##` sections (Overview, The Frame, Composition Rules, …) carry intent, when-to-use, and constraints the tokens can't hold.'
「すぐに使える」ブランドスターターアセットを提供します。12 種類の frame-presets（それぞれ FRAME.md + caption-skin.html + frame-showcase.html を同梱）と 9 種類の palettes を用意し、ワークフローで FRAME.md を丸ごと frame.md として adopt 可能です。
skills/hyperframes-creative/SKILL.md
- Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)
マニフェスト実測による frame-presets には、biennale-yellow/blockframe/blue-professional/bold-poster/broadside/capsule/cartesian/cobalt-grid/code-editorial（woff2 フォントおよび OFL ライセンス同梱）/coral/creative-mode/daisy-days/editorial-forest などのディレクトリが含まれます。
検証可能なアウトプットは 3 つのスクリプトによって支えられています。contrast-report.mjs はレンダリングフレームのコントラスト監査を実行し（@hyperframes/producer + sharp をブートストラップしてヘッドレスでサンプルフレームをキャプチャ）、extract-audio-data.py は numpy/ffmpeg を用いて音声連動構図用のオーディオ周波数帯を事前抽出します。
skills/hyperframes-creative/SKILL.md
- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames. - `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions. - `scripts/package-loader.mjs` — support script for bundled creative tooling.
contrast-report.mjs は実際に importPackagesOrBootstrap([@hyperframes/producer, @hyperframes/core, @hyperframes/core/compiler, sharp]) を呼び出し、createCaptureSession/captureFrameToBuffer を実行します。プロンプト検査ではなく、実際のレンダリングキャプチャパイプラインを駆動してフレームを読み取ります。
境界の規律が SKILL.md に明記されています。本スキルはアニメーションを扱わず（hyperframes-animation へ委託）、hyperframes-core の技術規則を上書きせず、軽微な変更に余計な装飾を加え書き足さず、すべてのカードを一度に読み込みません。
skills/hyperframes-creative/SKILL.md
Do not override `hyperframes-core` technical rules. Do not require a design system for a minimal technical composition. Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
「本スキルは意図的に non-animation である」とし、hyperframes-animation（rules/blueprints/transitions/adapters）と相互補完的な役割分担を行うことで、ナレッジの越境によるモーションルールの不整合を防ぎます。
2コア機能
01デザイン仕様（frame.md/design.md/DESIGN.md）の読み込み、優先度判定、frontmatter のパース
02即座に使える 12 種の frame-preset と 9 種の palette の選定／adopt（ブランド実装）
03コンポジションパターンライブラリ: PiP、text-behind-subject、title card、slide show、data-in-motion など
04ストーリー構成とビート設計: story doctrine、narration スクリプトのペース配分、ビートごとの演出ディレクションとトランジションのタイミング
05音声連動ビジュアルのためのデータ準備: モーションバインド用の音声周波数帯の事前抽出
06レンダリング後のコントラストおよびデザイン整合性レビュー（contrast-report、design-adherence）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | @hyperframes/producer / @hyperframes/core / sharp（contrast-report.mjs 经 package-loader 按需 bootstrap） |
| cli | python3 + numpy + ffmpeg（extract-audio-data.py 解码与频段分析） |
| network | Google Fonts metadata API（找字体时 agent 被指引 curl 查询） |
| network | GSAP CDN（frame-showcase/design-picker 预览 HTML 引 jsdelivr gsap；属产物运行依赖而非 skill 自身外发） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: node skills/hyperframes-creative/scripts/contrast-report.mjs（レンダリングフレームをローカルキャプチャして解析。依存関係不足時
- scripts/ 或 SKILL.md: 外部言語パッケージ依存関係の動的インストールを宣言
- 网络端点: 外部ネットワークアクセスの宣言: fonts.google.com/metadata/fonts（エージェントが案内される任意の curl 実行、/tmp のローカル JSON に保存）
- 本地工作目录: ファイルの読み書きと成果物の出力: クリエイティブ成果物: frame.md/design.md/DESIGN.md およびコンポジション HTML（エージェントがワークフローに従いプロジェクトファイルを出力）
監査ノート： 認証情報の読み取りやシークレットへの接触はありませんが、2 か所の公開ネットワーク通信が存在します。① typography.md がエージェントに `curl -s 'https://fonts.google.com/metadata/fonts'` の実行を明示的に案内（公開フォントメタデータ、任意実行）。② contrast-report.mjs が依存関係不足時に package-loader 経由でユーザー同意を得て npm から @hyperframes/producer/@hyperframes/core/sharp をインストール（公式／公開パッケージ、--ignore-scripts によりライフサイクルスクリプトを抑制）。送信先はいずれも想定内でトークンも含まれないため orange には達せず、「外部送信ありは送信先に応じて分類」に基づき yellow と判定します。通常スクリプトはレンダリングフレーム／音声ファイルを読み取ってローカル出力するのみです。
5二重目の独立検証
- [ok] 『脚本目录无网络外发』 — 对 hyperframes-creative 全部 .mjs/.py/.md 做 http(s) 扫描：命中仅 design-picker/showcase 的 jsdelivr gsap、caption-skin 的 gsap、typography.md 的 fonts.google metadata、design-picker.md 的 localhost 提示——无脚本级外发。
- [ok] contrast-report.mjs 能力真实存在（非提示词） — 源码确认 bootstrap @hyperframes/producer/@hyperframes/core/[email protected] 并调用 createCaptureSession/captureFrameToBuffer/closeCaptureSession，输出 .hyperframes/contrast。
- [ok] frame-presets/palettes 资产计数 — find 实测：frame-presets 含 12+ preset（每套 FRAME.md/caption-skin/frame-showcase，code-editorial 附字体与 OFL）、palettes 9 个 md、references 17 个 md，与 SKILL.md 路由表指向一致。
- [discrepancy] 安全结论有无漏网（CDN 是否被误当无外发） — 第一遍初判『无网络』需修正：产物/预览 HTML 引用 jsdelivr gsap、字体检索指引 curl fonts.google.com——均非 skill 脚本自身外发而是 agent/运行时行为，已如实列入 external_deps 并据以定级 yellow（统一分档：存在公开网络外发即不低于 yellow）。
- [ok] 与动画技能分工声称 — SKILL.md 引言与 Boundaries 两处声明 non-animation 并指向 hyperframes-animation；animation SKILL.md 亦反向声明 creative 管非动画方向，双向一致。
6結論
最適な用途： HyperFrames における非自明なコンポジションのビジュアル／ストーリー／ブランディングフェーズ（マルチシーン、デザイン仕様あり、ブランド要件あり）に最適。hyperframes ルーティング配下の各クリエイティブワークフローがデザイン段階に入る際の必読ナレッジレイヤーです。
不向きな用途： アニメーションの実装詳細（hyperframes-animation へ）、HTML 技術仕様・コントラクト（hyperframes-core へ）、アセット収集（media-use へ）には不適。デザインシステムを必要としない最小限の技術的コンポジションも本スキルをスキップして直接実装すべきです（SKILL.md: 'Do not require a design system for a minimal technical composition'）。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload hyperframes-creative.tar.gz
sha256:
Option B · Copy Guide for Agentc11a1f80c92e6741…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b8328f9573.