gsap-frameworks

Tổng quan về skill gsap-frameworks

gsap-frameworks dùng để làm gì

gsap-frameworks là skill GSAP dành cho Vue, Nuxt, Svelte, SvelteKit và các framework component không dùng React khác. Skill này giúp bạn viết code animation đúng nhịp lifecycle, đúng phạm vi selector và có cleanup rõ ràng, ताकि hiệu ứng hoạt động đúng sau khi mount và được dọn sạch khi unmount.

Ai nên cài đặt

Hãy dùng skill gsap-frameworks nếu bạn đang xây dựng animation cho Frontend Development trong một component framework và cần nhiều hơn những gì một prompt chung chung có thể cung cấp ổn định. Skill này rất phù hợp khi tác vụ của bạn liên quan đến onMounted, onUnmounted, onMount, onDestroy, component refs, hoặc scoping DOM trong một component duy nhất.

Skill này giúp bạn tránh điều gì

Giá trị lớn nhất của gsap-frameworks là ngăn các lỗi framework phổ biến: animate khi DOM chưa tồn tại, để rò rỉ ScrollTriggers hoặc tweens sau khi đổi route, và vô tình chọn phần tử nằm ngoài component. Nếu bạn đang cân nhắc quyết định cài gsap-frameworks, đây là skill nên chọn khi đầu ra của bạn phải an toàn với lifecycle và bị giới hạn trong phạm vi component.

Cách dùng skill gsap-frameworks

Cài đặt và đọc đúng file trước

Cài bằng npx skills add greensock/gsap-skills --skill gsap-frameworks. Sau đó, hãy bắt đầu với skills/gsap-frameworks/SKILL.md, vì file này chứa các quy tắc lõi và pattern riêng cho từng framework. Nếu bạn đang làm việc từ một repo clone, hãy đọc các ví dụ trong cùng thư mục skill đó trước khi bắt đầu soạn code.

Biến yêu cầu mơ hồ thành prompt dùng được

Một prompt gsap-frameworks usage tốt nên nêu rõ framework, mục tiêu animation và kỳ vọng về cleanup. Ví dụ: “Tạo animation cho component Vue 3, trong đó các card fade và slide vào khi mount, dùng ref và onMounted, giới hạn selector trong root của component, và cleanup khi unmount.” Cách này tốt hơn nhiều so với “animate trang này”, vì skill cần chi tiết về lifecycle và cấu trúc để tạo ra code an toàn.

Cung cấp đúng đầu vào mà skill cần

Các đầu vào tốt nhất cho gsap-frameworks guide thường gồm: phiên bản framework, code dùng Composition API hay script setup, phần tử nào sẽ animate, ưu tiên selector hay refs, và animation là chạy một lần, có thể đảo ngược hay theo cuộn. Nếu bạn cũng nhắc đến route changes, SSR, hoặc nested components, skill có thể tránh các pattern dễ hỏng trong những môi trường đó.

Dùng repository như nguồn pattern

File nên đọc đầu tiên là SKILL.md; nếu cần ví dụ triển khai, hãy xem các mục ví dụ framework được file này tham chiếu, đặc biệt là pattern cho Vue và Svelte. Trong thực tế, gsap-frameworks for Frontend Development hiệu quả nhất khi bạn coi skill như một trợ lý định hình code: đưa cho nó file component, hành vi motion mong muốn, và mọi ràng buộc về cleanup, scoping hoặc SSR.

Câu hỏi thường gặp về skill gsap-frameworks

gsap-frameworks chỉ dành cho Vue và Svelte thôi à?

Không. Vue và Svelte là mục tiêu chính, nhưng hướng dẫn cũng áp dụng cho các component framework khác có giai đoạn mount và unmount rõ ràng. Nếu framework của bạn có lifecycle rõ ràng và bạn cần GSAP theo phạm vi component, gsap-frameworks thường là lựa chọn phù hợp.

Khi nào nên dùng gsap-react thay vì vậy?

Hãy dùng gsap-react cho dự án React. Skill gsap-frameworks không phải lựa chọn đúng khi ứng dụng phụ thuộc vào React hooks và useGSAP, vì pattern đặc thù của React khác với cleanup và scoping trong Vue hoặc Svelte.

Nếu tôi đã biết GSAP rồi thì còn cần skill này không?

Có, nếu bạn cần tích hợp an toàn với framework. Chỉ biết kiến thức animation GSAP cơ bản không tự động giải quyết được timing của lifecycle, scoping selector hay teardown. Skill gsap-frameworks hữu ích nhất khi code animation phải sống bên trong một component, chứ không phải trên một trang tĩnh.

Skill này có thân thiện với người mới không?

Có, nếu bạn mô tả rõ một component và một animation mục tiêu. Người mới thường chỉ gặp khó khi bỏ sót chi tiết framework hoặc yêu cầu cleanup. Nếu bạn cung cấp cấu trúc component và chuyển động mong muốn, skill có thể dẫn bạn đến một triển khai khả thi.

Cách cải thiện skill gsap-frameworks

Nêu rõ hình dạng component, không chỉ hiệu ứng

Bước nhảy chất lượng lớn nhất đến từ việc mô tả cấu trúc component: có những phần tử nào, bao nhiêu phần tử, và chúng có được render có điều kiện hay không. Một prompt như “animate ba feature card trong component Nuxt bằng refs và cleanup gọn” sẽ cho đầu ra gsap-frameworks tốt hơn nhiều so với “làm cho nó mượt hơn”.

Nói rõ yêu cầu về lifecycle và cleanup

Nếu animation chỉ chạy một lần, chạy lại khi đổi route, hoặc cần bị hủy khi rời trang, hãy nói ngay từ đầu. gsap-frameworks hoạt động tốt nhất khi nó biết nên dùng setup chỉ ở mount, scoping kiểu context, hay cleanup rõ ràng trong onUnmounted/onDestroy.

Chia sẻ các ràng buộc làm thay đổi cách triển khai

Hãy nhắc đến SSR, hydration, dynamic lists, slot content, hoặc nested child components khi chúng thực sự liên quan. Những chi tiết này giúp skill tránh logic selector dễ vỡ và quyết định liệu refs, component roots hay wrapper elements có an toàn hơn cho trường hợp của bạn hay không.

Rà soát output đầu tiên về phạm vi và teardown

Lỗi thường gặp nhất là code trông đúng về mặt thị giác nhưng phạm vi selector quá rộng hoặc cleanup chưa đầy đủ. Nếu câu trả lời đầu tiên đã gần đúng, hãy cải thiện bằng cách yêu cầu scoping component chặt hơn, teardown rõ ràng hơn, hoặc một phiên bản được chỉnh cho đúng cú pháp framework bạn đang dùng.