gsap-frameworks

gsap-frameworks skill の概要

gsap-frameworks は何のためのものか

gsap-frameworks は、Vue、Nuxt、Svelte、SvelteKit、そして React 以外のコンポーネントフレームワーク向けの GSAP skill です。マウント後のライフサイクルのタイミング、セレクタのスコープ、クリーンアップを踏まえたアニメーションコードを作れるようにし、マウント後に正しく動作し、アンマウント時にはきれいに消えるエフェクトを実現します。

どんな人がインストールすべきか

コンポーネントフレームワーク内で Frontend Development のアニメーションを作っていて、一般的なプロンプトでは安定して出しにくい部分まで必要な場合に gsap-frameworks skill を使ってください。onMounted、onUnmounted、onMount、onDestroy、component refs、あるいは単一コンポーネント内での DOM スコープ指定が関わるタスクと相性が良いです。

何を防げるのか

gsap-frameworks の主な価値は、フレームワーク特有のありがちなミスを避けられることです。たとえば、DOM が存在する前にアニメーションを走らせてしまう、ルート変更後も ScrollTriggers や tweens が残り続ける、コンポーネント外の要素まで誤って選択してしまう、といった問題を防ぎます。gsap-frameworks のインストールを比較検討しているなら、ライフサイクル安全性とコンポーネント単位のスコープ管理が必須のときに選ぶ skill です。

gsap-frameworks skill の使い方

まず適切なファイルをインストールして読む

npx skills add greensock/gsap-skills --skill gsap-frameworks でインストールします。次に skills/gsap-frameworks/SKILL.md から読み始めてください。ここにコアとなるルールとフレームワーク別のパターンがまとまっています。repo を clone して作業している場合は、コードを書き始める前に同じ skill フォルダ内の例も確認してください。

あいまいな依頼を使えるプロンプトに変える

良い gsap-frameworks usage プロンプトには、フレームワーク名、アニメーションの目的、そしてクリーンアップ要件を入れるべきです。たとえば、「Vue 3 コンポーネントで、カードがマウント時にフェード＆スライドインするアニメーションを作成し、ref と onMounted を使い、セレクタはコンポーネントのルートにスコープし、アンマウント時にクリーンアップしてください」という指示です。これは単に「このページをアニメーションして」よりずっと有効です。skill が安全なコードを出すには、ライフサイクルと構造の情報が必要だからです。

skill が必要とする入力を含める

優れた gsap-frameworks guide の入力には、通常、フレームワークのバージョン、Composition API か script setup か、何をアニメーションさせるのか、セレクタと refs のどちらを優先したいのか、アニメーションが一度きりか、逆再生可能か、スクロール連動か、といった情報が含まれます。ルート変更、SSR、ネストされたコンポーネントについても触れておくと、その環境で壊れやすいパターンを避けやすくなります。

repository をパターンの参照元として使う

最初に読むべきファイルは SKILL.md です。実装例が必要なら、そこから参照されているフレームワーク別の例、特に Vue と Svelte のパターンを確認してください。実務では、gsap-frameworks for Frontend Development はコード整形のアシスタントとして扱うのが最も効果的です。コンポーネントファイル、望むモーション挙動、クリーンアップ・スコープ・SSR に関する制約を渡してください。

gsap-frameworks skill の FAQ

gsap-frameworks は Vue と Svelte 専用ですか？

いいえ。Vue と Svelte が主な対象ですが、マウントとアンマウントのフェーズを持つ他のコンポーネントフレームワークにもこのガイダンスは適用できます。明確なライフサイクルがあり、コンポーネント単位で GSAP を扱いたいなら、gsap-frameworks はたいてい適しています。

いつ gsap-react を使うべきですか？

React プロジェクトでは gsap-react を使ってください。アプリが React hooks と useGSAP に依存しているなら、gsap-frameworks は適切ではありません。React のパターンは、Vue や Svelte のクリーンアップやスコープ指定とは異なるからです。

すでに GSAP を知っていても必要ですか？

はい、フレームワーク安全な統合が必要なら必要です。GSAP の基本を知っていても、ライフサイクルのタイミング、セレクタのスコープ、後始末まで自動的に解決できるわけではありません。gsap-frameworks は、静的ページではなくコンポーネント内部にアニメーションコードを置く必要があるときに特に役立ちます。

初心者でも使いやすいですか？

はい、コンポーネントと目的のアニメーションを明確に説明できるなら使いやすいです。初心者がつまずきやすいのは、フレームワークの詳細やクリーンアップ条件を省いてしまう場合です。コンポーネント構造と望む動きをきちんと伝えれば、実装可能な形に導いてくれます。

gsap-frameworks skill を改善する方法

効果だけでなくコンポーネントの形を伝える

品質を一段上げる最大のポイントは、コンポーネント構造を具体化することです。どんな要素があるのか、いくつあるのか、条件付きレンダリングかどうかを示してください。「Nuxt コンポーネント内の 3 つの feature card を ref でアニメーションし、きちんと teardown する」といったプロンプトは、「もっとスムーズにして」よりもはるかに良い gsap-frameworks の出力につながります。

ライフサイクルとクリーンアップ要件を明示する

アニメーションが 1 回だけ実行されるのか、ルート変更時に再実行されるのか、離脱時に停止すべきかは、最初に明確に伝えてください。gsap-frameworks は、マウント時のみのセットアップ、context 風のスコープ管理、onUnmounted/onDestroy での明示的なクリーンアップのどれを使うべきか分かっていると、最もよく機能します。

実装を左右する制約を共有する

SSR、hydration、動的リスト、slot content、ネストされた子コンポーネントなど、重要な制約は必ず伝えてください。こうした情報があると、壊れやすいセレクタロジックを避けやすくなり、あなたのケースでは refs、コンポーネントルート、wrapper 要素のどれが安全かも判断しやすくなります。

まず出力を見て、スコープと teardown を確認する

よくある失敗は、見た目は正しくても、セレクタの範囲が広すぎる、あるいはクリーンアップが不十分なコードになることです。最初の回答がかなり近いなら、コンポーネントのスコープをさらに絞る、明示的な teardown を入れる、あるいはあなたのフレームワークの構文に合わせて調整した版を求めることで改善できます。