源自 GitHubWeb交互动效开发
该能力专门用于现代前端页面中的动画效果开发。它基于业界主流的 GSAP 核心库，为开发者提供规范的补间动画编写指南。无论是简单的元素位移淡入，还是列表错落进入（stagger）、复杂平滑缓动曲线（easing）、SVG坐标系旋转，亦或是结合媒体查询（matchMedia）与减弱动态偏好（prefers-reduced-motion）的无障碍响应式适配，都能生成遵循最佳实践的高性能代码，规避重排重绘陷阱与动画冲突问题。
它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。
常见场景
它能帮你做什么？
01
02
03
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“用 gsap.from() 和 stagger 实现页面上所有 .card 元素的交错淡入上移动效，缓动使用 back.out(1.7)。”
“使用 GSAP 的 autoAlpha 和 transform 别名写一个模态弹窗的出现与消失动画，确保关闭后不阻挡点击。”
“用 gsap.matchMedia 写一段响应式动效：屏幕宽度大于 800px 时执行 3D 旋转动画，当检测到 prefers-reduced-motion 时将持续时间设为 0。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
