前言¶
给界面加动效，常见的麻烦不在动效本身，而在落地：动效代码要改组件、要加 import、要调 props，甚至要把组件包一层 Motion 容器。手写时容易漏掉某处，跑起来才发现样式抖动或性能问题；改完又常常忘了处理 prefers-reduced-motion，导致部分用户看到不舒服的动画。
下面介绍的 Skill「界面动效生成助手」，就是围绕这个流程做的。它基于 Animation Vocabulary 动画术语表，帮开发者在已有的 React/Next.js/TSX 项目里定位组件、读取结构、预览后再改文件。
这是什么¶
界面动效生成助手是一个社区来源的 Skill，坐标 @user_521ba876/animation-vocabulary，发布者 user_521ba876，当前版本 1.0.1，分类 dev-programming。
它解决的问题是：把「用动效术语描述意图」和「改真实源码」这两件事串起来。你给出要动的组件和动效描述，它先去项目里找到对应文件、读懂结构，再把动效所需的导入、props、包装等改动应用进去，同时按性能与可访问性约束处理。
注意它不是设计稿转代码，也不是通用动画库文档。它只作用于可读、可编辑的前端代码项目。
核心功能¶
根据 SkillHub 页面的资料，这个 Skill 的能力主要包括：
1、项目探索与目标组件定位：在 React/Next.js/TSX 项目中寻找要修改的组件文件，并读取其代码结构。
2、动效代码应用：把动效改动写进真实源文件，覆盖导入、props、组件包装等常规修改点。
3、预览机制：在正式写入前提供 Dry-run 预览，便于先确认改动范围再落盘。
4、约束处理：在应用动效时兼顾性能与可访问性，包括 reduced-motion 相关处理。
5、术语驱动：动效描述基于 Animation Vocabulary 动画术语表，用于 UI 动效设计、原型标注、开发实现、设计验收和提示词优化等环节。
资料中明确写了它「强制处理 reduced-motion 和性能约束」，这是它和直接让模型改代码的主要差别。
安装与启用¶
SkillHub 页面没有在公开资料中给出具体的安装命令或配置字段，因此这里不写猜测的命令。需要安装时，以 SkillHub 页面 https://www.skillhub.cn/skills/user_521ba876/animation-vocabulary 的说明为准。
可确认的信息如下：
- 坐标：
@user_521ba876/animation-vocabulary - 分类：dev-programming
- 来源：community
- 标签：
requires_api_key=false，即使用时不需要 API Key
关于 Cursor、Codex CLI、Claude Code 的分别支持情况，资料中没有提供，这里不做断言。
典型用法¶
资料里没有提供可复现的完整示例，下面按 Skill 自身的工作顺序说明使用方式，具体参数以页面为准。
1、明确要改的组件和动效意图，尽量用 Animation Vocabulary 的术语描述，例如某列表项的进入动画。
2、让 Skill 探索项目并定位目标文件，它会报告找到的组件路径与结构。
3、触发 Dry-run 预览，检查它将添加的 import、props 和包装方式是否符合预期。
4、确认后再写入源文件，随后在项目里运行一次开发服务器验证表现和性能。
适用前提：项目是 React/Next.js/TSX，且代码可读、可编辑。最佳支持环境是 Tailwind 配合 Framer Motion。
适用场景与注意¶
适合的场景：UI 动效设计、原型标注、开发实现、设计验收、提示词优化，以及需要把动效落到真实组件里再检查的 React 项目。
不适合的场景：设计稿、纯静态页面、非前端代码库。它需要读取和修改源码，没有可编辑的前端工程就没法工作。
使用前值得留意的几点：
- 它处理的是源码改动，不是运行时注入，改完要自己跑一遍验证。
- 动效术语表是它的基础，描述越贴近术语表，生成结果越稳定。
- 页面当前版本为 1.0.1，属于社区来源，行为以项目内实际执行结果为准。
结尾¶
界面动效生成助手的价值在于把「找组件、读结构、预览、改文件、处理约束」串成一条可复核的流程，而不是只给一段动画代码让你自己接。如果你正在 React/Next.js/TSX 项目里做界面动效，可以从一次 Dry-run 预览开始试。
官方地址：https://api.skillhub.cn/user_521ba876/animation-vocabulary
页面地址：https://www.skillhub.cn/skills/user_521ba876/animation-vocabulary
