animate

概览

什么是 animate Skill？

animate skill 帮助你通过有目的的动画、微交互和动态效果来审视和提升用户界面功能。它专为希望通过动效设计提升可用性、提供反馈并创造愉悦体验的 UI 设计师和前端开发者打造。当你需要为界面添加动画、过渡、悬停效果，或让 UI 更加生动吸引时，使用 animate。

谁适合使用 animate？

• 希望为界面增添精致感和清晰度的 UI/UX 设计师
• 实施动画策略的前端开发者
• 希望通过动效提升用户反馈并引导注意力的团队

解决的问题

• 减少静态、缺乏生气的界面
• 为用户操作添加视觉反馈
• 平滑生硬的过渡效果
• 明确界面元素关系并引导用户焦点

使用方法

安装步骤

1. 使用以下命令安装 animate skill：

   npx skills add https://github.com/pbakaus/impeccable --skill animate

2. 从 SKILL.md 文件开始，了解结构化工作流程和最佳实践。

3. 如有，查看 README.md、AGENTS.md 和 metadata.json 等辅助文件，获取更多背景信息。

4. 根据项目的工具和需求调整推荐的工作流程，切勿照搬指令。

工作流程概览

• 必备准备工作：
  • 调用 /frontend-design 收集设计原则和上下文。如果没有设计背景，先运行 /teach-impeccable。
  • 收集性能限制，确保动画不会影响可用性。
• 评估动画机会：
  • 识别缺乏反馈或吸引力的静态或突兀区域。
  • 考虑产品个性、目标用户和性能需求。
• 规划与实现动画：
  • 有策略地添加动效，提升理解和用户满意度。

关键文件

• SKILL.md（主要工作流程和指导）

常见问题

什么时候应该使用 animate skill？

当你的项目需要有目的的动画、过渡或微交互来提升用户体验、提供反馈或增加愉悦感时，使用 animate。

animate 提供代码还是仅仅是指导？

该技能侧重于工作流程、分析和添加动画的最佳实践。它不提供现成的动画代码，但帮助你规划和实现有效的界面动效。

哪里可以找到更多细节？

打开仓库的 Files 标签，浏览完整文件树，包括参考资料和辅助脚本，获取更深入的背景信息。