1仕組みと動作原理

まずフレームワーク共通の3原則（DOM準備完了後に作成 / アンマウント時にkill・revert / セレクタをコンポーネントルートに限定）を提示し、その後に各フレームワークの構文へと落とし込みます。

skills/gsap-frameworks/SKILL.md

- **Scope selectors** to the component root so `.box` and similar only match elements inside that component, not the rest of the page.

機能が実現できる理由: 非ReactフレームワークにはuseGSAPのような統一されたラッパーが存在しないため、ライフサイクルフック + gsap.context(scope)に依存する必要があります。「作成タイミング/クリーンアップタイミング/スコープ」を3原則として抽象化することで、単一の思考モデルでVue/Nuxt/Svelteおよびその他のコンポーネントフレームワークを網羅できます。

Vue 3向けに2つの等価な書き方（Options APIのsetup()と<script setup>）を提供し、実行可能なサンプルプロジェクトを参照して相互検証できるようにします。

skills/gsap-frameworks/SKILL.md

See `examples/vue/` for a runnable Vite + Vue 3 project demonstrating these patterns.

どちらの書き方もonMountedでgsap.context(..., container.value)を作成し、onUnmountedでctx?.revert()を実行します。実行可能なサンプルプロジェクト（examples/vue/、Vite + Vue 3）が存在し、スキルのルールが実際の動作で検証可能です。

Nuxt 4向けに再利用可能なcomposableパターンを提示: よく使うプラグインの一括登録 + 動的importマッピングによる重量級プラグインの遅延読み込み。

skills/gsap-frameworks/SKILL.md

Use a **reusable composable** to register GSAP Plugins and also to lazy load Plugins that are not extensively used in your application:

実装方法: PLUGINS定数リスト + pluginMap（各プラグインを () => import("gsap/Xxx") で定義）+ lazyLoadPlugin<K>()ジェネリック関数（動的import後にregisterPluginを実行し、型付けされたエクスポートを返却）。コンポーネント側では const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP() として利用。バンドルサイズを抑制しつつ型推論も維持します。

SvelteではonMount + クリーンアップ関数の返却を採用: bind:thisでルート要素を取得し、return () => ctx.revert()で破棄を実行します。

skills/gsap-frameworks/SKILL.md

