mcpField
G
gsap-skills

gsap-skills

github.com/podoデザイン・UI29225 回インストール1 日前に更新
リポジトリ

gsap-skills について

gsap-skills は、GSAP アニメーションを扱うエージェント向けの GreenSock 公式スキル集です。コア機能、プラグイン、フレームワーク、React、パフォーマンスなどのガイダンスを分野別に提供します。

主な機能

  1. 01コアのトゥイーンとタイムライン
  2. 02ScrollTrigger アニメーションのガイダンス
  3. 03プラグイン別のガイダンス
  4. 04React とフレームワーク連携
  5. 05アニメーションのパフォーマンス指針

活用シーン

  1. 01スクロール連動アニメーションの構築
  2. 02複雑な GSAP タイムラインの編成
  3. 03プロジェクトでの GSAP プラグイン利用
  4. 04GSAP と React、Vue、Svelte、Nuxt の連携

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill gsap-skills

インストール後、Claude Code で/gsap-skillsを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

gsap-skills

カタログの概要 — 完全なパッケージ：greensock/gsap-skills

判断ツリー

  1. 完全なスキルはすでにインストールされていますか？ このパッケージは8つのスキル（gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-utils、gsap-react、gsap-performance、gsap-frameworks）をインストールします。最初のスキルを確認してください。

    • グローバル：f=~/.agents/skills/gsap-core/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/gsap-core/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルはgsap-coreとしてインストールされています。それを呼び出して続行してください
    • pointer → ステップ2に進んでください

  2. スコープを検出してから、インストールします。

    [ -e ~/.agents/skills/gsap-skills ] && echo "global" || echo "project"

    グローバル：

    npx skills add greensock/gsap-skills --skill gsap-core gsap-timeline gsap-scrolltrigger gsap-plugins gsap-utils gsap-react gsap-performance gsap-frameworks -g -y

    プロジェクト：

    npx skills add greensock/gsap-skills --skill gsap-core gsap-timeline gsap-scrolltrigger gsap-plugins gsap-utils gsap-react gsap-performance gsap-frameworks -y

    Claude Code： 会話を離れずにコマンドを実行するには、チャットメッセージを!で始めて送信してください。

Claude Code プラグイン経由：

/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills

注意事項

  • ライセンス： MIT
  • 名前の競合： gsap-scrolltriggerはclaudedesignskillsでも配布されています（インストール版またはカタログのポインター）。両方をインストールすると、先にインストールしたものが上書きされます。

インストール後の呼び出し

  • スキル名：gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-utils、gsap-react、gsap-performance、gsap-frameworks（まずgsap-coreを使い、次にgsap-timelineとgsap-scrolltriggerを使ってください）
  • トリガーフレーズ：「GSAP」、「GreenSock」、「ScrollTrigger」、「GSAP timeline」、「useGSAP」

機能

公式のGreenSock GSAPスキルをトピック別に分けています。コアのトゥイーン（gsap-core）、Timelineのオーケストレーション（gsap-timeline）、スクロールに連動するアニメーションとスクロールでトリガーされるアニメーション向けのScrollTrigger（gsap-scrolltrigger）、Flip、Draggable、SplitTextなどのプラグイン固有のガイダンス（gsap-plugins）、ユーティリティスキル（gsap-utils）、useGSAPフックとクリーンアップのパターンを扱うReact（gsap-react）、60fpsのGPUアクセラレーションによるモーションのパフォーマンス（gsap-performance）、Vue、Svelte、Nuxtとの連携（gsap-frameworks）です。GSAPとすべてのプラグインは、商用利用を含めて無料です。Cursor、Claude Code、GitHub Copilotで動作します。

使用しない場合

  • JavaScriptを使わない純粋なCSSアニメーション → animate-css-skillを使用してください
  • ReactのFramer Motionプロジェクト → framer-motion-skillsを使用してください

コメント

Markdown 対応