GSAP AI Skills

What It Does

gsap-skills is the official AI skill pack from the GreenSock organization (now owned by Webflow) for the GSAP animation library. It ships eight Agent Skills format (agentskills.io) SKILL.md files that teach coding agents how to use GSAP correctly: core tweens and easing, timelines and the position parameter, ScrollTrigger, the plugin catalog, the gsap.utils helpers, React integration with useGSAP, performance, and Vue/Svelte/Nuxt framework patterns. It targets front-end developers who want their AI coding assistant to produce correct GSAP code instead of hallucinating deprecated or paid-tier APIs. The repo also ships runnable Vite reference projects for vanilla JS, React, Vue, and Nuxt, plus GitHub Copilot instructions (a repo-wide file and two path-specific instruction files) for the one major agent host that does not load SKILL.md files natively.

The Good

The documented API is verifiably accurate against the real package. This is the core claim for any library skill and it holds completely. After installing the real gsap 3.15.0 and @gsap/react from npm, a script exercised every method the eight skills teach: all 9 core methods (gsap.to/from/fromTo/set/timeline/defaults/matchMedia/matchMediaRefresh/quickTo), all 16 gsap.utils helpers (clamp, mapRange, normalize, interpolate, random, snap, toArray, selector, wrap, wrapYoyo, pipe, shuffle, distribute, getUnit, unitize, splitColor), all 6 ScrollTrigger statics (create, batch, scrollerProxy, refresh, getAll, getById), and all 9 timeline instance methods (play, pause, reverse, restart, progress, time, kill, addLabel, tweenFromTo). Pass rate was 72 of 72. Every plugin the gsap-plugins skill documents (Flip, Draggable, InertiaPlugin, Observer, SplitText, ScrambleTextPlugin, DrawSVGPlugin, MorphSVGPlugin, MotionPathPlugin, MotionPathHelper, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2DPlugin, PhysicsPropsPlugin, GSDevTools, PixiPlugin, ScrollToPlugin) imported cleanly from the public gsap package. No documented API was missing or wrong.

The "GSAP is 100 percent free" claim is real and verified. Since Webflow's acquisition of GSAP, the formerly Club-only plugins (SplitText, MorphSVG, DrawSVG, and the rest) ship in the public gsap npm package with no auth token, no .npmrc, and no private registry. The skills state this explicitly in the README, in skills/llms.txt, and in a dedicated "Licensing and Install" section of gsap-plugins, and the install test confirms it. This matters because agents trained on older GSAP docs routinely hallucinate the old paid-tier setup; this skill actively corrects that.

The content quality is exemplary for a vendor pack. Each skill opens with a "When to Use This Skill" routing section and explicit "Related skills" cross-references, includes dense config-option tables (the ScrollTrigger table covers 18 properties with types; SplitText covers 16), marks version-specific behavior inline ("v3.11+", "v3.13.0+", "v3.14+"), and ends with a paired "Best practices" and "Do Not" section. The "Do Not" lists name real failure modes: putting ScrollTrigger on a child tween instead of the timeline, using scrub and toggleActions together, forgetting immediateRender: false when stacking from() tweens, animating layout properties instead of transforms, and forgetting ScrollTrigger.refresh() after DOM changes. These are the actual mistakes agents make, and the skills call them out by name.

The install path works end to end across 51 agent hosts. The recommended npx skills add https://github.com/greensock/gsap-skills --all command installed all eight skills into 51 distinct agent host directories, including .hermes/skills/, .claude/skills/, and the full skills CLI host set. Each installed SKILL.md carried correct frontmatter (name, description, license). The repo also ships valid .claude-plugin/plugin.json, .claude-plugin/marketplace.json (against the Anthropic marketplace schema), and matching .cursor-plugin/ manifests, so the two plugin-marketplace install paths are wired correctly.

The example apps build and follow the skills' own patterns. The React example (examples/react/, Vite 5 + React 18 + @gsap/react 2.1.2) installed and built clean: 34 modules transformed, 215.14 KB output (74.23 KB gzip), 435 ms. Its App.jsx uses useGSAP() with a scope and gsap.registerPlugin(useGSAP), which is exactly the pattern the gsap-react skill teaches as the preferred approach. The examples are not decorative; they are runnable reference implementations of the skill guidance.

