1实现原理 · 为什么它能做到

给交互动效定硬性时间窗与合成器约束（100–250ms、只动 transform/opacity、按压即时 0.96、进出非对称），把手感转成可检查的参数

skills/micro-interaction/SKILL.md

Duration: UI micro-interactions live in **100–250ms**. Anything over ~400ms feels laggy for a click response.

同段给出三条缓动默认值（ease-out 入场、overshoot、标准移动）与进入慢一点、离开快一点的原则。

Framer Motion 侧以手势、弹簧、AnimatePresence 三件套为骨架，弹簧用 stiffness/damping 两个直觉参数调

skills/micro-interaction/SKILL.md

whileTap={{ scale: 0.96 }}

给出 stiffness: 400, damping: 30 这类可直接用的 UI 默认值，并解释 damping 影响回弹量。

布局动画是 Framer Motion 的杀手锏：layout 自动把位置与尺寸变化转成 transform，layoutId 让两个组件之间做共享元素（magic move）过渡

skills/micro-interaction/SKILL.md

{!open && <motion.div layoutId="card" onClick={() => setOpen(true)} />}

同时点明副作用：layout 会拉伸圆角与文字，需子元素反向缩放或改用 layout="position"。

纯 CSS 路径也能做进场与退场（含 display 切换）：@starting-style 提供首次渲染的起始值，transition-behavior: allow-discrete 让离散属性参与过渡

skills/micro-interaction/SKILL.md

transition-behavior: allow-discrete;

使无 JS 库也能做 toast 与 dialog 进出，references 另给弹层 overlay 的同类处理。

把加载到成功到失败当作同一物体的连续状态（按钮变形 spinner 到 checkmark），而不是画面跳切；并强制 reduced-motion 守卫

skills/micro-interaction/SKILL.md

Loading → success → error should be one continuous motion (e.g. a button morphs spinner → checkmark), not a jump cut.

验收也据此改写：交互是状态驱动而非时间驱动，所以冻结的是状态（?state=open）而不是时钟。

2核心能力

01悬停、按压、聚焦反馈（whileHover/whileTap/whileFocus 加弹簧）

02进出场动画（AnimatePresence 加 initial/animate/exit 与稳定 key；toast 用 mode="popLayout"）

03布局动画与共享元素（layout 与 layoutId magic move）

04纯 CSS 交互配方（@starting-style、allow-discrete、popover/dialog 退出、@property 可动画自定义属性、spinner 与 toggle）

05Framer Motion 进阶配方（variants 加 stagger、Reorder 拖拽排序、拖拽约束、手势组合）

06reduced-motion 守卫（CSS 全局 0.01ms 与 Framer Motion 侧处理）

07状态冻结 harness（?state=idle/hover/open 映射到 data-state 或受控 prop）

3外部依赖

Kind	Dependency / Endpoint
package	motion（Framer Motion，v11+ 以 motion/react 导入）
network	交付页从 CDN 取 React 与 motion（正文点名 esm.sh；产物期引用，不判级）
api	现代 CSS 原语：@starting-style、transition-behavior: allow-discrete、@property、popover/dialog 的 overlay 离散属性
cli	npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg）

4管控建议与判定依据

建议配套管控措施

面向 Agent

声明可访问域名与密钥范围

面向管理者

密钥最小权限，保留请求日志

判定依据（文件路径与关键语句摘要）

网络端点: 声明外部网络访问: 执行期零外发；交付页从 CDN 取 React 与 motion（正文点名 esm.sh；产物期引用，不判级）
本地工作目录: 文件读写与工件输出: 本 skill 目录零写盘；交付物 1 个自包含 .html（纯 CSS 或内联 type=module 走 CDN），由 agent 写出

审计说明： 。判级只依据 skill 自身目录（skills/micro-interaction/ = SKILL.md + 0 字节 README.md + references/{framer-motion-recipes,css-recipes}.md，find 全量核对）：零脚本、零凭证、零写盘、执行期零外发（token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 零命中）。正文点名的 esm.sh（React 与 motion 的 CDN）出现在输出契约里，属产物期引用（浏览器打开交付页时拉取），按批4 口径不判级，仅列出端点；npm 包由用户项目安装。

5第二遍独立确认

[unlocatable] transition-behavior: allow-discrete 与 @starting-style 的支持面 — SKILL.md 写 Baseline in Chrome/Edge/Safari、references 写 Baseline-available in current Chrome/Edge/Safari/Firefox——两处描述不同（SKILL.md 未含 Firefox），且均无源码内依据。正文要求读者 verify @starting-style and allow-discrete for your support floor，即文档自己把核实责任交给使用者，故按文档声明记录并在 risks 提示。
[ok] layout 造成圆角与文字变形的告诫是否与配方一致 — SKILL.md 的 Gotcha 段与 references 的 magic-move/layout 小节都提示需子元素反向缩放或改用 layout="position"；references 另给 useMotionValue 加 useSpring 的免重渲染建议，互不矛盾。
[ok] 验收方式与动效性质是否匹配（状态驱动 vs 时间驱动） — SKILL.md 明写 A micro-interaction's frames are its states (idle / hover / pressed / open) 并给 ?state= 方案，同时保留 CSS 循环动画的 animationDelay 加 paused 冻结写法，两路都对得上其讨论的动效类型。
[discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3（秒制、时间冻结），但本 skill 的验收是状态冻结（?state=open），helper 与之不匹配；且 scripts/ 在仓库根，单装形态下相对路径亦不成立。

6结论

把手感量化为可检查参数（100–250ms 时窗、按压 0.96、三条缓动默认值），可直接进 code review

同时给 JS 生态（Framer Motion）与零依赖 CSS 路径，可按项目约束二选一

布局动画与共享元素（layout、layoutId）写到配方级，并预警其副作用

状态连续性主张（spinner 到 checkmark 不跳切）把交互动效与真实 UX 目标绑定，而非纯装饰

适合： 适合：① 界面需要响应感的细节打磨（悬停、按压、聚焦反馈、开关、点赞、toast、抽屉、模态、手风琴）；② 列表增删重排与共享元素（magic move）过渡；③ 加载到成功到失败的连续状态设计；④ 想用纯 CSS（无 JS 库）实现进出场与弹层动画的工程。

不适合： 不适合：① 页面或路由级转场（走 page-transition-animation）；② 滚动叙事与复杂时间线编排（走 gsap-web）；③ 性能剖析与昂贵属性的系统治理（走 60fps-animation）；④ 需要逐帧确定性取证的时间驱动动画（本 skill 的证据形态是状态而非帧）。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload micro-interaction.tar.gz

sha256: 17fbed1b9f12f5ad…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit b6dba3eb75.