interaction-design

概览

什么是 interaction-design？

interaction-design 技能提供实用的指导和代码模式，用于在现代 UI 项目中创建微交互、动效设计、过渡效果和用户反馈。它特别适合基于 React 的前端项目，并利用了如 Framer Motion 这样的动画库。通过使用此技能，您可以提升可用性，用有目的的动效、清晰的反馈和平滑的过渡来打动用户。

谁适合使用此技能？

• 使用 React 的前端开发者和 UI 设计师
• 希望提升用户参与度和界面精致度的团队
• 需要加载状态、手势交互、滚动动画或通知系统的项目

它解决了哪些问题？

• 增加用于用户反馈的微交互（例如按钮状态、悬停/聚焦效果）
• 实现页面和组件的平滑过渡
• 设计加载状态和骨架屏
• 支持基于手势和滚动触发的动画
• 支持通知、吐司和拖放界面

使用方法

安装步骤

1. 使用以下命令安装技能：
   npx skills add https://github.com/wshobson/agents --skill interaction-design
2. 首先查看 SKILL.md 文件，了解概览和工作流程原则。
3. 浏览支持文件：
   • references/animation-libraries.md，了解 React 动画库示例（Framer Motion）
   • references/microinteraction-patterns.md，查看按钮状态和加载模式
   • references/scroll-animations.md，了解滚动触发效果和进度指示器

适配您的项目

• 将代码示例和模式集成到您自己的 React 组件中
• 根据您的 UI 风格和用户预期调整时长、缓动和动画细节
• 将此技能作为最佳实践参考，而非直接复制粘贴的解决方案

关键工作流程原则

• 有目的的动效：用动画传达反馈、定位和焦点
• 时间指导：根据交互类型选择时长（例如微反馈 100-150ms，模态过渡 300-500ms）
• 缓动函数：使用 cubic-bezier 曲线实现自然运动

常见问题

哪里可以找到 interaction-design 的代码示例？

查看 references/animation-libraries.md 了解 Framer Motion 用法，references/microinteraction-patterns.md 包含按钮和加载状态模式。滚动动画详见 references/scroll-animations.md。

interaction-design 只适用于 React 项目吗？

大多数示例基于 React 和 Framer Motion，但其原则和模式也可启发其他前端框架。

如何预览所有可用的模式和脚本？

打开 Files 标签浏览完整文件树，包括嵌套的引用和动画及微交互的辅助脚本。

什么时候不适合使用 interaction-design？

如果您的项目不需要 UI 动效、微交互，或者不是前端应用，此技能可能不适用。