gsap-skills：讓 AI Agent 幫你寫規範的 GSAP 網頁動效

如果你經常讓 Cursor 或 Claude Code 幫你手搓前端動畫，大機率見識過 AI 那些啼笑皆非的「古董程式碼」。它可能一邊教你 import 早就棄用的舊語法，一邊在 React 裡瘋狂漏寫記憶體清理邏輯，最後頁面掉幀掉成了幻燈片。

作為網頁動效領域的標杆工具，GreenSock 顯然也受夠了被 AI 亂寫程式碼砸招牌。他們官方推出了開源技能庫 gsap-skills，專門用來教各類 AI 編碼助手按官方的最佳實踐幹活。

讓 AI 別再背十年前的老教程

大模型訓練資料龐雜，寫動效時經常混淆 GSAP 各版本的 API。gsap-skills 就是一套標準化的 Agent Skills 規範檔案，把官方的核心用法打包餵給 AI。

這套技能拆得非常細緻，涵蓋了核心 API、時間軸編排、ScrollTrigger 滾動聯動，以及各類實用工具函式。甚至連效能最佳化建議，比如優先使用 transform 別名與 autoAlpha、避免引起佈局重排，都寫成了規範指令。

針對前端框架的痛點，它還專門給出了 React、Vue 和 Svelte 的編寫範式。以 React 為例，AI 會學會主動呼叫官方提供的 useGSAP 鉤子，並加上作用域和清理函式，而不是像以前那樣隨便甩一個 useEffect 導致重複繫結。

庫裡還順帶提醒了 AI 一件大事：在 GSAP 被 Webflow 收購之後，以前收費的 Club GSAP 外掛比如 SplitText 和 MorphSVG 已經全部免費開放，包括商業用途，直接從公開 npm 安裝即可，不需要再折騰私有倉庫。

40 多款 Agent 敲一行命令就能裝

這套技能並沒有侷限在某一家編輯器裡。它相容了目前主流的 Agent Skills 體系，支援超過 40 款開發助手，包括 Cursor、Claude Code、OpenAI Codex、Windsurf、GitHub Copilot 以及 Google Antigravity 等。

安裝也很簡單，終端裡敲一行 npx skills add 命令就能自動識別並掛載到當前環境。如果是 Claude Code 使用者，直接在外掛市場裡輸入新增命令；在 Cursor 裡也可以直接配置遠端規則，或者把倉庫裡的 skills 資料夾直接複製到本地目錄。

一旦配置好，只要你在提問裡提到動效需求，AI 就會按規範生成結構清晰的程式碼，從外掛註冊、時間軸序列到清理機制一氣呵成。

為什麼重要

對於前端開發者來說，這件事最有價值的地方在於省心。動效開發本來就有很多細枝末節的踩坑點，以前讓 AI 寫動畫往往要反覆糾錯、修補記憶體洩漏，現在有官方規則兜底，AI 生成的程式碼基本拿來就能直接跑。

從行業角度看，GreenSock 這一步走得很聰明，也給其他開源庫和商業 SDK 打了個樣。以往開發者抱怨 AI 亂寫程式碼，廠商只能發部落格呼籲；現在直接把官方最佳實踐做成 Agent Skills，相當於把文件直接注入到開發者的程式碼生成環節。

我們認為，未來的框架競爭很可能不僅比拼 API 好不好用，還要比拼誰的 Agent 技能庫更完善。當 AI 越來越成為程式設計師寫程式碼的入口，能讓 AI 少犯錯的庫，自然會最先被開發者留下來。