Agent Skills
返回列表
界面动效生成助手

界面动效生成助手

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_521ba876/animation-vocabulary。

技能介绍

解决的问题

前端 UI 动效经常被描述成“丝滑”“高级”，但真正写入代码时需要明确触发时机、动画模式、状态起止、时长、缓动和性能约束。这个技能面向 React、Next.js、TSX 场景，把模糊的界面动画需求整理成可执行方案，并围绕 framer-motion 与 Tailwind CSS 生成或应用代码。

工作方式

  • 用 11 类动效术语和提示词公式澄清需求，例如 Press、Stagger、Spring、Reduced Motion。
  • 用 Glob、Grep 搜索目标组件；多个候选文件时先列出路径，请用户确认后再读取和修改。
  • 读取文件并检测 package.json、包管理器和已有依赖，缺少依赖时给出安装说明。
  • 写入前执行 Dry-run 预览，说明修改路径、改动摘要、副作用与确认选项，未批准不直接改文件。
  • 优先使用 transform 与 opacity，补充 prefers-reduced-motion 处理，并检查时长、空间一致性和转场目的。

适用边界

它最适合标准位置的可读写前端源码，尤其是 React 组件。对 Vue、Svelte、纯 HTML/CSS 项目可以生成代码，但自动应用能力会变弱。它不用于 Figma 设计稿、Canvas/WebGL、游戏物理、粒子系统或跨多个子包的批量修改。

使用场景

  • 在 React 项目中给按钮添加可打断的 press 反馈，并自动应用 Framer Motion 代码。
  • 把“列表进入视口时依次出现”转成 scroll reveal + stagger 动效规格。
  • 在 Next.js 页面里实现缩略图到详情的 shared element transition。
  • 为已有 Tailwind 组件生成 reduced motion 处理与 transform/opacity 动画。

适合人员

  • 维护 React 组件库的前端工程师：需要给按钮、卡片和列表补可复用动效。
  • 使用 AI Agent 写前端代码的开发者：需要把模糊动画需求转成可执行代码。
  • 负责 Next.js 页面交互的产品工程师：需要实现路由或列表进入的轻量转场。
  • 做设计开发协作的前端：需要输出含时长、缓动、reduced motion 的动效说明。