スキル

gsap-skills:公式どおりに GSAP アニメーションを書かせる

助手に GSAP のコア API、タイムライン、ScrollTrigger を正しく使わせたい人向け。スキルは公式 npx で入れ、アニメーション庫は公開 gsap パッケージで入れる。

公式ソース · gsap-skills

インストール

npx skills add https://github.com/greensock/gsap-skills

向いている人

プログラミング助手に公式どおり GSAP(GreenSock Animation Platform)を使わせたい人向け。公式:これらは正式な GSAP AI スキルで、正しい使い方を教える。コア API、タイムライン、ScrollTrigger、プラグイン、および React、Vue、Svelte、素の JS、性能を覆う。

より合うのは、すでにアニメーションを書いており、gsap.to() / from() / fromTo()、タイムライン編成、スクロール発火が正しいかを見ようとしている人。この一式を GSAP 実行系そのものにしない。アニメーションライブラリは公開 gsap npm パッケージから入れる。公式:GSAP は百分の百無料で全プラグインを含む。Webflow 買収後、かつての Club プラグイン(SplitText、MorphSVG など)も全員に無料、商用含む。Club 会員、.npmrc、認証トークン、私有リポジトリは不要。

始める前に本機で npx skills add を実行できること。このコマンドを、出ていない他インストーラへ書き換えない。

3分で最初の試行を終える

リポジトリが示したこの1本だけ。先にスキル導入を終え、助手に読み取り照合だけさせる。まだプロジェクトファイルは変えない。

前提条件:この環境で npm/npx を実行でき、助手が新規スキルを読み込める。最初はアニメーションコードを書かず、説明のない私有源にもつながない。

導入先:プロジェクトまたはワークスペースで公式コマンドによりスキルを足す。

npx skills add https://github.com/greensock/gsap-skills 

公式リポジトリ:

https://github.com/greensock/gsap-skills

GSAP 製品ページ:

https://gsap.com/

低リスク起動:導入後、既存の gsap.to() が公式コア API の easing、duration、stagger、defaults を使っているかだけ見させる。先にファイルを直させない。次にタイムラインや ScrollTrigger コードを書くなら、どのファイルを変えるか確認してから実行。

成功の合図:助手が gsap-core の口径で gsap.to() / from() / fromTo() を話し、未記載のスキル名を捏造しないこと。どの助手がこの CLI を使えるかは公式が指す:

https://github.com/vercel-labs/skills#supported-agents

一つの名簿から「これらの助手だけ」と推論しない。

使用例

事例1:本機のコアアニメーション書き方を照合。gsap-core を使う。コア API は gsap.to() / from() / fromTo()、および easing、duration、stagger、defaults。すでにトゥイーンがあり、引数が外れていないか見たい人向け。証拠はこれらの主題まで。完全な関数一覧はない。先に読み取り検査。コードを変えるなら副作用を先に確認。

事例2:本機のスクロールアニメーションを照合。gsap-scrolltrigger を使う。スクロール連動、pinning、scrub、triggers、および refresh と cleanup を覆う。ページにすでにスクロール発火があり、再描画や掃除漏れを見たい人向け。同じく先に検査し、ファイルを変えるか決める。タイムラインスキル gsap-timeline は原文で別行(sequencing、position parameter、labels、nesting、playback)。ScrollTrigger と一つのスキルに混ぜない。

利用の境界

スキル導入は npx skills add https://github.com/greensock/gsap-skills 。GSAP ライブラリは公開 gsap npm パッケージ。同じ一歩にしない。

原文が名指しするスキル行は gsap-core、gsap-timeline、gsap-scrolltrigger だけ。他のスキル名は補わない。

GSAP とかつての Club プラグインは現在無料、商用含む。買収説明:

https://gsap.com/blog/webflow-GSAP/

認証や私有源が要る入れ方をしない。公式は適用言語を排他範囲とは書いておらず、React、Vue、Svelte を同時に使えとも求めていない。