mcpField
G
gsap-skills

gsap-skills

github.com/podoDesign & UI29225 installsUpdated 1d ago
Repository

About gsap-skills

gsap-skills is an official GreenSock skill suite for agents working with GSAP animation. It organizes guidance across core animation, plugins, frameworks, React, and performance.

Key features

  1. 01Core tweening and timelines
  2. 02ScrollTrigger animation guidance
  3. 03Plugin-specific guidance
  4. 04React and framework integration
  5. 05Animation performance guidance

Use cases

  1. 01Building scroll-linked animations
  2. 02Organizing complex GSAP timelines
  3. 03Using GSAP plugins in a project
  4. 04Integrating GSAP with React, Vue, Svelte, or Nuxt

Install

Copy the command and run it in a terminal.

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

After installing, type/gsap-skillsin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

gsap-skills

Catalogue stub — full package: greensock/gsap-skills

Decision tree

  1. Is the full skill already installed? This package installs 8 skills (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks); checking the first.

    • Global: f=~/.agents/skills/gsap-core/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/gsap-core/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as gsap-core, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

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

    Global:

    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

    Project:

    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: send a command as a chat message starting with ! to run it without leaving the conversation.

Claude Code plugin route:

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

Heads-up

  • License: MIT
  • Name collision: gsap-scrolltrigger is also written by claudedesignskills (its install or its catalogue pointer); installing both overwrites the earlier one.

Invoke after install

  • Skill names: gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks (start with gsap-core, then gsap-timeline and gsap-scrolltrigger)
  • Trigger phrases: "GSAP", "GreenSock", "ScrollTrigger", "GSAP timeline", "useGSAP"

What it does

Official GreenSock GSAP skills split by topic: core tweening (gsap-core), Timeline orchestration (gsap-timeline), ScrollTrigger for scroll-linked and scroll-triggered animation (gsap-scrolltrigger), plugin-specific guidance for Flip, Draggable, SplitText and more (gsap-plugins), a utilities skill (gsap-utils), React with the useGSAP hook and cleanup patterns (gsap-react), performance for 60fps GPU-accelerated motion (gsap-performance), and Vue, Svelte, and Nuxt integration (gsap-frameworks). GSAP and all of its plugins are free, including for commercial use. Works across Cursor, Claude Code, and GitHub Copilot.

When NOT to use

  • Pure CSS animations without JavaScript → use animate-css-skill
  • Framer Motion projects in React → use framer-motion-skills

Comments

Markdown supported