gsap-frameworks

gsap-frameworks 技能概览

gsap-frameworks 是用来做什么的

gsap-frameworks 是面向 Vue、Nuxt、Svelte、SvelteKit 以及其他非 React 组件框架的 GSAP 技能。它帮助你编写符合生命周期时机、选择器作用域和清理逻辑要求的动画代码，让效果在挂载后能正确执行，在卸载时也能干净移除。

谁应该安装它

如果你正在组件框架里做 Frontend Development 动画，而且需要比通用提示词更可靠的支持，就该使用 gsap-frameworks 技能。当你的任务涉及 onMounted、onUnmounted、onMount、onDestroy、组件 refs，或单个组件内的 DOM 作用域控制时，它尤其适合。

它能帮你避免什么

gsap-frameworks 的核心价值，是避免常见的框架集成错误：在 DOM 还不存在时就开始动画、在路由切换后遗留 ScrollTrigger 或 tween、以及不小心选到组件外的元素。若你是在比较 gsap-frameworks 的安装决策，当你的输出必须具备生命周期安全性和组件级作用域时，就该选它。

如何使用 gsap-frameworks 技能

先安装并优先阅读正确的文件

使用 npx skills add greensock/gsap-skills --skill gsap-frameworks 进行安装。安装后先看 skills/gsap-frameworks/SKILL.md，因为这里包含核心规则和各框架的专用模式。如果你是从 repo 克隆环境里操作，起草代码前也要先阅读同一技能目录下的示例。

把模糊需求改写成可用提示词

一个好的 gsap-frameworks usage 提示词，应该写明框架、动画目标以及清理要求。比如： “Create a Vue 3 component animation where cards fade and slide in on mount, use ref and onMounted, scope selectors to the component root, and clean up on unmount.” 这比 “animate this page” 要好得多，因为这个技能需要生命周期和结构信息，才能产出安全的代码。

提供这个技能真正需要的输入

效果最好的 gsap-frameworks guide 输入，通常包括：框架版本、代码是否使用 composition API 或 script setup、哪些元素要动、偏好用 selectors 还是 refs，以及动画是一次性、可逆还是滚动驱动。如果你还说明了路由切换、SSR 或嵌套组件，这个技能就能避开在这些场景下容易出问题的写法。

把仓库当作模式来源来用

首先要读的文件是 SKILL.md；如果你需要实现示例，就去看那里引用的框架示例部分，尤其是 Vue 和 Svelte 的写法。实际使用中，gsap-frameworks for Frontend Development 最好把它当成一个代码塑形助手：把组件文件、想要的运动效果，以及对清理、作用域或 SSR 的限制一起告诉它。

gsap-frameworks 技能常见问题

gsap-frameworks 只适用于 Vue 和 Svelte 吗？

不是。Vue 和 Svelte 是主要目标，但这些指导原则也适用于其他带有挂载和卸载阶段的组件框架。如果你的框架有清晰的生命周期，而且你需要组件级作用域的 GSAP，gsap-frameworks 通常会很合适。

什么时候我应该改用 gsap-react？

React 项目应使用 gsap-react。如果应用依赖 React hooks 和 useGSAP，就不该选 gsap-frameworks，因为 React 的模式和 Vue 或 Svelte 的清理与作用域处理方式并不相同。

如果我已经懂 GSAP，还需要它吗？

如果你需要框架安全的集成，答案是需要。会用 GSAP 动画基础，并不等于自动解决生命周期时机、选择器作用域或销毁清理问题。gsap-frameworks 最有价值的场景，是动画代码必须写在组件内部，而不是静态页面上。

适合新手吗？

适合，只要你能清楚描述组件和目标动画。新手通常只是在遗漏框架细节或清理要求时才会遇到困难。只要你提供组件结构和期望的运动方式，这个技能就能引导出可落地的实现。

如何改进 gsap-frameworks 技能

只描述组件结构，不要只说效果

提升质量最明显的一步，是把组件结构说清楚：有哪些元素、各有多少、是否是条件渲染。像“在 Nuxt 组件里用 refs 和干净的 teardown 动画化三个 feature cards”这样的提示词，会比“让它更顺滑”产出更好的 gsap-frameworks 结果。

明确说明生命周期和清理要求

如果动画应该只运行一次、在路由切换时重新执行，或者离开页面时被销毁，要一开始就说清楚。gsap-frameworks 在知道该用仅挂载时初始化、context 风格作用域，还是在 onUnmounted/onDestroy 里显式清理时，表现最好。

把会改变实现方式的约束一并给出

当 SSR、hydration、动态列表、slot 内容或嵌套子组件会影响实现时，要明确说明。这些信息能帮助技能避开脆弱的选择器逻辑，也能判断对你的场景来说，refs、组件根节点还是包装元素更安全。

先检查首次输出的作用域和销毁处理

最常见的失败模式，是代码视觉效果看起来没问题，但选择器作用域过大，或者清理不完整。如果第一次答案已经接近目标，可以进一步要求它收紧组件作用域、补上显式 teardown，或者改成适配你确切框架语法的版本。