关于 interaction-design
Interaction Design 是通过动效、反馈和状态转换设计直观交互的技能，提供 React 动画库、时长和无障碍方面的规范。
主要功能
- 01React 优先使用 Framer Motion
- 02CSS 动画使用 transform 和 opacity
- 03采用可中断的弹簧动效
- 04按交互类型设定时长
- 05遵循减少动态效果偏好
适用场景
- 01为 React 界面添加动效
- 02设计按钮和开关的操作反馈
- 03构建尊重减少动态效果偏好的转换
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/interaction-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/animation-libraries.mdmicrointeraction-patterns.mdscroll-animations.md详细介绍
交互设计
通过动态效果、反馈和精心设计的状态转换，打造引人入胜且直观的交互体验。
项目约定
- 首选库： 使用 Framer Motion 为 React 组件添加动画
- CSS 动画： 仅使用
transform和opacity，以确保 60fps 性能 - 弹簧物理效果： 交互元素优先使用弹簧动画，而非线性或缓动动画
- 可中断： 用户必须能够取消或覆盖任何动画
时间尺度
| 时长 | 用途 |
|---|---|
| 100-150ms | 微交互反馈（悬停、点击） |
| 200-300ms | 小型过渡（切换开关、下拉菜单） |
| 300-500ms | 中型过渡（模态框、页面切换） |
| 500ms+ | 复杂的编排动画 |
无障碍功能
始终遵循 prefers-reduced-motion: reduce。当用户偏好减少动态效果时，将动画时长设为 0。这一点不容妥协。
参考文件
根据任务需要阅读以下文件：
| 文件 | 阅读时机 |
|---|---|
| animation-libraries.md | 选择或配置 Framer Motion、GSAP 或基于 CSS 的方案时 |
| microinteraction-patterns.md | 构建按钮反馈、切换开关、涟漪效果、加载指示器、Toast 通知时 |
| scroll-animations.md | 实现滚动触发的显现、视差或基于交叉观察的动画时 |
评论
支持 Markdown