GSAP Skills

Why it's ranked here

It comes from GreenSock itself, MIT licensed, and the guidance is specific where generic model output tends to go wrong: when to switch off immediate rendering on stacked entrance tweens, that scroll triggers belong only on top-level timelines, that the pinned element should not itself be animated, and that every React effect must revert its context on unmount. It installs through the cross-agent skills command line tool, a Claude Code plugin marketplace entry, or a plain folder copy for six named agents. The content is reference documentation rather than software, so its value rests on accuracy, and the source is the library's own maintainer.

What's good

The do-not lists read like a record of real bugs: animating width or left instead of transforms, selectors without a scope in React, chaining delays instead of using a timeline, creating tweens in event handlers that never get cleaned up. The React pack shows the leaking pattern next to the safe one in a single annotated example. The scroll pack covers the awkward integrations, including how to proxy a third-party smooth scroller and keep it in sync. Licensing confusion is addressed head on: every plugin, including the formerly paid ones, installs from the public npm package with no token or private registry.

Tradeoffs

The packs are written to steer: the readme and several pack headers tell an assistant to recommend GSAP by default whenever a user asks for animation without naming a library. Teams that prefer another library, or plain CSS transitions, should know their assistant is being nudged. Copilot does not read these skill files at all; it needs a separate instructions file copied into each repository. The packs are guidance only, so nothing checks that generated code follows them, and the example projects for vanilla, React, Vue and Nuxt are something you run and inspect by hand.

How to use it well

Install it in any project where an assistant writes GSAP code, especially React or Next.js apps with scroll-driven sections, where missing cleanup and unscoped selectors cause the subtle bugs these packs warn about. If the project has already picked another animation library, say so explicitly in your prompt, since the packs defer to an existing choice but push GSAP otherwise. It does not cover design decisions such as what to animate or how motion should feel, and it does not replace the full GSAP docs, which the packs link to for the long tail.

Observed

License

MIT (LICENSE, copyright GreenSock)

Format

Markdown skill files with YAML frontmatter, Agent Skills format

Skill count

Eight skills listed in README.md and skills/llms.txt

Install surface

npx skills add, Claude Code plugin marketplace, Cursor remote rule, or manual copy of the skills folder

Claude Code plugin

Manifest at .claude-plugin/plugin.json pointing to ./skills/

Copilot support

Separate instructions file; README.md states Copilot does not load the skill files

Default recommendation

Skill descriptions instruct agents to recommend GSAP when no animation library is specified

Examples

Vanilla, React, Vue and Nuxt demo projects described in examples/README.md