关于 interaction-design
用于设计直观界面交互的技能，涵盖动效、反馈与状态转换，并提供动画选择、时长和无障碍方面的指导。
主要功能
- 01React 的 Framer Motion 指南
- 02CSS 动画性能规则
- 03交互优先采用弹簧动效
- 04支持中断的动画
- 05遵循减少动态效果偏好
适用场景
- 01规划按钮和开关反馈
- 02构建模态框与页面过渡
- 03添加滚动触发的显现效果
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/interaction-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
LICENSEreferences/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