技能库智客分类：Agent 工作流 motion-lab

Motion Lab

为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。

官方网址：GitHub

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

官方 description 用英文写明「Motion Lab」做什么。中文介绍不改写这段原文，能力边界以文件结构与下方原文为准。

何时用

官方 description 未单独写出 Use when。按规范，代理会在用户任务与这段 description 的关键词匹配时激活本技能。

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：Open Design 宿主约定、Motion.Lab 动效案例库、使用步骤、常见需求、许可随包保留。其中含规范建议的小节：分步指令。

文件分析

文件分析：除 SKILL.md 外，正文引用了 references/index.md、references/basic.md、references/text.md、references/interaction.md、references/advanced.md、references/license.md，属于带资源的技能包，这些文件按需再读。

Open Design 宿主约定Motion.Lab 动效案例库使用步骤常见需求许可随包保留

· 许可：MIT

来源分类：GitHub skill

来源与网址

市场来源：GitHub

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: motion-lab
description: 为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。
许可: MIT

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

指令中引用的文件 · 6

references/index.md
references/basic.md
references/text.md
references/interaction.md
references/advanced.md
references/license.md

以下路径提取自原文；文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

该技能引用了附属文件，请从来源获取完整目录；仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「motion-lab」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-391f34895d3b077d-Motion-Lab.html
请存为 .cursor/skills/motion-lab/SKILL.md 或 .claude/skills/motion-lab/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。
该技能还带 scripts/、references/、assets/ 等文件，请从 https://github.com/nexu-io/open-design/tree/HEAD/skills/motion-lab 取完整目录，不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/motion-lab' --list

目标客户端安装范围

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/motion-lab' --skill 'motion-lab'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

---
name: motion-lab
description: "为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。"
en_name: motion-lab
zh_name: "Motion.Lab · 160 个动效案例"
zh_description: "为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。"
triggers:
  - "motion-lab"
  - "动效"
  - "动画"
  - "motion"
  - "Motion.Lab"
  - "动效案例"
  - "案例库"
  - "特效"
  - "文字动画"
  - "hover"
  - "scroll"
license: MIT
od:
  mode: utility
  category: animation-motion
  upstream: https://github.com/yangxu128/Motion.Lab
  source-commit: fbfda036aadbc1b46547bce8a7a57ec12bf73485
---
## Open Design 宿主约定

这是当前任务中的功能技能。保留用户选定的任务类型、品牌、技术栈、当前阶段和交付格式；不要因为 @ 选择而改成视频项目。规划阶段只规划，实现阶段才写代码。检查、渲染和导出仅在宿主当前阶段允许且工具真实可用时执行；技能不能额外开启独立 Agent、强制审批或绕过宿主交付边界。

附属文件相对当前技能包根目录读取，按当前问题选读，不把全部参考文档粘入提示词。不读取其他 Agent 的全局配置。素材优先用用户已有文件；需要新图片、视频或音频时使用当前宿主实际提供且用户允许的工具。缺少生成、测量或导出能力时说明具体缺口，交付可验证部分，不声称完成未执行的步骤。遵循当前任务的输出路径，不覆盖输入或历史产物。
# Motion.Lab 动效案例库

## 使用步骤

1. 先明确用户要表达的状态或动作，查看已有组件与技术栈。用 `references/index.md` 按中英文名称、ID、分类或标签检索。选择最符合用户目标的案例，不为展示库而堆满特效。
2. 读取相应分类文件中该 ID 的小节：`references/basic.md`（基础）、`references/text.md`（文字）、`references/interaction.md`（交互）、`references/advanced.md`（高级）。每项包含参数定义、HTML/CSS/JS 原始示例，不需要联网下载整站。
3. 将代码适配当前 DOM 和组件生命周期，保留用户内容与品牌。CSS 参数需带正确单位；检查 JS 变量和代码是否实际使用参数，不能只改展示控件。全局选择器改为组件内作用域，多实例不共用状态。
4. 运行依赖按实际代码确认：Three.js、GSAP 等并非随此技能安装。已有项目优先复用现有版本，不擅自加入多个动画框架。Canvas/WebGL 按容器尺寸与 DPR 调整，说明性能取舍。
5. 清理 requestAnimationFrame、定时器、滚动/指针监听和渲染资源；React 使用生命周期 cleanup。滚动监听需要节流时采用帧调度；不要让动画阻塞点击或键盘反馈。
6. 尊重 prefers-reduced-motion，提供静态或简化状态；交互同时支持键盘、触摸与焦点。检验代码中的硬编码尺寸、占位文字及资源路径；示例不能未经修改作为最终成品。
7. 在当前阶段允许时验证真实运行、触发、停止、卸载和多次进入；报告实际观察结果。只有静态源码检查时明确说明，不能宣称 160 个案例全部通过浏览器验收。