Multi-agent conventions are handled correctly. CLAUDE.md and GEMINI.md are symlinks to a single AGENTS.md (the now-standard deduplication pattern), the skills include trigger terms in skills/llms.txt for agent routing, and GitHub Copilot (which does not load SKILL.md) gets a repo-wide .github/copilot-instructions.md plus two path-specific instruction files with correct applyTo glob frontmatter (react.instructions.md applies to /*.tsx, /*.jsx, /components/; scrolltrigger.instructions.md applies to /*scroll*, /*ScrollTrigger*).

The Bad

There are no releases, tags, or changelog. The plugin.json files declare version 1.0.0, but the GitHub repo has zero tags and zero releases, and there is no CHANGELOG.md. For a skill pack that teaches version-specific behavior (it references v3.11+, v3.13.0+, v3.14+ GSAP features), the absence of any version history means a consumer cannot tell when the skills were last updated to track GSAP releases, and skills update has no semver anchor to diff against. The only signal is the pushed_at timestamp.

The README undersells the portability and omits Hermes by name. The "Clone / copy" install table lists six agents (Claude Code, Cursor, OpenCode, OpenAI Codex, Google Antigravity, Pi) and their skill directories. It does not mention Hermes Agent or OpenClaw, even though the skills CLI installs correctly into .hermes/skills/ (verified) and the pack works fine as generic Agent Skills. A Hermes user reading the README would not know the skills are reachable without going through the generic npx skills add path. Given that the skills CLI actually supports 51 hosts, the six-row table undersells the real coverage.

The Nuxt composable example has a duplicate TypeScript declaration. The useGSAP.ts composable in gsap-frameworks/SKILL.md (and in examples/nuxt/app/composables/useGSAP.ts) declares type Plugins twice: once as (typeof PLUGINS)[number] after the PLUGINS array (line 130) and again as keyof PluginMap after the pluginMap object (line 161). TypeScript would reject the second declaration as a duplicate identifier if the file were type-checked as written. The code otherwise works (the second declaration is the one actually used by lazyLoadPlugin), but a copy-paste of the example into a strict project fails type-checking until one declaration is removed.

There is no CI and no repo-level test suite. The .github/ directory contains only Copilot instruction files; there is no .github/workflows/. The only validation is the example apps, which are not wired to run in CI. For a skill pack whose entire value is API accuracy, there is no automated guard against the skills drifting from the GSAP API as GSAP ships new versions. The 72-of-72 API check GearScope ran is the kind of test that belongs in the repo.

No SECURITY.md and no per-skill version fields. The skills correctly self-assess risk as LOW (GSAP is a browser animation library with minimal security surface), but there is no formal SECURITY.md. None of the eight skills declares a per-skill version field in its frontmatter; the AGENTS.md authoring guide does not require it, but the Anthropic skill spec allows it and it would help track per-skill updates independently of the monolithic 1.0.0.

Smoke Test Results

Testing ran on the host (macOS 26.5.2, aarch64, Node 24.13.1, npm 11.8.0). The repo was cloned with git clone --depth 1 (44 tracked files, 444 KB). Structural validation ran over all eight skills and both plugin manifests. Functional verification installed the real gsap 3.15.0 and @gsap/react npm packages and exercised the documented API surface, then ran the recommended skills CLI install and built the React example.

Run A. Fresh clone, structural validation

$ git clone --depth 1 https://github.com/greensock/gsap-skills.git
PASS - cloned, 44 files (excl .git), 444 KB

$ python3 /tmp/gsap_validate.py
PASS - 24 of 24 structural checks:
 - 8 skill directories discovered (gsap-core, gsap-timeline, gsap-scrolltrigger,
 gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks)
 - 8 of 8 SKILL.md frontmatter name fields match parent directory
 - 8 of 8 declare description under the 1024-char limit
 - 8 of 8 declare license: MIT
 - 8 of 8 bodies under the ~500-line guideline (longest: gsap-plugins at 434)
 - 4 of 4 plugin manifests (.claude-plugin, .cursor-plugin x2) valid JSON
 - CLAUDE.md and GEMINI.md symlinks resolve to AGENTS.md
 - all gsap-* cross-references between skills resolve to real skill dirs
 - llms.txt indexes all 8 skills with trigger terms

Pass rate: 24 of 24. The skill files are structurally clean. Frontmatter is consistent, cross-references resolve, and both plugin-marketplace manifests parse.

Full fresh log ->

Run B. Install path (with deps)

$ cd /tmp/gsap-api-check && npm install gsap @gsap/react
PASS - added 3 packages in 1s, 0 vulnerabilities

$ npx -y skills@latest --version
PASS - 1.5.21

$ npx -y skills@latest add https://github.com/greensock/gsap-skills --all --copy
PASS - "Done!" - all 8 skills installed into 51 agent host directories

$ ls /tmp/.hermes/skills/gsap-core/SKILL.md
PASS - SKILL.md present, correct frontmatter (name: gsap-core, license: MIT)

Pass rate: 4 of 4. This is the canonical install-correctness verdict. The recommended skills CLI path works non-interactively with --all, and the skills land in the right per-agent directories (verified .hermes/skills/, plus 50 other hosts) with intact content.

Full with-deps log ->

Run C. Functional verification (API accuracy and example build)

$ node gsap_api_check.mjs (gsap 3.15.0 + @gsap/react)
PASS - 72 of 72 documented APIs exist:
 - 9 core methods (gsap.to/from/fromTo/set/timeline/defaults/matchMedia/...)
 - 16 gsap.utils helpers (clamp, mapRange, normalize, interpolate, random, ...)
 - 19 plugins importable from public pkg (Flip, Draggable, SplitText, MorphSVG, DrawSVG, ...)
 - 6 ScrollTrigger statics (create, batch, scrollerProxy, refresh, getAll, getById)
 - useGSAP hook exportable from @gsap/react
 - 9 timeline instance methods (play, pause, reverse, restart, progress, time, kill, ...)

$ cd examples/react && npm install && npm run build
PASS - vite v5.4.21 build: 34 modules, dist/assets/index.js 215.14 KB (74.23 KB gzip), 435 ms

Functional pass rate: 73 of 73 (72 API checks plus 1 clean build). Every method the skills teach was confirmed against the real package, and the reference React app compiles.

Full functional log ->

What the runs tell you

The runs say this is a reference-quality vendor skill pack, not a marketing exercise. The structural layer is clean (24 of 24), the install layer works across every host the skills CLI supports (including Hermes), and the functional layer is where it stands out: a 72-of-72 API accuracy check against real GSAP 3.15.0, with all formerly-paid plugins confirmed importable from the public package. The only thing the smoke test could not exercise is ScrollTrigger behavior inside a real browser viewport (the API existence and example build cover the rest).

Setup Walkthrough

1. Install all eight skills at once with the skills CLI: npx skills add https://github.com/greensock/gsap-skills --all. The CLI auto-detects your installed agent. Use --agent to target one explicitly (e.g. --agent hermes).
2. For Claude Code, use the plugin marketplace instead: /plugin marketplace add greensock/gsap-skills, then install from the marketplace.
3. For Cursor, add a Remote Rule pointing at greensock/gsap-skills, or use the skills CLI.
4. For GitHub Copilot (which does not load SKILL.md), copy .github/copilot-instructions.md and the .github/instructions/ path-specific files into your project repo.
5. Verify by loading the relevant skill in your agent and asking for a GSAP animation. The skills route on trigger terms in skills/llms.txt (e.g. "scroll animation" routes to gsap-scrolltrigger, "React animation" routes to gsap-react).

Post-install gotcha: the README's clone-and-copy table lists only six agent directories and omits Hermes and OpenClaw by name, but the skills CLI install covers both. If you install by hand-copying into ~/.hermes/skills/, copy the eight skills/gsap-*/ directories directly; no build step is required because the skills are pure markdown.

Alternatives

1. The official GSAP docs at gsap.com/docs - the source these skills are distilled from. Prefer the docs when you need the exhaustive API reference; prefer the skills when you want an agent to load the correct patterns automatically without you pasting doc links into context.
2. addyosmani/agent-skills - the meta-list of agent skills. Useful for discovering other front-end skill packs, but it is a directory, not a GSAP reference. Prefer gsap-skills for actual GSAP guidance.
3. Hand-written .cursorrules or AGENTS.md GSAP notes - some teams maintain their own. gsap-skills is more complete and kept in sync with GSAP by the vendor, so it is a strict upgrade over a one-off rules file unless your project uses a private fork of GSAP.