前言¶

前端动效往往要同时搞定三件事：选对库、把参数调顺、在页面上确认观感。Anime.js 文档齐全，但从「描述一个过渡」到「可运行的 demo」仍要手写选择器、时间线和缓动。若你希望在 Agent 对话里先看效果、再拿走完整页面代码，而不是从零查 API，下面介绍 SkillHub 上的「动画设计&预览」Skill 能覆盖到哪一步。

这是什么¶

「动画设计&预览」是面向 Anime.js 的 Agent Skill，坐标为 @user_bb1f0d09/anime-preview，当前版本 1.0.0，来源为 community，分类 design-media，由发布者 user_bb1f0d09 维护。标签 requires_api_key=false，安装后无需额外 API Key。

官方页面：SkillHub - 动画设计&预览；Skill 资源地址：https://api.skillhub.cn/user_bb1f0d09/anime-preview。

它解决的是：在用户提出动画、过渡类需求时，由 Agent 按 Skill 约定调用 Anime.js 相关能力——在会话中通过 show_widget 展示动画演示，并生成可直接用于项目的 HTML + JavaScript（Anime.js） 代码。

核心功能¶

以下能力均来自 Skill 官方简介，未做延伸推断。

1. 触发与意图识别
   当用户要创建、展示或生成基于 Anime.js 的动画时启用。常见触发词包括：anime、animation、动画、anime.js、animate、transition、过渡、动画效果。

2. 对话内演示（show_widget）
   Skill 说明其可在对话中使用 show_widget 展示动画 demo，便于在写进项目前先确认动效方向。

3. 产出完整页面片段
   可生成包含 Anime.js 的完整 HTML+JS，便于复制到本地或现有工程中调试、集成。

安装与启用¶

Skill 遵循通用 SKILL.md 格式。SkillHub 页面给出的安装方式是：让 AI 按 SkillHub 安装与优先源配置 安装 @user_bb1f0d09/anime-preview。

若本机已安装 skillhub CLI，可直接安装到当前 Agent 的 skills 目录（必须使用 --dir，否则默认落在 ./skills/，Agent 可能无法识别）：

command -v skillhub && skillhub --version

未安装 CLI 时，可按 SkillHub 文档执行完整安装（示例为文档中的推荐命令）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

安装本 Skill（将 <skills 目录> 换成你当前客户端使用的路径）：

skillhub install user_bb1f0d09/anime-preview --dir <skills 目录>

SkillHub 文档中列出的常用 skills 目录示例：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

不同客户端路径不一致，以你实际环境的 skills 目录为准。安装后若 Agent 未立刻加载新 Skill，可按所用客户端说明重启或刷新技能列表。

典型用法¶

官方资料未附带固定代码模板，用法以 Skill 自述的工作流为准，可按下面步骤在对话中复现意图（具体生成内容随你的描述变化）。

1. 用自然语言描述动效
   说明元素（如按钮、卡片、列表项）、动作（位移、缩放、透明度、旋转等）以及是否要循环、延迟或序列动画。描述中带上「动画」「过渡」或 anime.js 等词，便于命中 Skill 的触发条件。

2. 先在对话里看演示
   需要快速验证观感时，明确要求 Agent 展示或演示动画；Skill 侧会通过 show_widget 在会话中呈现 demo。

3. 索取可落地代码
   确认方向后，要求生成 完整 HTML+JS（Anime.js） 片段，再粘贴到本地静态页或现有构建流程中运行、微调。

示例提示（仅说明交互方式，非官方固定文案）：

用 anime.js 做一个卡片 hover 时轻微上浮并加阴影的过渡，先在对话里演示，再给我完整 HTML+JS。

适用场景与注意¶

适合谁

• 需要在原型或营销页里快速试 Anime.js 动效的前端开发者。
• 希望 Agent 不仅给 API 片段，还能在对话里先看一眼效果、再拿整页代码的场景。

限制与注意

• 能力边界以 Anime.js 为主；复杂场景（Canvas、WebGL、与框架深度绑定）仍需你在生成代码上二次集成与测试。
• Skill 为社区来源（community），版本与行为以 SkillHub 页面及安装包内 SKILL.md 为准。
• SkillHub 页面展示的统计（截至资料抓取）：评分 100000，下载 1438；与第三方摘要中的数字可能不一致，以 SkillHub 为准。

结尾¶

「动画设计&预览」把 Anime.js 动效的 对话内预览（show_widget） 与 HTML+JS 产出 写在同一套 Skill 流程里，适合从描述到 demo 再到落代码的短链路。无需 API Key，通过 SkillHub 安装 @user_bb1f0d09/anime-preview 即可使用。官方入口：https://www.skillhub.cn/skills/user_bb1f0d09/anime-preview。