Motion Ref

UI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。

7 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add joepUI/motion-ref-skill --skill motion-ref

Manual install

git clone --depth 1 https://github.com/joepUI/motion-ref-skill.git /tmp/motion-ref-skill
mkdir -p ~/.claude/skills
cp -r /tmp/motion-ref-skill/. ~/.claude/skills/motion-ref

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Motion Ref

把用户的产品场景翻译成合适的 UI 动效方案。默认用户不懂动画术语；先理解问题，再读取最小必要参考，最后给出可直接落地的方案。

## 核心原则

1. **有目的**：每个动画都要解决问题，例如确认操作、缓解等待、表达层级、引导注意。
2. **快且轻**：常规交互控制在 200-500ms；超过 500ms 容易显得卡，低于 100ms 用户难感知。
3. **一致性**：同类交互使用同一套时长、缓动和反馈强度。
4. **无障碍**：代码方案必须包含 `prefers-reduced-motion: reduce` 适配。

## 工作流程

1. 判断用户是在要 **代码方案** 还是 **视频 motion prompt**；不明确时默认代码方案。
2. 判断场景是否清晰：
   - 清晰：读取最相关的场景路由或分类参考，直接推荐 1-3 个动效。
   - 模糊：先给 2-3 个方向让用户选，不要一次读取全部参考。
   - 组合需求：按涉及的 UI 部件分别读取对应分类参考。
3. 只读取当前任务需要的文件。禁止为了保险读取全部 `ref/` 或全部 `references/`。
4. 输出时使用产品语言说明“解决什么问题”，再给实现代码或视频提示词。

## 按需读取导航

### 先读哪个 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` | 小图标或标识发生状态变化 |

Read the full skill on GitHub

Details

Skill name: motion-ref
Repository: joepUI/motion-ref-skill
License: MIT
Repo updated: 26 June 2026

FAQ

What does the Motion Ref skill do?

How do I install the Motion Ref skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add joepUI/motion-ref-skill --skill motion-ref. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Motion Ref popular?

It lives in joepUI/motion-ref-skill, which has 7 GitHub stars and 2 forks.

Related skills

Compliance Auditor

FuzulsFriend/compliance-auditor

Use this skill whenever the user asks for a privacy policy, terms of service, cookie policy, accessibility statement, GDPR / CCPA / COPPA / Israel PPL / UK GDPR review, sub-processor list, or any "make my site compliant" task. Also trigger when the user mentions Privacy Policy, Terms, ToS, ToU, "legal pages", compliance audit, data processing agreement, DPA, DPIA, consent flow, cookie banner, CAN-SPAM footer, data retention, breach-notification, or regulator names (EDPB, ICO, CPPA, FTC, Israeli PPA). The skill runs a deterministic multi-agent pipeline - researches primary-source regulator requ

Frontend & Design

Brand Yml

stephenturner/skill-brand-yml

Create a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.

Frontend & Design

Human Experience

andrew-shwetzer/human-experience

Vision-powered UX simulation engine. Opens UIs in a real browser, takes screenshots, clicks through flows, records video, and analyzes everything through Claude's vision + empirical UX research. Replaces a 1000-person user testing panel with automated multi-viewport, multi-persona, interactive analysis. Karpathy-style ratchet loop for iterative perfection.

Frontend & Design

Web Design Taste

Alice59357/web-design-taste

帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。

Frontend & Design

Linkedin Hdr Logo

Adamodigi/linkedin-hdr-logo

Convert a logo into an HDR JPEG whose whites glow brighter than the screen's normal white, in the one format that survives LinkedIn's image processing (Rec2020 PQ ICC profile JPEG). Use this skill whenever the user wants a logo's white to look extra bright, glowing, or HDR on LinkedIn or on social profiles, mentions the "LinkedIn HDR logo" effect, says their HDR upload loses its glow after LinkedIn processes it, or asks to make a logo "pop", "glow", or "defy screen brightness". Also use it when the user gives a logo file and asks to boost, expose, or brighten its whites for LinkedIn.

Frontend & Design

UI Craft

Achref23illi/ui-craft

Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.