GSAP AI Skills

1. GSAP Skills là gì?

GSAP Skills không phải một ứng dụng để mở lên và bấm. Đây là bộ "kỹ năng" chính thức do nhóm GSAP viết, dùng để dạy các trợ lý AI lập trình (Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, Google Antigravity…) cách viết hiệu ứng chuyển động cho trang web bằng GSAP sao cho đúng. GSAP (GreenSock Animation Platform) là thư viện JavaScript chuyên làm hiệu ứng: chữ trượt vào, hình chạy theo khi cuộn trang, các chuyển động nối tiếp nhau.

Nói thẳng: repo này dành cho người làm web, kể cả người mới đang nhờ AI viết code giúp. Bản thân nó chỉ là các file hướng dẫn dạng văn bản. Sau khi cài, trợ lý AI của bạn đọc các file đó và viết code GSAP theo cách nhóm GSAP khuyên dùng, thay vì đoán.

Về chi phí: bộ kỹ năng miễn phí (giấy phép MIT). Theo tài liệu của repo, GSAP cũng miễn phí hoàn toàn, kể cả các plugin trước đây phải trả tiền như SplitText hay MorphSVG, và dùng được cho mục đích thương mại.

Hợp với bạn nếu:

• Bạn đang làm website bằng một trợ lý AI lập trình và muốn có hiệu ứng chuyển động đẹp.
• Bạn từng nhờ AI viết hiệu ứng và kết quả bị giật, chạy sai hoặc lỗi khi chuyển trang.
• Bạn dùng React, Vue, Svelte hoặc JavaScript thuần.

Chưa hợp nếu:

• Bạn không làm web và không dùng trợ lý AI lập trình nào. Cài xong sẽ không có gì để mở.
• Bạn cần một công cụ kéo thả để làm hiệu ứng mà không đụng đến code.

2. Cần chuẩn bị gì?

• Một trợ lý AI lập trình đã cài sẵn, ví dụ Cursor, Claude Code, Codex, Windsurf, Copilot hoặc Google Antigravity. Mỗi công cụ có bảng giá riêng, xem trên trang chính thức của công cụ đó. GSAP Skills không thu thêm phí nào.
• Một thư mục dự án web trên máy tính của bạn (dự án mới tạo cũng được).
• Node.js: phần mềm nền để chạy các công cụ viết bằng JavaScript trên máy tính. Khi cài Node.js bạn có luôn lệnh npx, dùng để chạy trình cài đặt kỹ năng. Tải miễn phí ở https://nodejs.org
• Git (chỉ cần nếu bạn chọn cách chép tay ở Bước 4): công cụ tải mã nguồn từ GitHub về máy. Tải ở https://git-scm.com

Máy Windows, macOS hay Linux đều dùng được. Dung lượng cần rất nhỏ vì đây chỉ là vài file văn bản. Không cần tài khoản hay khóa API nào cho riêng GSAP Skills.

Repo này không phát hành theo số phiên bản (không có trang Releases). Bạn luôn cài nội dung mới nhất trên nhánh chính; lần cập nhật gần nhất lúc viết bài là ngày 29/7/2026.

3. Cài đặt từng bước

Có bốn cách. Hãy chọn đúng một cách hợp với công cụ bạn dùng. Cách ở Bước 2 được nhóm GSAP khuyên dùng và chạy được với nhiều trợ lý AI nhất.

Bước 1: Kiểm tra Node.js

Mở Terminal (hoặc PowerShell trên Windows) và gõ:

node --version

Thấy gì là đúng: một dòng số phiên bản bắt đầu bằng chữ v. Nếu máy báo không tìm thấy lệnh, hãy cài Node.js ở https://nodejs.org rồi mở lại cửa sổ dòng lệnh.

Bước 2: Cài bằng một lệnh (khuyên dùng)

Di chuyển vào thư mục dự án web của bạn trong Terminal, rồi chạy:

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

Trình cài đặt tự nhận ra trợ lý AI đang có trên máy. Lần đầu chạy, npx có thể hỏi bạn có đồng ý tải công cụ skills về không; trả lời đồng ý. Sau đó làm theo các câu hỏi hiện trên màn hình để chọn kỹ năng và nơi cài.

Nếu muốn chỉ định rõ một trợ lý, thêm --agent và tên của nó. Ví dụ với Google Antigravity:

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

Thấy gì là đúng: trình cài đặt báo đã thêm các kỹ năng. Kiểm tra lại bằng lệnh:

