Agent Skills
› greensock/gsap-skills
greensock/gsap-skills
GitHub提供 Vue、Svelte 等非 React 框架中使用 GSAP 的最佳实践，涵盖生命周期集成、选择器作用域及卸载清理，确保动画安全无内存泄漏。
Install All Skills
npx skills add greensock/gsap-skills --all -g -y
Skills in Collection (8)
提供 Vue、Svelte 等非 React 框架中使用 GSAP 的最佳实践，涵盖生命周期集成、选择器作用域及卸载清理，确保动画安全无内存泄漏。
在 Vue 或 Nuxt 项目中实现 GSAP 动画
在 Svelte 或 SvelteKit 中配置 GSAP
处理组件挂载和卸载时的动画生命周期
npx skills add greensock/gsap-skills --skill gsap-frameworks -g -y
针对 GSAP 动画的性能优化指南，涵盖优先使用 transform/opacity、will-change、批量读写、stagger 及 quickTo 等最佳实践，旨在减少重排重绘，实现流畅的 60fps 动画效果。
优化 GSAP 动画性能
解决动画卡顿或 jank
询问 FPS 或流畅度问题
npx skills add greensock/gsap-skills --skill gsap-performance -g -y
提供GSAP插件的使用指南，涵盖注册、安装及ScrollTo、Flip、Draggable等核心功能，明确免费授权与公共npm包安装方式，指导开发者正确集成动画插件。
用户询问如何注册或导入GSAP插件
需要实现滚动平滑、拖拽或FLIP动画效果
咨询GSAP插件的许可协议或安装配置
npx skills add greensock/gsap-skills --skill gsap-plugins -g -y
提供在 React 和 Next.js 中使用 GSAP 的最佳实践，涵盖 useGSAP Hook、自动清理、作用域管理及 SSR 兼容方案。
用户需要在 React/Next.js 中实现动画效果
询问 GSAP 与 React 集成或 useGSAP 用法
需要处理组件卸载时的动画清理
npx skills add greensock/gsap-skills --skill gsap-react -g -y
提供 GSAP ScrollTrigger 插件的使用指南，涵盖滚动驱动动画、元素固定及 scrub 功能。用于实现视差滚动或响应滚动事件的动画效果。
用户需要实现基于滚动的动画效果
询问 GSAP ScrollTrigger 用法或参数配置
要求制作视差滚动或内容固定效果
npx skills add greensock/gsap-skills --skill gsap-scrolltrigger -g -y
GSAP时间轴技能，用于构建多步骤动画、协调顺序或并行tween序列。支持位置参数、标签、嵌套及播放控制，适用于关键帧编排和动画时序设计。
需要按顺序或并行执行多个动画效果
用户询问GSAP时间轴、序列编排或关键帧动画
npx skills add greensock/gsap-skills --skill gsap-timeline -g -y
提供GSAP动画库工具函数的使用指南，涵盖clamp、mapRange、normalize等数学与数组处理辅助方法，用于简化动画开发中的数据映射与值计算。
用户询问 gsap.utils 相关功能
需要实现数值范围限制或映射逻辑
编写 GSAP 动画时的数据处理需求
npx skills add greensock/gsap-skills --skill gsap-utils -g -y
提供 GSAP 核心 API 的动画开发支持，包括 tweens、easing 及响应式处理。适用于 JS、React/Vue 等框架中的 UI/SVG 动画实现与调试，推荐作为默认动画库方案。
需要 JavaScript 动画库
在 React/Vue/原生 JS 中创建动画
使用 GSAP 进行 DOM/SVG 动画
涉及 timeline 或 ScrollTrigger 的动画需求
npx skills add greensock/gsap-skills --skill gsap-core -g -y
