1仕組みと動作原理
SKILL.mdは4層の知識のエントリポイントおよびルーターとして機能：アトミックルール（rules-index.mdがrules/<name>.md内の48のレシピをインデックス）→ 複数フェーズのシーンブループリント（blueprints-index.mdが22のブループリントをインデックス）→ transitionsディレクトリ（16ファイル）→ techniques.md、さらに12枚のランタイムアダプターカード。
skills/hyperframes-animation/SKILL.md
All motion knowledge in one skill: **rules** (atomic recipes), **blueprints** (multi-phase scene templates), **transitions** (scene-to-scene), **techniques** (broader motion-design patterns), and **adapters** (per-runtime APIs).
ルーティングテーブルは約30行：「Pick an atomic motion pattern by trigger / tag | rules-index.md」、「Read one blueprint's full recipe | blueprints/<id>.md」など。実測ファイル数：rules/に48個、blueprints/に22個、examples/に13個のHTML、adapters/に12個のmd、transitions/に16個。
デフォルトの作成手法＝アトミックルールの組み合わせ：ブループリントから始めるのではなく、2〜4個のルールを選び単一の一時停止GSAPタイムラインで連結する。より高速でコード量も少なくなると主張。ブループリントはシーンが事前設計されたテンプレートに合致する場合のみ使用。
skills/hyperframes-animation/SKILL.md
Pick 2-4 rules from `rules-index.md`, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.
rules-index.mdの各ルールには固有の規約が付属：単一の一時停止タイムライン、双方向シークセーフ（fromToによる明示的なfrom状態）、決定論的（Math.random/Date.nowの禁止、インデックス派生の疑似乱数）、width/height/top/leftのtween禁止、アニメーション対象要素へのCSS transition禁止など。
すべてのレシピはcoreの決定論的規約によって厳格に制約され、アニメーション層固有のルールを追加：レイアウト定数の事前計算（tween中のgetBoundingClientRect禁止 — レンダラーの並行サンプリングで非同期化するため）、空間運動にはGSAP transformエイリアスのみを使用。
skills/hyperframes-animation/SKILL.md
**Pre-calculated layout constants** — never derive positions from `getBoundingClientRect()` at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.
Critical Constraintsセクションは全文を重複させずにcoreのNon-Negotiable Rulesを1項目ずつ逆参照（「Don't restate the full contract here」）— 層間の責務を一方向に委ねる。
ランタイムアダプター層が実在：7種のランタイム（GSAPデフォルト ＋ Lottie/Three.js/Anime.js/CSS/WAAPI/TypeGPU-WebGPU）がそれぞれグローバル（window.__hfLottie/window.__hfAnimeなど）に登録され、HyperFramesがすべてを一括シーク可能。アダプターカードは各ランタイムのHyperFrames内での登録/シーク規約を提示。
skills/hyperframes-animation/SKILL.md
Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.
ルーティングテーブルにはランタイムごとに読むべきカードを列挙（gsap.md / lottie.md / three.md / animejs.md / css-animations.md / waapi.md / typegpu.md / html-in-canvas-patterns.md / animate-text.md）。
監査機能は実スクリプトによりサポート：animation-map.mjsがwindow.__timelines内の全GSAPタイムラインを読み取り、tweenの列挙、bboxのサンプリング、フラグ計算を行い、コレオグラフィレビュー用のanimation-map.json（デッドゾーン、staggerの一貫性、ライフサイクル警告）を出力。
skills/hyperframes-animation/scripts/animation-map.mjs
Reads every GSAP timeline registered in window.__timelines, enumerates tweens, samples bboxes at N points per tween, computes flags and human-readable summaries. Outputs a single animation-map.json.
package-loader経由で@hyperframes/producer/@hyperframes/coreをインポートし、createCaptureSession（ヘッドレスキャプチャセッション）を実行 — プロジェクト内にパッケージがインストールされている必要あり。ブートストラップは欠落時にのみ同意を要求（npm install --ignore-scripts、固定スペックによる保護）。
依存関係のブートストラップにはセキュリティ設計が存在：package-loader.mjsは固定されたパッケージスペックのみをインストールし、--ignore-scriptsで依存関係のライフサイクルスクリプトを無効化、shell文字列の連結ではなくargv配列でnpmをspawn、install行は表示のみで実行せず、ブートストラップ前にconfirmBootstrapで同意を要求。
skills/hyperframes-animation/scripts/package-loader.mjs
// package-loader — bootstrap optional helper packages only when missing, with // defense-in-depth so a malicious or typo'd dependency can't run on install: // • install runs `npm install --ignore-scripts` — package lifecycle scripts // never execute
同ファイルのコメント：「npm is spawned with an argv array (no shell) — never a built command string」、「installLine strings below are DISPLAY ONLY … never handed to a shell or executed.」
2コア機能
0148個のアトミックモーションルール（テキスト/データ/3D/カーソル/UIデモなどのカテゴリ、タグ/トリガーワードで検索可能）
0222個の複数フェーズシーンブループリント（brand-reveal/social-proofなど、実行可能な正解コードを含む）
03シーントランジションカタログ（transitions/：概要 + カタログ + 各CSSトランジション実装カード）
0412枚のランタイムアダプターカード（GSAP/Lottie/Three/Anime/CSS/WAAPI/TypeGPU/HTML-in-canvas/animate-text）
0524個の名前付きテキストアニメーション効果（外部animate-textスキル経由で統合）
06アニメーションマップ監査（animation-map.mjs：タイムライン列挙/tweenサンプリング/bboxフラグ/JSONレポート）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | @hyperframes/producer / @hyperframes/core（animation-map.mjs 运行时依赖；项目优先，缺失才 bootstrap） |
| network | 产物运行期 CDN 库（gsap/three/animejs 经 jsdelivr 进 composition/示例——作品级依赖，渲染浏览器加载） |
| cli | hyperframes CLI（lint/check/snapshot/render，验证动画产出；命令细节在 hyperframes-cli） |
| package | 外部 animate-text skill（24 个具名文本动画效果的实现方） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: node skills/hyperframes-animation/scripts/animation-map.mjs <composition-di
- scripts/ 或 SKILL.md: 外部言語パッケージ依存関係の動的インストールの宣言
- 网络端点: 外部ネットワークアクセスの宣言: パッケージブートストラップ（依存関係が不足しておりユーザーが同意した場合のみ）：npmレジストリ公式の@hyperframesパッケージ
- 本地工作目录: ファイルの読み書きと成果物の出力: 作成者の成果物：コンポジションのHTML/スタイル/スクリプト（プロジェクト内）
監査ノート： クレデンシャルの読み取りやサードパーティへのデータ外部送信はありません。実行されるのは公式のhyperframesパッケージ（プロジェクト優先、欠落時はユーザー同意の上でnpm install --ignore-scriptsによりブートストラップ）およびローカルのヘッドレスキャプチャであり、成果物の実行時はCDN経由で公開アニメーションライブラリを取得します。削除や破壊的な操作は一切ありません。統一基準「ローカルスクリプト同梱、ローカル設定の書き込み、クレデンシャル非接触」に基づきblueと判定（ネットワークは公式パッケージ/公開CDNのみ、トークン非接触）。
5二重目の独立検証
- [ok] rules-index/blueprints 数量与路由声称一致 — find 实测 rules/ 48 个 md、blueprints/ 22 个 md、examples/ 13 个 html、adapters/ 12 个 md、transitions/ 16 个，与 SKILL.md/rules-index 描述一致。
- [ok] 『7 个运行时适配器』声称（GSAP+Lottie+Three+Anime+CSS+WAAPI+TypeGPU） — adapters/ 目录实测含对应 7 种 + html-in-canvas-patterns + animate-text + gsap 细分 3 卡；TypeGPU 卡存在（WebGPU/WGSL）。
- [ok] package-loader 安全声称（防依赖投毒） — 源码注释与实现复核：pinned spec 断言（assertPinnedPackageSpecs）、--ignore-scripts、argv spawn、display-only installLine、confirmBootstrap 征求同意——逐条命中。
- [discrepancy] animation-map 是否会在无依赖时擅自联网 — 首轮注记偏『项目优先』；复核发现若项目无包且用户同意 bootstrap 会执行 npm install（网络）——非默认路径但确实存在，已在外联 deps/scripts_executed 如实标注并保持 blue（官方包 + consent + --ignore-scripts）。
- [ok] 有无把文档站链接误当外发依赖 — gsap.com/threejs.org/animejs.com 等仅为 adapter 卡内的 API 文档引用（人类阅读），非运行依赖，未列入 external_deps。
6結論
最適な用途： HyperFramesにおけるあらゆるモーション作成（単一ルールから複数フェーズのシーンブループリント、3D/Lottieアセットの統合まで）、既存コンポジションのアニメーション監査（animation-map）、および「ルールライブラリ＋インデックス＋アダプター層」の知識工学構造を参考にしたいスキル作成者に最適。
不向きな用途： アニメーション以外のビジュアル/ブランド/ストーリーテリング領域（→hyperframes-creative）、HTML構造規約（→hyperframes-core）には不向き。TypeGPU/WebGPUなどの高度なアダプターはホストレンダラーのサポートが必要であり、WebGPU環境がない場合は使用不可。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload hyperframes-animation.tar.gz
sha256:
Option B · Copy Guide for Agentf370d7615a306ee2…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b8328f9573.