npx skills list

Danh sách hiện ra phải có các tên bắt đầu bằng gsap-, ví dụ gsap-core, gsap-timeline, gsap-scrolltrigger.

Bước 3: Cách không cần dòng lệnh cho Cursor và Claude Code

Cursor: mở Settings, vào Rules, chọn Add Rule, rồi Remote Rule (Github) và nhập:

greensock/gsap-skills

Claude Code: trong khung chat của Claude Code, gõ lệnh sau để thêm kho kỹ năng của GSAP:

/plugin marketplace add greensock/gsap-skills

Thấy gì là đúng: Cursor hiện một rule mới trỏ tới greensock/gsap-skills; Claude Code báo đã thêm marketplace.

Bước 4: Cách chép tay (khi các cách trên không dùng được)

Tải repo về máy:

git clone https://github.com/greensock/gsap-skills.git

Sau đó chép các thư mục con bên trong thư mục skills/ của repo vào thư mục kỹ năng của trợ lý bạn dùng:

Trợ lý AI	Thư mục kỹ năng
Claude Code	~/.claude/skills/
Cursor	~/.cursor/skills/
OpenCode	~/.config/opencode/skills/
OpenAI Codex	~/.codex/skills/
Google Antigravity	~/.gemini/antigravity/skills/ (dùng chung) hoặc .agent/skills/ (riêng dự án)
Pi	~/.pi/agent/skills/

Dấu ~ nghĩa là thư mục cá nhân của bạn. Trên Windows đó là thư mục dạng C:\Users\tên-của-bạn.

Thấy gì là đúng: trong thư mục kỹ năng có tám thư mục con tên gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks, mỗi thư mục chứa một file SKILL.md.

Bước 5: Riêng cho GitHub Copilot

Copilot không đọc các file kỹ năng kiểu Cursor hay Claude. Để Copilot làm theo hướng dẫn của GSAP, hãy chép file .github/copilot-instructions.md trong repo (và nếu muốn, cả thư mục .github/instructions/) vào đúng vị trí đó trong dự án của bạn.

4. Dùng lần đầu

Bộ kỹ năng chỉ là hướng dẫn cho AI. Dự án của bạn vẫn cần có thư viện GSAP. Nếu chưa có, cài bằng lệnh sau trong thư mục dự án (hoặc nhờ trợ lý AI cài giúp):

npm install gsap

Bạn không cần tài khoản Club GSAP, không cần token hay cấu hình kho riêng; mọi thứ nằm trong gói gsap công khai.

Bây giờ mở trợ lý AI trong thư mục dự án và thử một yêu cầu cụ thể, viết bằng lời thường:

Dùng GSAP làm hiệu ứng cho phần đầu trang: tiêu đề hiện dần từ dưới lên,
ba thẻ sản phẩm xuất hiện lần lượt, và ảnh nền trôi chậm khi cuộn trang.

Kết quả đúng thường có các dấu hiệu sau trong đoạn code AI viết ra:

• Có dòng nhập thư viện gsap, và nếu dùng hiệu ứng khi cuộn thì có ScrollTrigger được đăng ký bằng gsap.registerPlugin.
• Các chuyển động nối tiếp được gom vào một "timeline" thay vì nhiều lệnh rời với độ trễ tự tính.
• Trong dự án React, code dùng useGSAP kèm phạm vi (scope) và có dọn dẹp khi rời trang.
• Chuyển động dùng các thuộc tính như x, y, autoAlpha thay vì thay đổi bố cục trang.

Tám kỹ năng trong bộ và việc của từng cái:

Kỹ năng	Dạy AI về
gsap-core	Các lệnh chuyển động cơ bản, thời lượng, kiểu nhanh chậm, chạy so le
gsap-timeline	Xếp các chuyển động theo thứ tự, gắn nhãn, lồng nhau
gsap-scrolltrigger	Hiệu ứng gắn với cuộn trang, ghim phần tử, dọn dẹp
gsap-plugins	Các plugin như Flip, Draggable, SplitText, ScrollSmoother…
gsap-utils	Các hàm tiện ích của GSAP
gsap-react	Cách dùng trong React: useGSAP, dọn dẹp, SSR
gsap-performance	Giữ cho hiệu ứng mượt
gsap-frameworks	Vue, Svelte và các framework khác

Repo còn có thư mục examples/ chứa vài bản demo tối giản (JavaScript thuần và React). Bạn có thể xem ngay trên GitHub để hình dung code chuẩn trông thế nào.

