GSAP AI Skills 是 GreenSock 官方 repo，用來教 AI coding agent 正確寫 GSAP。

它涵蓋 core tweens、timelines、ScrollTrigger、plugins、React/Vue/Svelte 用法，以及效能模式。

重點是：GSAP 目前表示函式庫和 plugins 都可以透過公開的 gsap npm package 使用，不需要 Club membership 或 private registry。

大多數 AI 編輯器可以用 skills CLI 安裝。

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

Claude Code 也可以用 repo 裡列出的 plugin marketplace 指令。

$ /plugin marketplace add greensock/gsap-skills

Cursor 可以把 greensock/gsap-skills 加成 Remote Rule；如果你的環境支援，也可以直接用上面的 npx skills add。

安裝 skills 之後，不要只跟 AI 說「幫我做動畫」。你要告訴它技術棧、要動的元素、動畫順序和限制。

• Stack：vanilla JS、React、Next.js、Vue、Svelte、Webflow 等。
• Target elements：hero title、cards、SVG path、product image、sections。
• Motion style：進場動畫、scroll-linked、pinned section、hover/tap interaction、timeline sequence。
• Constraints：mobile support、reduced motion、unmount cleanup、不要 layout shift。

可以直接用這個 prompt 開始：

• Use the GSAP skills. Build a scroll-triggered landing page animation in React. Use useGSAP, scoped refs, cleanup on unmount, ScrollTrigger, and transforms instead of layout properties. Keep it mobile-safe and include a reduced-motion fallback.

skills 是教 AI 寫出更好的 GSAP 程式，但你的網頁專案本身還是要安裝 GSAP。

$ npm install gsap @gsap/react

如果要用 ScrollTrigger，記得 import 並註冊 plugin。

• import { gsap } from "gsap";
• import { ScrollTrigger } from "gsap/ScrollTrigger";
• gsap.registerPlugin(ScrollTrigger);

Hero 進場動畫：

• Use GSAP skills to animate this hero. Create a timeline where the headline fades up, the subtext follows with a small delay, and the CTA scales in. Use autoAlpha, y, scale, and power2.out. Avoid animating top, left, or layout properties.

Scroll section：

• Use GSAP ScrollTrigger to pin this section while three cards animate in sequence. Use a timeline with scrub: true, responsive start/end values, and call ScrollTrigger.refresh() after images load.

React component：

• Refactor this React animation to use @gsap/react and useGSAP. Scope selectors to the container ref, register plugins once, and make sure animations clean up when the component unmounts.

如果 AI 寫出的動畫能動但很廉價，請它改用 timeline 重建，不要到處塞 delay。

React / Next.js 專案裡，要要求 useGSAP、scoped refs 和 cleanup。很多 GSAP-in-React 問題都來自 global selectors 或沒有清理。

效能方面，要求 AI 優先動畫 transforms 和 opacity，不要隨便動畫 top、left、width、height 這類 layout properties。