1仕組みと動作原理
本スキルは HyperFrames の「技術規約」です。HTML をレンダリング可能な動画へと記述するための完全なルールセット（単一の paused タイムライン、`data-*` タイミング属性、`class="clip"`、サブコンポジション、決定論的レンダリングの禁止事項）を提供します。SKILL.md 本文は構築ガイドとして機能し、細部は必要に応じて references/ 配下の 19 枚のカードへと体系化されています。
skills/hyperframes-core/SKILL.md
This skill is the **technical contract** — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in `references/` (index next), read on demand.
references/ 配下の 19 行からなるインデックス表（minimal-composition、data-attributes、tracks-and-clips、sub-compositions、variables-and-media、determinism-rules、storyboard-format、review-loop、production-loop、brief-contract、brief-format、script-format、subagent-dispatch、frame-worker-core、tailwind など）。
コアモデル：コンポジション = HTML ファイル。DOM は `data-*` 属性を用いてタイミングを宣言し、コンポジションごとに厳密に 1 つの `gsap.timeline({ paused: true })` を `window.__timelines["<id>"]` に登録します。レンダリング長はルートの `data-duration` を基準とします（タイムラインの長さではありません）。
skills/hyperframes-core/SKILL.md
Each composition registers **exactly one** `gsap.timeline({ paused: true })` at `window.__timelines["<id>"]` (key = root `data-composition-id`).
付随規則：Render length is the root's `data-duration`, **not** the timeline's length——超過分は切り捨てられ、早く終了した場合は最終フレームで静止します。ランタイムはインラインスクリプトの実行前にレジストリを構築します。
機能の対象には実際の lint ルールセットが含まれます。SKILL.md は lint で検出可能な落とし穴（gsap_css_transform_conflict、media_crossorigin_breaks_preview、video_nested_in_timed_element、media_missing_id など）を網羅し、lint エラーによって layout や contrast の監査も連動して無効化されることを警告します。
skills/hyperframes-core/SKILL.md
Never put `crossorigin` on `<video>`/`<audio>`. `lint` rejects it unconditionally with `media_crossorigin_breaks_preview` (error), including for canvas/WebGL/WebAudio readback. There is no suppression.
これらの規則は packages/core および packages/engine の実際のコンパイラ／バリデータに対応しています（SKILL 内で packages/core/src/compiler/compositionAssembly.ts の hasTemplate ゲートを参照してアセンブラの挙動を説明）。SKILL は実装層ではなく規約層です。
決定論的レンダリングは（推奨事項ではなく）厳格なルールです。レンダリング時のクロック、シードなしの Math.random、ネットワークアクセス、入力状態の参照は禁止、`repeat: -1` は禁止、clip 要素に対する display や生 visibility のトゥイーンは禁止、body テキスト内の `<br>` は禁止です。
skills/hyperframes-core/SKILL.md
No render-time clocks / unseeded `Math.random` / network / input-state; no `repeat: -1` (use a finite count).
SKILL は「lint が検出するもの」と「自動ゲートが見逃す可能性のある潜在的バグ（silent bugs automated gates may miss）」の 2 段階に分類し、自動化でカバーできない規則（video/audio に対するフラットクエリ、アセンブル後ページにおけるグローバル一意な ID、シェーダートランジションパス下でルートの fill が破棄される問題など）を明記しています。
サブコンポジションのアセンブリ規約はファイル構造レベルまで厳密に定義されています。スタンドアロンのルートは `<template>` でラップしてはならず（lint エラー standalone_composition_wrapped_in_template）、サブコンポジションは必ず `<template>` でラップし style/script を template 内に配置しなければなりません（hasTemplate ゲートがファイル先頭の style/script を破棄するため）。また、host、inner、timeline key には同一の ID を使用します。
skills/hyperframes-core/SKILL.md
for a **templated** sub-composition the assembler drops the file's own `<head>` `<style>`/`<script>` (`packages/core/src/compiler/compositionAssembly.ts`, the `hasTemplate` gate), so put `<style>`/`<script>` **inside** the template.
挙動の根拠としてソースコードのパスを直接引用しています。スキルのドキュメントとコンパイラ実装を同一リポジトリで同期進化させ、ドキュメントの乖離を排除しています（同セクションにはフレームインジェクションの `data-hf-render-id` メカニズムや `<source>` 子要素の例外も記載）。
検証ループは実際に機能し、段階的に構造化されています。`npx hyperframes check` で lint / runtime / layout / motion / contrast の 5 種類を一括実行し、snapshot でフレームを抽出して目視確認、`preview --background` で人間によるレビューを提供し、render はユーザー承認を得てから実行します。
skills/hyperframes-core/SKILL.md
- [ ] `npx hyperframes check` passes (0 findings across lint, runtime, layout, motion, and contrast) - [ ] Projects with sub-compositions: `npx hyperframes snapshot --at <midpoints>` and eyeball each frame
「render はユーザー承認後のみ実行する」というゲートがコア規約に組み込まれており、エコシステム内の music-to-video や product-launch といったワークフローの Gate 構造と一貫性を保っています。
2コア機能
01最小限のレンダリング可能コンポジション骨格のガイダンス（スタンドアロンルート、sized box、clip + tween）
02`data-*` タイミング／トラック／メディア属性のリファレンス表と `class="clip"` のセマンティクス
03サブコンポジションのアセンブリ（ホスト属性、`<template>`、インスタンス単位の変数、アニメーション境界）
04決定論的レンダリング規則とシークセーフなタイムライン構築（単一タイムライン、`data-duration`、有限 repeat、実行時計測の排除）
05クリエイター向け編集レシピ（cut、trim、reorder、retime、freeze、camera、mask、crossfade、audio）
06計画・スクリプト形式（STORYBOARD.md / SCRIPT.md / BRIEF.md 規約）と review-loop / production-loop フロー
07frame-worker ロール規約とサブエージェントディスパッチのプリミティブ（物語生成ワークフロー間で共有）
085 つの検証ゲート：lint / runtime / layout / motion / contrast ＋ snapshot 目視検査 ＋ preview
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | hyperframes CLI（check/snapshot/preview/render；命令细节在 /hyperframes-cli） |
| network | GSAP 经 CDN 进 composition（示例/骨架引 jsdelivr gsap；渲染时在 headless 浏览器加载——产物运行依赖，非 skill 自身外发） |
| package | @hyperframes/core / engine（同仓 packages/，真实校验/装配/渲染实现） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: npx hyperframes check / snapshot / preview --background / render（ローカル CLI: lin
- 网络端点: 外部ネットワークアクセスの宣言: レンダリングおよびプレビュー時、コンポジションは記述内容に従って CDN（jsdelivr。生成物レベルの依存関係であり、vendor 化により回避可能）から gsap などのランタイムライブラリを取得します
- 本地工作目录: ファイルの読み書きと成果物出力: 作成者の出力物: index.html / compositions/*.html / STORYBOARD.md / SCRIPT.md / frame.m
監査ノート： 純粋なローカル規約・ファイル読み書きスキルです。認証情報の読み取りやサードパーティへの外部送信は行いません。公式の hyperframes CLI によるローカルでの lint/check/snapshot/preview/render（render にはユーザー承認が必要、preview はローカルサービスプロセスを保持）を実行し、成果物はプロジェクト内の HTML や計画ファイルとなります。唯一発生するネットワーク通信は、実行時に CDN（jsdelivr）から gsap などの公開ライブラリを取得する作品レベルの依存関係（ローカルに vendor 化可能）および CLI 公式チャネルの更新のみであり、トークンや秘密鍵を扱うことは一切ありません。
5二重目の独立検証
- [ok] lint 规则名与真实校验器对应 — SKILL.md 引用的编译器路径 packages/core/src/compiler/compositionAssembly.ts 在仓库 packages/core 下实测存在（仓库级 glob 复核）；规则命名风格与 .oxlintrc/engine 校验一致。
- [discrepancy] 『document.fonts.ready 内构建可接受』与『禁 async 构建』是否矛盾 — 首轮将两条规则并置易误读：SKILL.md 正文允许在 async callback（fonts.ready）里构建但『register only after the build completes』；animation SKILL.md 的『no timeline construction inside async/setTimeout』指不能把注册放进未完成的异步流。两条实质一致（注册须在构建完成后同步完成），已在 how_it_works 注明而非判定矛盾。
- [ok] preview 进程存活行为 — SKILL.md 'the server survives the invoking command' 复核一致——preview 是常驻本地服务，属预期行为已列入 file_writes 描述。
- [ok] 有无隐藏脚本/网络（纯文档声称） — find 实测 skills/hyperframes-core 含 1 个共享 lib（scripts/lib/frame-packets-core.mjs，packet 数据组装，无 IO 外发）；无网络代码。
- [ok] 与其它 skill 的契约引用一致性 — music-to-video frame-worker.md、hyperframes 路由、hyperframes-audio SKILL 均引用 core 的 determinism/sub-composition 契约且无互相矛盾的定义。
6結論
最適な用途： HyperFrames コンポジションを記述するすべてのエージェントセッション（HTML を記述する前に確認すべき必須規約層）、カットやクロスフェードなどの編集レシピを必要とするクリエイター用途、および「ドキュメントが規約であり、規約が lint 可能である」設計パラダイムを理解したいスキル作成者に適しています。
不向きな用途： コンポジション記述を必要としない用途（純粋な音声ミックス → audio、素材調達 → media-use、純粋なビジュアルディレクション → creative）には適していません。コマンド操作の詳細（レンダリング／公開／Studio）は hyperframes-cli、ランタイム API の詳細（GSAP / Lottie / Three）は hyperframes-animation/adapters が担当します。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload hyperframes-core.tar.gz
sha256:
Option B · Copy Guide for Agent74bec24a87c21ea7…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b8328f9573.