5. Lỗi thường gặp và cách sửa

Dấu hiệu	Nguyên nhân	Cách sửa
Gõ npx thì máy báo không tìm thấy lệnh	Chưa cài Node.js, hoặc chưa mở lại cửa sổ dòng lệnh sau khi cài	Cài Node.js từ https://nodejs.org , đóng và mở lại Terminal, chạy lại node --version
Trình cài đặt không nhận ra trợ lý AI của bạn, hoặc cài vào nhầm công cụ	Máy có nhiều trợ lý, hoặc trợ lý chưa được nhận diện	Chạy lại lệnh ở Bước 2 với --agent và tên trợ lý bạn muốn
Cài xong nhưng AI vẫn viết code như cũ	Phiên làm việc đang mở chưa nạp kỹ năng mới, hoặc yêu cầu không nhắc đến GSAP	Mở một phiên chat mới, và ghi rõ "dùng GSAP" trong yêu cầu. Kiểm tra bằng npx skills list xem kỹ năng đã có chưa
Copilot không làm theo hướng dẫn GSAP	Copilot không đọc file kỹ năng	Làm theo Bước 5: chép .github/copilot-instructions.md vào dự án
Lệnh git clone báo không tìm thấy git	Chưa cài Git	Cài Git từ https://git-scm.com , hoặc dùng cách ở Bước 2 (không cần Git)
AI đòi tài khoản Club GSAP, token hoặc file .npmrc để cài plugin	AI dựa trên thông tin cũ, khi một số plugin còn trả phí	Nói cho AI biết mọi plugin đã miễn phí và nằm trong gói gsap công khai; không cần đăng ký hay token
Hiệu ứng cuộn trang sai vị trí sau khi nội dung trang thay đổi	Bố cục đổi nhưng ScrollTrigger chưa tính lại	Nhờ AI gọi ScrollTrigger.refresh() sau khi bố cục thay đổi; đây là cách được ghi trong tài liệu của repo

6. Gỡ cài đặt / cập nhật

Nếu bạn cài bằng npx skills (Bước 2), dùng chính công cụ đó.

Cập nhật lên nội dung mới nhất:

npx skills update

Gỡ kỹ năng (công cụ sẽ cho bạn chọn trong danh sách đang cài):

npx skills remove

Nếu bạn cài bằng cách chép tay (Bước 4): để gỡ, xóa tám thư mục gsap-... trong thư mục kỹ năng của trợ lý. Để cập nhật, tải lại repo rồi chép đè.

Nếu bạn thêm qua Cursor (Remote Rule) hoặc Claude Code (marketplace): gỡ hoặc cập nhật ngay trong phần quản lý rule/plugin của chính công cụ đó.

Với Copilot: xóa file .github/copilot-instructions.md đã chép vào dự án.

Gỡ bộ kỹ năng không ảnh hưởng đến code bạn đã viết và không gỡ thư viện GSAP khỏi dự án.

7. Câu hỏi hay gặp

Có mất tiền không? Bộ kỹ năng miễn phí (MIT). Theo tài liệu của repo, GSAP và mọi plugin của nó cũng miễn phí, kể cả dùng thương mại. Khoản bạn có thể phải trả là phí của trợ lý AI bạn dùng.

Có cần mạng không? Cần mạng lúc cài để tải các file từ GitHub. Sau đó các file nằm trên máy bạn. Trợ lý AI thì vẫn cần mạng theo cách nó vốn hoạt động.

Dữ liệu của tôi có bị gửi đi đâu không? Bộ kỹ năng chỉ là file văn bản, không tự chạy hay gửi gì. Riêng công cụ cài đặt skills có thu thập số liệu sử dụng ẩn danh; theo tài liệu của công cụ đó, bạn tắt được bằng cách đặt biến môi trường DISABLE_TELEMETRY=1 hoặc DO_NOT_TRACK=1.

Có an toàn không? Repo tự đánh giá mức rủi ro là thấp, vì GSAP là thư viện hiệu ứng với bề mặt bảo mật nhỏ.

Tôi không biết code thì có dùng được không? Được, nếu bạn đang nhờ một trợ lý AI lập trình làm web giúp mình. Bạn mô tả hiệu ứng bằng lời, AI viết code, và bộ kỹ năng giúp code đó đúng cách hơn. Nếu bạn không làm web thì công cụ này chưa cần cho bạn.