ui-animation
✓通过缓动、弹簧、布局动画、手势和辅助功能来引导有品味的 UI 动画。涵盖顺风和运动模式。在以下情况下使用：(1) 实现进入/退出动画，(2) 选择缓动曲线，(3) 配置弹簧，(4) 布局动画和共享元素，(5) 拖动/滑动手势，(6) 微交互，(7) 确保首选减少运动可访问性。触发器：动画、动画、缓动、弹簧、过渡、运动、布局、手势、拖动、滑动、缩减运动、成帧器运动。
SKILL.md
Tasteful UI animation with proper timing, accessibility, and performance.
Default: Start with Easing Decision Tree → Duration Guidelines → Implement → Add a11y → Verify
| Micro-interaction | Button press, toggle, checkbox | CSS/Tailwind | | Enter/Exit | Modal, toast, dropdown | Motion + AnimatePresence | | Layout change | Accordion, reorder, expand | Motion layout prop | | Shared element | Tab indicator, card expand | Motion layoutId | | Gesture | Drag, swipe, pull-to-refresh | Motion springs |
通过缓动、弹簧、布局动画、手势和辅助功能来引导有品味的 UI 动画。涵盖顺风和运动模式。在以下情况下使用：(1) 实现进入/退出动画，(2) 选择缓动曲线，(3) 配置弹簧，(4) 布局动画和共享元素，(5) 拖动/滑动手势，(6) 微交互，(7) 确保首选减少运动可访问性。触发器：动画、动画、缓动、弹簧、过渡、运动、布局、手势、拖动、滑动、缩减运动、成帧器运动。 来源：lukasstrickler/ai-dev-atelier。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/lukasstrickler/ai-dev-atelier --skill ui-animation- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 ui-animation？
通过缓动、弹簧、布局动画、手势和辅助功能来引导有品味的 UI 动画。涵盖顺风和运动模式。在以下情况下使用：(1) 实现进入/退出动画，(2) 选择缓动曲线，(3) 配置弹簧，(4) 布局动画和共享元素，(5) 拖动/滑动手势，(6) 微交互，(7) 确保首选减少运动可访问性。触发器：动画、动画、缓动、弹簧、过渡、运动、布局、手势、拖动、滑动、缩减运动、成帧器运动。 来源：lukasstrickler/ai-dev-atelier。
如何安装 ui-animation？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/lukasstrickler/ai-dev-atelier --skill ui-animation 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/lukasstrickler/ai-dev-atelier