const ctx = gsap.context(() => {

また、Svelte 5でライフサイクルが変わっても原則は同一（「mounted」で作成し「destroyed」で破棄）であることを補足しています。

Reactを明確に対象外としてgsap-reactへ誘導し、同一リポジトリ内で2つのクリーンアップメカニズムが混在して混乱が生じるのを防ぎます。

skills/gsap-frameworks/SKILL.md

For **React** specifically, use **gsap-react** (useGSAP hook, gsap.context()).

役割分担は「useGSAPがあるかどうか」の1点のみで切り分けられます: Reactはhookによる自動破棄を行い、その他のフレームワークはライフサイクルフック + 手動revertを行います。

ライフサイクルのアクション対応表を提供し、「いつ作成し、いつクリーンアップするか」を参照可能なテーブルにまとめます。

skills/gsap-frameworks/SKILL.md

| **Unmount / Destroy** | Call **ctx.revert()** so all animations and ScrollTriggers in that context are killed and inline styles reverted. |

テーブルはMounted / Unmountの2行のみですが、Do Not（禁止事項）として「setup段階でのアニメーション作成」を誤りとして明記し、最も起こりやすいnull refによるクラッシュを排除しています。

フレームワーク内でのScrollTriggerのリフレッシュタイミングをフレームワークのDOM更新プリミティブに紐付け: VueはnextTick、Svelteはtickまたは非同期コンテンツ読み込み完了時を使用。

skills/gsap-frameworks/SKILL.md

Call **ScrollTrigger.refresh()** after layout changes (e.g. after data loads) that affect trigger positions; in Vue/Svelte that often means after the DOM updates (e.g. nextTick in Vue, tick in Svelte, or after async content load).

gsap-scrolltriggerの「レイアウト変更後は必ずrefreshが必要」というルールをフレームワーク固有の言葉に翻訳し、「データは戻ったがアニメーション位置が古いままになる」問題を解消します。

2コア機能

01Vue 3（Options API setupおよび<script setup>）のonMounted/onUnmounted + gsap.context(scope)パターン

02Nuxt 4 composable: プラグインの一括登録 + オンデマンド動的import遅延読み込み（型推論付き）

03Svelte: onMountでクリーンアップ関数を返却、bind:thisによるコンテナバインド、ctx.revert()による破棄

04スコープ分離: gsap.context(callback, scope)によりセレクタをコンポーネントのサブツリー内に限定

05ScrollTriggerライフサイクル連携: STはgsap.contextに登録され、ctx.revert()時にまとめて破棄

06フレームワーク内のリフレッシュタイミング: データ/DOM更新後（nextTick / tick / 非同期読み込み完了）にScrollTrigger.refresh()を呼び出し

07アプリケーションレベルの登録規則: プラグインはアプリ起動時に1度だけ登録し、再レンダリングされるコンポーネント内では登録しない

3外部依存関係

Kind	Dependency / Endpoint
package	gsap（核心 + 各插件子路径）
package	Nuxt / Vue / Svelte（示例工程的宿主框架，动态 import 的映射目标）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部への影響はありません

監査ノート： 純粋な指示型スキル: ディレクトリ内にはSKILL.md（10,621 B）のみが存在し、スクリプトの実行、外部ネットワーク送信、認証情報の読み込み、ファイルの書き込みはありません。外部リンクもありません（URLスキャンで当該ファイルから0件検出）。本文中の import("gsap/...") による動的読み込みマッピングはユーザープロジェクト向けに提示されたコードパターンであり、スキル自体が実行するものではありません。注意点: クリーンアップの規則（ctx.revert()）とスコープ（gsap.context scope）はプロンプトレベルの制約事項であり、実装が漏れるとアンマウント済みのノードをアニメーションが更新してしまう可能性があります（これは正当性の問題であり、セキュリティリスクではありません）。

5二重目の独立検証

[ok] 目录资产面：仅 SKILL.md — skills/gsap-frameworks/ 下唯一文件 SKILL.md（10,621 B）；无 scripts/、references/；URL 扫描 0 条。
[ok] external_deps 逐条核实 — import("gsap/CustomEase") 等动态 import 映射在文件内逐字存在（pluginMap 共 24 项）；Nuxt/Vue/Svelte 依赖来自 examples/nuxt/package.json（"nuxt": "^4.4.2"）等示例工程，非 skill 自带。
[ok] Nuxt composable 代码是否与 examples 一致 — examples/nuxt/app/composables/useGSAP.ts 与 SKILL.md 中的 useGSAP.ts 代码块结构一致（PLUGINS 常量、pluginMap、lazyLoadPlugin 泛型、registerPlugin(ScrollTrigger)），可运行验证。
[ok] Vue/Svelte 写法是否与官方生命周期语义相符 — Vue 用 onMounted/onUnmounted、Svelte 用 onMount 返回值做清理，均为官方推荐的对应钩子；ctx?.revert() 的可选链也避免容器为空时报错。
[ok] 安全反例搜索 — token 扫描：curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 零命中；无 URL、无脚本文件。
[ok] 与 gsap-react 的分工是否重复 — 本文件首段即声明 React 走 gsap-react，并在 Learn More 再次指向；gsap-react 亦声明 Vue/Svelte 走本 skill，互不重叠。
[ok] 元数据与 pin — frontmatter license: MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
[ok] 「lazyLoadPlugin 减少初始包体」是否属实 — pluginMap 用 () => import() 动态导入，仅在调用时拉取并 registerPlugin，确为按需加载模式；原文亦给出用途限定「not widely used in your app」。

6結論

1組の3原則で複数フレームワークをカバーし、Vue/Nuxt/Svelteへの具体的な実装を提供するため、フレームワーク個別のドキュメントを読むよりも学習・保守コストが大幅に低減します。

Nuxtのcomposableパターンにより、登録、型ヒント、バンドルサイズ抑制（動的importマップ + ジェネリックlazyLoadPlugin）を同時に解決します。

ルールには実行可能な参照が存在: examples/vueおよびexamples/nuxtはスキル記述通りの実働プロジェクトであり、実際に起動して検証できます。

ScrollTriggerのリフレッシュタイミングをフレームワーク固有の言語（nextTick/tick/非同期読み込み後）に翻訳し、汎用ドキュメントではカバーしきれない隙間を補完します。

gsap-reactとの境界線が明確であり、同一コードベース内で2つのクリーンアップパラダイムが混同されるのを防止します。

最適な用途： Vue 3、Nuxt、Svelte/SvelteKitおよびその他のコンポーネントベースのフレームワークでGSAPを利用するプロジェクト、特に重量級プラグイン（SplitText/MorphSVG）をオンデマンドで読み込んで初期バンドルサイズを抑える必要があるNuxtアプリケーションに最適です。また、「非Reactフレームワークのアニメーション規約」のレビュー用チェックリストとしても適しています。

不向きな用途： React / Next.jsプロジェクトには不向きです（gsap-reactのuseGSAPを明示的に案内）。ライフサイクルの概念がないjQueryのような従来型のページには不向きです（gsap-core/gsap-scrolltriggerの記法に従ってください）。ビルド設定やバンドラ最適化の提供を期待するシナリオには不向きです（コードパターンのみを提供します）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload gsap-frameworks.tar.gz

sha256: 8c31c95c46ec9b9f…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit aed9cfd327.