$ loading_
帮助你为 React/Next.js 产品实现可复用的界面动效与过渡方案。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "motion-ui" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/motion-ui/SKILL.md 2. 保存为 ~/.claude/skills/motion-ui/SKILL.md 3. 装好后重载技能，告诉我可以用了
请为我的 Next.js 应用设计一套生产可用的页面切换动效系统，包含进入、退出、加载中的过渡效果，并给出可复用的 React 组件封装方案。
一套适用于 Next.js 的页面切换动效方案，包含组件结构、动画模式与实现建议。
请为 React 项目中的按钮、悬浮卡片和弹窗设计统一的微交互动效，要求风格克制、性能稳定，并便于在组件库中复用。
适合组件库复用的微交互动效规范与实现思路，覆盖常见交互组件。
请帮我整理一份适用于产品前端的 UI 动效规范，说明不同场景下的过渡时长、缓动曲线、层级变化和可访问性注意事项，面向 React/Next.js 团队使用。
一份面向前端团队的界面动效规范，可直接指导设计与开发协作。
Production-ready UI motion system for React / Next.js.
Focused on performance, accessibility, and usability — not decoration.
Use this motion system when motion:
Motion must:
If it does none → remove it.
npm install motion
motion/react - default for current Motion for React projects (package: motion)framer-motion - legacy import path for projects that still depend on Framer MotionDo not mix. Mixing causes conflicting internal schedulers and broken AnimatePresence contexts — components from one package will not coordinate exit animations with components from the other.
To check which version your project uses:
cat package.json | grep -E '"motion"|"framer-motion"'
Always import from one source consistently:
// Correct (modern)
import { motion, AnimatePresence } from "motion/react"
// Correct (legacy)
import { motion, AnimatePresence } from "framer-motion"
// Never mix both in the same project
// motionTokens.ts
export const motionTokens = {
duration: {
fast: 0.18,
normal: 0.35,
slow: 0.6
},
// Use these as the `ease` value inside a `transition` object:
// transition={{ duration: motionTokens.duration.normal, ease: motionTokens.easing.smooth }}
easing: {
smooth: [0.22, 1, 0.36, 1] as [number, number, number, number],
sharp: [0.4, 0, 0.2, 1] as [number, number, number, number]
},
distance: {
sm: 8,
md: 16,
lg: 24
}
}
Usage example:
import { motionTokens } from "@/lib/motionTokens"
<motion.div
initial={{ opacity: 0, y: motionTokens.distance.md }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: motionTokens.duration.normal,
ease: motionTokens.easing.smooth
}}
/>
Safe
Avoid
Rule: responsiveness > smoothness
The heuristic combines CPU core count and available memory for a more reliable signal. deviceMemory is available on Chrome/Android; the fallback covers Safari and Firefox.
const isLowEnd =
typeof navigator !== "undefined" && (
// Low memory (Chrome/Android only; undefined elsewhere → treat as capable)
(navigator.deviceMemory !== undefined && navigator.deviceMemory <= 2) ||
// Few cores AND no memory API (covers Safari/Firefox on weak hardware)
(navigator.deviceMemory === undefined && navigator.hardwareConcurrency <= 4)
)
const duration = isLowEnd ? 0.2 : 0.4
import { motion, useReducedMotion } from "motion/react"
export function FadeIn() {
const reduce = useReducedMotion()
return (
<motion.div
initial={{ opacity: 0, y: reduce ? 0 : 24 }}
animate={{ opacity: 1, y: 0 }}
/>
)
}
@media (prefers-reduced-motion: reduce) {
.motion-safe-transition {
transition: opacity 0.2s;
}
.motion-reduce-transform {
transform: none !important;
}
}
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
提供适用于 React/Next.js 的高质量动画模式，快速实现常见交互动效。