interaction-design

用途：为界面添加微交互、动效、过渡与反馈，提升可用性与体验。主要能力：按钮状态、表单反馈、Toast、导航指示等微交互；视差、滚动揭示、粘性区块等滚动动画；GSAP 时间线、页面过渡、编排与弹簧物理等复杂动画；悬停/点击/聚焦等快速润色。使用方式：先按任务路由选择路线，再加载对应参考文件——微交互用 references/microinteraction-patterns.md，滚动动画用 references/scroll-animations.md，复杂动画用 references/animation-libraries.md，快速润色直接使用 SKILL.md 内联模式。核心原则：动效应传达反馈、方向、焦点与连续性；时长建议 100-150ms 微反馈、200-300ms 小过渡、300-500ms 中过渡、500ms+ 复杂编排；缓动提供 ease-out、ease-in、ease-in-out、spring 变量。示例包括 Framer Motion 按钮、骨架屏、进度条、开关、页面过渡、涟漪、滑动手势，以及 CSS 关键帧与过渡。限制与注意：优先使用 transform 和 opacity 保证 60fps，避免动画 width、height、top、left；始终支持 prefers-reduced-motion；保持时间尺度一致；优先弹簧动画；动画可中断；渐进增强；多设备测试；避免过度动画、阻塞交互与内存泄漏。资料未提供安装命令、收费与平台信息。