1仕組みと動作原理
本体は 6KB に凝縮された GSAP チートシートであり、API サーフェス別（Tween メソッド → vars の主要オプション → transform エイリアス → イージング → defaults → 再生制御 → matchMedia → Timeline → パフォーマンス → リファレンスファイル）に構成され、エージェントが HyperFrames コンポジションを作成する際にその場で参照できるようになっています。
.claude/skills/gsap/SKILL.md
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo).
フローのオーケストレーションやスクリプトのスケジューリングは一切含まず、../hyperframes や make-a-video などのスキルから Step 実行時に参照される知識ベースとして機能します。
「規約」によってエージェントの落とし穴を未然に防止：camelCase のプロパティ名を強制し、transform 文字列の連結ではなくエイリアスを優先、opacity ではなく autoAlpha を優先させます。
.claude/skills/gsap/SKILL.md
Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`). … - **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.
同セクションには x/y/z、xPercent/yPercent、rotation/rotationX、skewX/Y、transformOrigin の対照表も掲載されており、手動の transform 文字列による GSAP の上書き失敗を防ぎます。
Timeline を推奨オーケストレーション手段として位置付け、位置パラメータの4つの記述方法（絶対値、`+=`/`-=` 相対値、ラベル、`<`/`>` アライメント）を提示します。
.claude/skills/gsap/SKILL.md
- **Alignment**: `"<"` — same start as previous; `">"` — after previous ends; `"<0.2"` — 0.2s after previous starts
あわせて addLabel/play(label)/tweenFromTo、コンストラクタ defaults、ネストされた master.add(child, 0)、および play/pause/reverse/restart/time/progress/kill の完全な制御機能を提供します。
パフォーマンス章の基準は「コンポジタ上に留める」こと：x/y/scale/rotation/opacity のみを動かし、レイアウトプロパティの変更を回避。will-change は実際に動く要素のみに付与し、高頻度な更新には quickTo を使用。複数 tween ではなく stagger を活用し、不要になったらクリーンアップします。
.claude/skills/gsap/SKILL.md
Animating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.
末尾には Cleanup および Do Not リスト（レイアウトプロパティのアニメーション… / DOM 存在前の tween 作成 / クリーンアップの省略）が用意され、一般的なアンチパターンが禁止ルールとして明記されています。
アクセシビリティとレスポンシブ対応は gsap.matchMedia() で処理：条件不一致時に自動 revert され、コード例では prefers-reduced-motion と直接連携しています。
.claude/skills/gsap/SKILL.md
Runs setup only when a media query matches; auto-reverts when it stops matching. … reduceMotion: "(prefers-reduced-motion: reduce)",
コード例では duration: reduceMotion ? 0 : 2 と指定されており、視覚効果抑制の環境下でも描画をスキップするのではなく、最初のフレームに即時到達する設計になっています。
references/effects.md では 2 つの即時利用可能なエフェクト（タイプライター、オーディオビジュアライザ）を提供し、すべての効果が HyperFrames の決定論的ルールに準拠することを徹底しています。
.claude/skills/gsap/references/effects.md
All effects follow HyperFrames composition rules — deterministic, no randomness, timelines registered via `window.__timelines`.
オーディオビジュアライザはデータの同期ロードを要求します。ドキュメントには「Do NOT use async `fetch()` to load audio data.」と明記されており、キャプチャエンジンがページ読み込み後に window.__timelines を同期的に読み取る仕様に対応しています。
音声をフレーム単位の可視化データに変換する Python スクリプトを付属：ffmpeg でモノラル 44.1kHz サンプルにデコードし、numpy で RMS と対数周波数帯域の FFT を実行、コンポジションに直接埋め込み可能な JSON を出力します。
.claude/skills/gsap/scripts/extract-audio-data.py
Outputs JSON with RMS amplitude and frequency band data at the target FPS, ready to embed in a HyperFrames composition. … cmd = [ "ffmpeg", "-i", path, "-vn", "-ac", "1", "-ar", str(SAMPLE_RATE), "-f", "s16le", "-acodec", "pcm_s16le", "-loglevel", "error", "pipe:1", ] … result = subprocess.run(cmd, capture_output=True)
デフォルトは 30fps・16 周波数帯域。FFT には 4096 ウィンドウ（44.1kHz で約 10.8Hz/bin）を使用し、周波数範囲 30Hz〜16kHz をカバー。2 パス処理で正規化を行います。
2コア機能
01Tween メソッド早見表：to / from / fromTo / set のセマンティクスと使い分け（set は duration 0 で即時適用）
02vars 主要オプションのリファレンス：duration / delay / ease / stagger / overwrite / repeat / yoyo / コールバック / immediateRender
03transform エイリアス対照表（手動 transform 文字列の回避）＋ 回転方向と相対値の記述法
04イージング一覧とグローバル defaults 設定
05tween のランタイム制御（pause/play/reverse/kill/progress/time）と戻り値の保持要件
06Timeline オーケストレーション一式：作成 + defaults、位置パラメータ、ラベル、ネスト、再生制御
07レスポンシブ ＋ 視覚効果抑制対応：gsap.matchMedia() による自動 revert、reduceMotion を duration に反映する実装例
08パフォーマンス規約：コンポジタ対応プロパティ、will-change 適用規律、高頻度更新用の quickTo、複数 tween に代わる stagger、クリーンアップ
09即時利用可能なエフェクトライブラリ（オンデマンド読み込み）：タイプライター（TextPlugin、推奨 cps 設定付き）とオーディオビジュアライザ
10音声をフレーム単位の RMS/周波数帯域 JSON に変換し、オーディオビジュアライザですぐに利用できるようにするローカルスクリプト
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | GSAP 3.14.2（随仓库 npm ci 安装；上游来自 heygen-com/hyperframes 技能生态） |
| network | cdn.jsdelivr.net（**产物期**：effects.md 给出的示例片段在生成的 HTML 里用 script 标签引 [email protected] 与 TextPlugin；执行 skill 时并不外发） |
| cli | ffmpeg（extract-audio-data.py 用它解码音频为 s16le 管道） |
| package | numpy（脚本内 FFT/RMS 计算，需 pip 安装） |
| cli | Python 3.9+（跑 extract-audio-data.py） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: python3 .claude/skills/gsap/scripts/extract-audio-data.py <audio-or-video>
- 网络端点: 外部ネットワークアクセスの宣言: 成果物フェーズ（評価対象外）：references/effects.md のサンプルコードが生成されるコンポジション HTML 内で cdn.jsdelivr.net を参照
- 本地工作目录: ファイル読み書きおよび成果物出力: audio-data.json（-o/--output で指定、デフォルトはカレントディレクトリに出力；フレームごとの rms + bands 数値データ）
監査ノート： 評価対象は本スキル自身のディレクトリ（SKILL.md + references/effects.md + scripts/extract-audio-data.py + NOTICE.txt の計4ファイル）です。主体は純粋なドキュメントであり、唯一の実行可能コードは ffmpeg によるデコードと numpy FFT を行って JSON を保存するローカルの Python スクリプトのみです。ネットワーク通信、認証情報の読み取り、サブプロセス以外の攻撃サーフェス、ファイル削除操作は一切含まれません。ドキュメント内の jsdelivr CDN は「成果物フェーズの参照」（生成された HTML がブラウザで読み込まれるもので、スキル実行時には送信されない）に該当し、基準に従い評価対象外として reason および external_deps にのみ記載しています。レッド区分の特徴（サンドボックス無効化、TLS ダウングレード、スクレイピング防止回避、任意コード実行面など）も一切存在しません。
5二重目の独立検証
- [ok] 文件清单与类型 — SKILL.md（6.4KB 文档）、references/effects.md（8.8KB 文档）、scripts/extract-audio-data.py（6.5KB 脚本）、NOTICE.txt（228B 声明）；无隐藏文件、无 node_modules、无二进制资产。
- [ok] 网络外发反例搜索 — 目录内 3 条 http 命中：effects.md 两行 jsdelivr script 标签（产物期示例）与 NOTICE.txt 的 https://github.com/heygen-com/hyperframes（出处链接）。fetch( 命中位于『**Do NOT use async `fetch()` to load audio data.**』这句告诫中，非调用。
- [ok] 凭证面反例搜索 — 0 处 env/API_KEY/TOKEN/SECRET 命中；Python 脚本 import 仅 argparse/json/subprocess/sys/numpy。
- [ok] description 覆盖度核对 — 描述里点名的每一项都能在正文定位到专节：Core Tween Methods / Common vars（stagger、defaults）/ Easing / Timelines（position parameter、labels、nesting、playback）/ Performance（transforms、will-change、quickTo）。无夸大。
- [ok] 脚本产物与用法核对 — main() 用 argparse 提供 input/-o/--fps/--bands，默认 audio-data.json、30fps、16 段；输出结构含 duration/fps/bands/totalFrames/frames[{time,rms,bands[]}]，与 effects.md 里展示的 JSON 结构一致。
- [ok] 上游归属与许可 — NOTICE.txt 声明来源 heygen-com/hyperframes（Apache-2.0），并注明 student-kit 只做 runtime-relative 路径与可移植打包；与仓库 skills-lock.json 中 gsap 条目指向的 source 一致。
6結論
最適な用途： 推奨対象：HyperFrames コンポジション内で手動で GSAP タイムラインを記述するエージェントや開発者（特に位置パラメータ、ラベル、ネスト、セッションのパフォーマンス規約を必要とする場合）、およびタイプライターやオーディオビジュアライザ効果の完成済みテンプレートを求めている方。
不向きな用途： 非推奨対象：GSAP の完全なドキュメントやプラグインマニュアルを求めている場合（ScrollTrigger や SplitText などは簡易的な言及のみ）、GSAP 以外の独自アニメーションスタックを使用する場合、およびビルドやレンダリングパイプライン自体の管理を期待する場合（レンダリングパイプラインには関与しません）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload gsap.tar.gz
sha256:
Option B · Copy Guide for Agent68a50bcbc9292840…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0d30152a82.