Motion ref skill
Skill joepUI/motion-ref-skill
AI coding agent skill for UI motion design. 111 production-ready effects across 13 categories — describe your product scenario, get CSS/JS code you can ship. Works with Claude Code, Codex, OpenClaw, and any SKILL.md-compatible agent.
npx -y skills add joepUI/motion-ref-skillAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
UI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。
SKILL.md
4.4 KB, ~1.5k tokens by cl100k_base, as published. Nobody here has run it
Motion Ref
把用户的产品场景翻译成合适的 UI 动效方案。默认用户不懂动画术语；先理解问题，再读取最小必要参考，最后给出可直接落地的方案。
核心原则
- 有目的：每个动画都要解决问题，例如确认操作、缓解等待、表达层级、引导注意。
- 快且轻：常规交互控制在 200-500ms；超过 500ms 容易显得卡，低于 100ms 用户难感知。
- 一致性：同类交互使用同一套时长、缓动和反馈强度。
- 无障碍：代码方案必须包含
prefers-reduced-motion: reduce适配。
工作流程
- 判断用户是在要 代码方案 还是 视频 motion prompt；不明确时默认代码方案。
- 判断场景是否清晰：
- 清晰：读取最相关的场景路由或分类参考，直接推荐 1-3 个动效。
- 模糊：先给 2-3 个方向让用户选，不要一次读取全部参考。
- 组合需求：按涉及的 UI 部件分别读取对应分类参考。
- 只读取当前任务需要的文件。禁止为了保险读取全部
ref/或全部references/。 - 输出时使用产品语言说明“解决什么问题”，再给实现代码或视频提示词。
按需读取导航
先读哪个 reference
| 用户需求 | 读取文件 | 读取条件 |
|---|---|---|
| 用户用产品问题描述需求，例如“加载白屏”“点了没反应”“想高级一点” | references/scene-routing.md | 需要从场景匹配动效，或需要把模糊描述转成候选方向 |
| 用户要求最终方案、代码、可调参数、视频 prompt | references/output-format.md | 已经选定动效，或准备输出最终答案 |
再读哪个分类 ref
读取 references/scene-routing.md 后，根据匹配结果只打开相关分类文件。若用户已经明确说出分类或动效，也可直接读取对应分类文件。
| 分类 | 读取文件 | 读取条件 |
|---|---|---|
| 加载、等待、白屏、进度、聊天输入中、语音识别 | ref/01-loading.md | 等待状态或加载反馈 |
| 按钮点击、提交中、成功、失败、长按确认、复制成功 | ref/02-button-feedback.md | 操作反馈发生在按钮或点击动作上 |
| 数字、文字、倒计时、标题、滚动字幕、光泽文字 | ref/03-text-data.md | 文本或数据本身需要动态变化 |
| 弹窗、Toast、Tooltip、Popover、抽屉、命令面板 | ref/04-overlay.md | 独立浮层或提示层进入/离开 |
| 页面跳转、Tab、侧栏、共享元素、底部导航 | ref/05-navigation.md | 页面、视图或导航状态切换 |
| 输入框、表单校验、开关、单选、验证码、滑块、步骤 | ref/06-form-input.md | 表单控件或输入流程 |
| 滚动出现、阅读进度、吸顶缩小、图片揭示 | ref/07-scroll.md | 动效由滚动触发或跟随滚动 |
| 图标、Logo、角标、点赞、铃铛、复制图标 | ref/08-icon.md | 小图标或标识发生状态变化 |
| 轮播、列表增删、拖拽排序、手风琴、头像堆叠、滑动操作 | ref/09-carousel-list.md | 列表或集合项交互 |
| 主题、空状态、在线状态、收藏、已读未读、成功失败状态 | ref/10-state.md | 全局或组件状态变化 |
| 背景、高级感、发光、粒子、磁性光标、扫描线、3D 悬浮 | ref/11-ambient.md | 氛围、品牌感或背景质感 |
| 图表、仪表盘、统计卡片、折线、环形图、排名、时间线、散点、分布、占比、雷达图 | ref/12-data-viz.md | 数据可视化入场、趋势对比、分布展示或数值强调 |
| 淡入、上滑、缩放、弹性、序列、模糊、折叠展开 | ref/13-enter-exit.md | 通用元素出现、消失或列表入场 |
输出要求
输出最终方案前，必须读取：
- 至少一个相关
ref/*.md分类文件。 references/output-format.md。
从 ref/*.md 中提取视觉描述、适用场景、时长/参数、实现要点。不要凭记忆补动画参数。若多个动效组合跨分类，只读取涉及到的分类文件。
Gives 0 of the 12 instructions most css styling skills give in ~1.5k tokens
Counted across 586 of the 596 authors here whose files we hold, read 2026-08-06
- avoid excessive centered layoutsin 55 of 586, across 12 files
- bundle code into single HTML filein 54 of 586, across 14 files
- Respect prefers-reduced-motion user settingsin 52 of 586, across 35 files
- avoid purple gradientsin 51 of 586, across 11 files
- avoid uniform rounded cornersin 51 of 586, across 11 files
- avoid Inter fontin 51 of 586, across 11 files
- edit generated files to develop artifactin 50 of 586, across 10 files
- animate only transform and opacity propertiesin 43 of 586
- Make touch targets at least 44x44 pixelsin 41 of 586, across 15 files
- Ensure minimum color contrast of 4.5:1in 39 of 586, across 10 files
- use tailwind cssin 39 of 586, across 24 files
- Use SVG icons instead of emojisin 38 of 586, across 11 files
Said here and by no other author read
- choose code or video prompt based on request
- default to code if unclear
- ask for direction if scenario is vague
- read only the needed files for the task
- extract parameters from reference files
- explain the problem solved before giving code
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.