## 常见需求

- 按钮点击波纹：`click-ripple-material`。
- 标题打字：`text-typewriter`；多行版本 `text-typewriter-multi`。
- 卡片翻面：`hover-flip-card`。
- 滚动进入：`scroll-reveal`。
- 粒子背景：根据目的在 `particle-fountain`、`canvas-starfield`、`flow-field` 和 `particle-galaxy` 中选型。

案例用于局部功能实现，本包不创建 Motion.Lab 网站、不包含它的应用界面或预览站点，也不将 160 个案例拆成 160 条 @ 列表项。

## 许可随包保留

`references/license.md` 随会话包保留来源许可。复制参考代码到交付工程时保留上游署名及许可文本。

阅读排版

name: motion-lab description: "为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。" en_name: motion-lab zh_name: "Motion.Lab · 160 个动效案例" zh_description: "为当前网页或组件查找、选型和改造动效。包含 160 个案例的 HTML/CSS/JS、参数与中英文索引，覆盖基础、文字、交互和高级动效。" triggers:

"motion-lab"
"动效"
"动画"
"motion"
"Motion.Lab"
"动效案例"
"案例库"
"特效"
"文字动画"
"hover"
"scroll" license: MIT od: mode: utility category: animation-motion upstream: https://github.com/yangxu128/Motion.Lab source-commit: fbfda036aadbc1b46547bce8a7a57ec12bf73485

Open Design 宿主约定

Motion.Lab 动效案例库

使用步骤

先明确用户要表达的状态或动作，查看已有组件与技术栈。用 references/index.md 按中英文名称、ID、分类或标签检索。选择最符合用户目标的案例，不为展示库而堆满特效。
读取相应分类文件中该 ID 的小节：references/basic.md（基础）、references/text.md（文字）、references/interaction.md（交互）、references/advanced.md（高级）。每项包含参数定义、HTML/CSS/JS 原始示例，不需要联网下载整站。
将代码适配当前 DOM 和组件生命周期，保留用户内容与品牌。CSS 参数需带正确单位；检查 JS 变量和代码是否实际使用参数，不能只改展示控件。全局选择器改为组件内作用域，多实例不共用状态。
运行依赖按实际代码确认：Three.js、GSAP 等并非随此技能安装。已有项目优先复用现有版本，不擅自加入多个动画框架。Canvas/WebGL 按容器尺寸与 DPR 调整，说明性能取舍。
清理 requestAnimationFrame、定时器、滚动/指针监听和渲染资源；React 使用生命周期 cleanup。滚动监听需要节流时采用帧调度；不要让动画阻塞点击或键盘反馈。
尊重 prefers-reduced-motion，提供静态或简化状态；交互同时支持键盘、触摸与焦点。检验代码中的硬编码尺寸、占位文字及资源路径；示例不能未经修改作为最终成品。
在当前阶段允许时验证真实运行、触发、停止、卸载和多次进入；报告实际观察结果。只有静态源码检查时明确说明，不能宣称 160 个案例全部通过浏览器验收。

常见需求

按钮点击波纹：click-ripple-material。
标题打字：text-typewriter；多行版本 text-typewriter-multi。
卡片翻面：hover-flip-card。
滚动进入：scroll-reveal。
粒子背景：根据目的在 particle-fountain、canvas-starfield、flow-field 和 particle-galaxy 中选型。

案例用于局部功能实现，本包不创建 Motion.Lab 网站、不包含它的应用界面或预览站点，也不将 160 个案例拆成 160 条 @ 列表项。

许可随包保留

references/license.md 随会话包保留来源许可。复制参考代码到交付工程时保留上游署名及许可文本。

Motion Lab

技能介绍

做什么

何时用

代理如何加载

文件分析

SKILL.md 与 Agent 调用

安装这个技能

Open Design 宿主约定

Motion.Lab 动效案例库

使用步骤

常见需求

许可随包保留

相关技能

Skill Creator

Clawdhub

Agent Team Orchestration

Superpowers