hyperframes-animation
为 HyperFrames 动画框架提供全面的原子动画规则、蓝图与运行时适配器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：为 HyperFrames 动画框架提供全面的原子动画规则、蓝图与运行时适配器。 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要为产品首页的标题创建一个吸引眼球、逐字出现的打字机效果，并且要能兼容移动端。’ 它会引导你查阅‘原子运动规则’中关于文本序列和缓动的部分，或直接推荐一个预设的‘打字机’文字动画效果蓝图，并说明如何在 GSAP 和 CSS 关键帧两种运行时下实现和优化。
介绍
该 Skill 旨在解决开发者在实现复杂、高性能动画时面临的知识碎片化和技术栈适配难题。它提供了一个集中化的知识库，包含原子级的运动规则、多阶段场景蓝图、场景过渡技巧以及七种主流动画运行时（如 GSAP、Lottie、Three.js 等）的适配器。开发者无需在不同文档和库之间切换，即可获得从设计原则到具体 API 调用的完整指导。
使用方式非常灵活：你可以直接选取 2-4 条原子运动规则进行组合，快速构建动画效果；也可以加载预设的多阶段场景蓝图，快速搭建复杂动画序列；当需要针对特定运行时（如调整 GSAP 的缓动函数或控制 Lottie 播放器）进行优化时，可直接查阅对应的 API 参考。此外，它还提供了对现有动画编排的审计工具（动画地图）和 24 种预定义的文字动画效果。
该 Skill 非常适合前端开发、UI 设计师和全栈开发人员，特别是那些在项目中需要实现精细、流畅且跨平台兼容动画的开发者。无论是构建数据可视化仪表盘、制作引人注目的营销页面，还是开发交互式产品原型，都能从中受益。
使用建议：建议从查阅“原子运动规则”开始，理解基础的动画构成原理。对于复杂场景，优先考虑使用“场景蓝图”作为起点进行修改，可以大幅提升效率。注意，该 Skill 深度集成于 HyperFrames 框架，其核心特性（如单一暂停时间线、可安全跳转、确定性）确保了动画的精确控制和性能表现，但这也意味着它主要服务于 HyperFrames 生态内的动画开发。
核心特点
与单一动画库（如 GSAP）的 Skill 不同，它不绑定于单一运行时，而是提供了跨七种主流动画技术的统一知识库和适配层；与通用动画教程 Skill 相比，它深度集成 HyperFrames 框架，提供了原子规则组合、场景蓝图加载和运行时 API 直查的一站式解决方案，并内置了动画编排审计工具。
注意事项
该 Skill 深度绑定 HyperFrames 框架，不适用于非 HyperFrames 项目或仅需简单 CSS 动画的场景。
常见问题
这个 Skill 能帮我直接用 GSAP 写动画吗？
可以，它包含了 GSAP 的详细 API 参考（如缓动函数、时间线控制），并提供了如何在 HyperFrames 中最佳使用 GSAP 的适配规则和蓝图。
我没有用过 HyperFrames，能用这个 Skill 吗？
核心价值在于 HyperFrames 生态内。虽然其中的动画设计原则有参考价值，但大部分具体功能（如蓝图加载、运行时适配）需要 HyperFrames 环境才能发挥作用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-5/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-5/raw/index.md（查看排版版本）