GSAP

frontend-dev 是一项用于前端开发的技能，帮助你构建精致、可直接上线的网页，涵盖高级 UI、电影感动效、AI 生成媒体、说服力文案和生成式艺术。适用于落地页、营销站、产品页、仪表盘以及其他需要设计、内容和实现细节保持一致的前端工作。

gsap-frameworks 是面向 Vue、Nuxt、Svelte、SvelteKit 以及其他非 React 框架的 GSAP 技能。它涵盖生命周期安全的动画初始化、作用域选择器，以及在组件卸载时清理动画，帮助 Frontend Development 中的组件动画正常工作。

gsap-performance 是面向前端开发的 GSAP 性能技能。它可帮助你减少卡顿、避免布局抖动，优先使用 transform 和 opacity，合理应用 will-change，并批量处理读写操作，从而实现更顺滑的 60fps 动画。对于需要为现有动效代码提供实用 gsap-performance 使用建议的场景，它尤其合适。

gsap-react 是面向 React 和 Next.js 的官方 GSAP 技能。它涵盖 useGSAP()、refs、gsap.context()、作用域选择器和清理机制，帮助你构建对 React 友好的动画，避免重渲染或卸载时的 bug。当前端开发需要安装与使用帮助时，可使用这份 gsap-react 指南。

面向 GSAP 实用工具函数的 gsap-utils 技能：`clamp`、`mapRange`、`normalize`、`interpolate`、`random`、`snap`、`toArray`、`wrap` 和 `pipe`。了解 gsap-utils 在前端开发中的用法，包括何时使用可复用的函数形式、如何把这些 helper 融入 tween 和回调，以及为什么无需注册。

gsap-plugins 帮助前端开发者正确选择、安装和使用 GSAP 插件。它涵盖插件注册、导入方式，以及 ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG 插件、缓动工具和 GSDevTools 的实用指导。适合在你需要一份清晰的 gsap-plugins 指南，而不是泛泛的动画建议时使用。

gsap-scrolltrigger 是官方 GSAP 技能，用于实现与滚动联动的动画、pin 固定、scrub 跟随和基于视口的触发器。适合 Frontend Development 中需要 gsap-scrolltrigger 指南、安装帮助，或用于视差、固定区块和滚动驱动动效的实用用法时使用。

gsap-timeline 帮你用有序步骤、重叠、标签和嵌套播放来构建 GSAP timeline 序列。當目标是协调多个动画时，尤其适用于 UI 设计、引导流程或可重复的 motion 系统，就可以使用 gsap-timeline 技能。它提供 gsap-timeline 的安装与用法指引，帮助你清晰地组织动画顺序。

gsap-core 技能是 GSAP 官方核心动画 API 使用指南，涵盖 `gsap.to()`、`from()`、`fromTo()`、easing、stagger、defaults 和响应式 motion。适用于 vanilla JS、React、Vue、Svelte、DOM、SVG 以及 UI Design 工作流中的 gsap-core 用法；尤其适合需要一份可靠 gsap-core 指南的场景。

hyperframes-registry 帮助你更少靠猜测地安装并接入可复用的 HyperFrames registry 项目。可用它来执行 `hyperframes add`，区分 blocks 和 components，合并 snippets，将 blocks 接入 `index.html`，并按照 `hyperframes.json` 的路径映射完成设计落地和 registry 发现。

gsap 是面向 HyperFrames 作品的实用动画参考。它能帮你在 gsap.to()、from()、fromTo() 和 gsap.timeline() 之间做出选择，并正确应用 vars、easing、stagger、transform 以及性能模式。需要可直接落地的入场动画、过渡效果和可复用设计动效时，可以用这份 gsap 指南来确定实现方案。

hyperframes 是一项工作流技能，用于在 HyperFrames 中构建基于 HTML 的视频合成。适用于需要结构化、以代码为先的 hyperframes 视频编辑场景，比如标题卡、叠加层、字幕、配音、音频驱动动效和场景转场。它更强调布局、时序和动画决策，而不是泛泛的只靠提示词生成视频请求。

gpt-taste 是一项面向设计的 skill，专注于打造更精致的 UI 页面，强调编辑式视觉指导、严谨的留白控制和 GSAP 动效。对于营销页、落地页和展示型站点，当你希望获得更丰富的布局变化、更好的排版控制，并减少千篇一律的前端模式时，可以使用 gpt-taste skill。该指南包含可落地实现的安装与使用说明。

fixing-motion-performance 可帮助你审查并修复 UI 动画性能问题，默认不更改你的技术栈。适合前端场景中动画卡顿、与滚动联动的效果开销过高，或过渡动画触发布局、绘制或合成工作时使用。它能把动画 bug 转化为清晰、可直接落到代码层面的修复方案。