gsap-skills

Official AI skills for GSAP. These skills teach AI coding agents how to correctly use the GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.

Skills follow the Agent Skills format and work with the skills CLI (Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, and others).

Installing

These skills work with any agent that supports the Agent Skills standard, including Claude Code, Cursor, and others.

Claude Code

Install using the plugin marketplace:

/plugin marketplace add greensock/gsap-skills

Cursor

Install from the Cursor Marketplace or add manually via Settings > Rules > Add Rule > Remote Rule (Github) with greensock/gsap-skills.

npx skills

Install using the npx skills CLI:

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

Clone / Copy

Clone this repo and copy the skill folders into the appropriate directory for your agent:

Agent	Skill Directory	Docs
Claude Code	~/.claude/skills/	docs
Cursor	~/.cursor/skills/	docs
OpenCode	~/.config/opencode/skills/	docs
OpenAI Codex	~/.codex/skills/	docs
Pi	~/.pi/agent/skills/	docs

Skills

Skill	Description
gsap-core	Core API: gsap.to() / from() / fromTo(), easing, duration, stagger, defaults
gsap-timeline	Timelines: sequencing, position parameter, labels, nesting, playback
gsap-scrolltrigger	ScrollTrigger: scroll-linked animations, pinning, scrub, triggers, refresh & cleanup
gsap-plugins	Plugins: ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG & physics plugins, CustomEase, EasePack, GSDevTools, etc.
gsap-utils	gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, selector, wrap, pipe, and other helpers
gsap-react	React: useGSAP hook, refs, gsap.context(), cleanup, SSR
gsap-performance	Performance: transforms over layout props, will-change, batching, ScrollTrigger tips

Structure

gsap-skills/
  README.md
  AGENTS.md          # Guidance for agents editing this repo
  .github/
    copilot-instructions.md   # Repo-wide instructions for GitHub Copilot
    instructions/             # Path-specific Copilot instructions
      react.instructions.md
      scrolltrigger.instructions.md
  .claude-plugin/    # Claude Code plugin config (plugin.json, marketplace.json)
  .cursor-plugin/    # Cursor plugin config (plugin.json, marketplace.json)
  assets/            # Logo and icon assets (e.g. gsap-green.svg, gsap-icon-square.svg)
  skills/
    gsap-core/       SKILL.md
    gsap-timeline/   SKILL.md
    gsap-scrolltrigger/ SKILL.md
    gsap-plugins/    SKILL.md
    gsap-utils/      SKILL.md
    gsap-react/      SKILL.md
    gsap-performance/  SKILL.md

GitHub Copilot

Copilot does not automatically use Cursor/Claude skill files. To give GitHub Copilot GSAP-aware guidance in a repo that uses this project (or in this repo), use Copilot’s own instruction files:

• Repository-wide: .github/copilot-instructions.md — imports, timelines, transforms, from()/fromTo(), ScrollTrigger, React, cleanup.
• Path-specific: .github/instructions/ — react.instructions.md (React/JSX/TSX), scrolltrigger.instructions.md (scroll-related files). These apply when the file path matches the configured globs.

The instruction files are kept concise and actionable (bullets, not full reference) so Copilot can use them reliably; GitHub’s code review feature only uses the first 4,000 characters of each file. For full guidance (config tables, examples, Do Not / Best practices), use the skills in skills/ with an agent that supports the Agent Skills format (Cursor, Claude Code, etc.), or install this repo as a skill.

Copy or adapt the .github/ files into your repository so Copilot uses them. See GitHub’s custom instructions docs.

Compatibility

• skills CLI — installs into Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, and 40+ agents
• Agent Skills spec — SKILL.md format and discovery
• GitHub Copilot — use .github/copilot-instructions.md and optional .github/instructions/*.instructions.md (included in this repo)

License

MIT