适用场景
用户需要在产品 UI 中设计或实现动效。代理将模糊的需求转化为动效契约、技术栈特定的实现选择和可测试的验收标准，覆盖 Flutter、React、Next.js、SwiftUI、Compose、React Native 和更广泛的 Web 技术栈。
适用于微交互、导航转场、共享元素流程、加载状态、手势反馈和动效系统设计。不适用于视频编辑、GIF 渲染或媒体编码。
架构
记忆存储在 ~/animate/。如果 ~/animate/ 不存在，运行 setup.md。结构和状态字段见 memory-template.md。
~/animate/
|- memory.md # 持久动效偏好和平台上下文
|- tokens.md # 已批准的时长、缓动和弹性阶梯
|- patterns.md # 经过验证的交互和转场模式
|- platform-notes.md # 技术栈特定的实现决策
- qa.md # 回归、低端设备发现和无障碍备注
快速参考
仅加载当前任务所需的最小相关文件。
| 主题 | 文件 |
|---|
| 安装流程 | setup.md |
| 记忆模板 | memory-template.md |
| 动效系统和规范契约 | motion-system.md |
| 按技术栈路由 | platform-routing.md |
| 按技术栈的起始代码片段 | implementation-snippets.md |
| 常见应用动画模式 | pattern-catalog.md |
| 性能和无障碍约束 | performance-accessibility.md |
| QA 和回归检查 | qa-playbook.md |
核心规则
1. 从产品意图和状态变化出发
- 在选择效果之前，先定义触发器、用户目标和状态转换。
- 将动效映射到五种任务之一：定位、反馈、连续性、强调或愉悦。
- 如果意图不明确，不要急于添加动画。
2. 编写代码前先写动效契约
每个提案必须指定：
- 触发器和受影响的界面
- 初始状态、结束状态和减弱动画回退
- 时长、缓动或弹性、延迟或交错，以及取消行为
- 验收标准：响应性、无障碍性、一致性和性能
不允许没有具体数值的模糊措辞如"流畅"或"高端"。
3. 路由到最安全的原生抽象
使用能解决问题的最高层 API：
- Flutter：隐式动画组件、AnimatedSwitcher
、TweenAnimationBuilder、Hero
- React 和 Next.js：CSS 优先的转场、Motion presence/layout API，以及路由安全的转场，优先于定制编排
- SwiftUI：withAnimation
、内容转场、matchedGeometryEffect
- Compose：animate*AsState
、AnimatedVisibility、updateTransition
- React Native：原生线程或 worklet 安全的动画路径，优先于 JS 线程编排
- Web：CSS transform
和 opacity、View Transitions 或框架原生转场，优先于 GSAP 级别的复杂度
当更高级的原语已处理中断和生命周期时，避免低层动画代码。
4. 优化合成器安全的动效和中断处理
- 优先使用保持布局稳定的 transform、opacity、color 和 scale 模式。
- 避免使用 width、height、top、left 和布局驱动的循环，除非技术栈提供专用的布局动画原语。
- 定义快速点击、返回手势、关闭、重新渲染、离屏和导航取消时的行为。
- 用户永远不应被动画卡住。
5. 默认提供无障碍变体
- 尊重减弱动画和系统动画缩放设置。
- 用更平静的等效方案替代大位移、视差、弹跳、重度模糊装饰和无限循环。
- 永远不要仅依赖运动来传达状态。
- 动画期间保持焦点顺序、屏幕阅读器输出和点击目标稳定。
6. 覆盖真实产品状态，不仅是理想路径
- 在相关时为加载、成功、错误、空、禁用、重试和乐观更新状态添加动画。
- 协调导航、覆盖层、列表、表单和异步数据，确保动效在延迟和内容变化时仍然正常工作。
- 先交付稳健的 V1，然后仅在约束允许时提供更有表现力的 V2。
7. 用预览、测试和设备现实验证
- 为你涉及的动效状态留下确定性预览、story 或演示开关。
- 当应用技术栈支持时，添加或更新行为测试、E2E 测试或视觉测试。
- 在宣布完成之前，验证减弱动画、中端性能和中断流程。
常见陷阱
- 没有用户理由的漂亮动画 → 额外的动效，更少的清晰度。
- 每个屏幕硬编码时间 → 不一致的产品体验和痛苦的迭代。
- 关键移动动效使用 JS 或主线程编排 → 负载下掉帧。
- 只为理想路径状态添加动画 → 加载、错误或快速重试时体验崩溃。
- 缺少取消规则 → 卡住的覆盖层、幽灵状态或导航故障。
- 只发布一种变体 → 无障碍回归和低端设备性能差。
安全与隐私
离开你机器的数据：
留在本地的数据：
- ~/animate/
下的动效偏好、已批准的 token、平台备注和 QA 学习记录。
此技能不会：
- 自动上传构建、视频或遥测数据。
- 为记忆修改 ~/animate/
之外的文件。
- 禁用无障碍设置。
- 修改自身的 SKILL.md
。
相关技能
用户确认后使用 clawhub install
安装：
flutter - Flutter 动效有用的组件生命周期和性能规则。
react - 影响 React 应用动画行为的组件和渲染模式。
react-native - React Native 的移动生命周期和动画线程约束。
swift - Apple 平台的 Swift 和 SwiftUI 实现模式。
android - 原生动效的 Android 和 Compose 实现细节。反馈
clawhub star animate
保持更新：clawhub sync`
When to Use
User needs motion designed or implemented inside a product UI. Agent turns vague requests into motion contracts, stack-specific implementation choices, and testable acceptance criteria across Flutter, React, Next.js, SwiftUI, Compose, React Native, and broader web stacks.
Use this for micro-interactions, navigation transitions, shared-element flows, loading states, gesture feedback, and motion system design. Do not use it for video editing, GIF rendering, or media encoding.
Architecture
Memory lives in ~/animate/. If ~/animate/ does not exist, run setup.md. See memory-template.md for structure and status fields.
~/animate/
|- memory.md # Durable motion preferences and platform context
|- tokens.md # Approved duration, easing, and spring ladders
|- patterns.md # Proven interaction and transition patterns
|- platform-notes.md # Stack-specific implementation decisions
- qa.md # Regressions, low-end findings, and accessibility notes
Quick Reference
Use the smallest relevant file for the current task.
| Topic | File |
|---|
| Setup flow | setup.md |
| Memory template | memory-template.md |
| Motion system and spec contract | motion-system.md |
| Platform routing by stack | platform-routing.md |
| Starter snippets by stack | implementation-snippets.md |
| Common app animation patterns | pattern-catalog.md |
| Performance and accessibility guardrails | performance-accessibility.md |
| QA and regression checks | qa-playbook.md |
Core Rules
1. Start from Product Intent and State Change
- Define the trigger, user goal, and state transition before choosing an effect.
- Map motion to one of five jobs: orientation, feedback, continuity, emphasis, or delight.
- If the intent is unclear, do not animate yet.
2. Write a Motion Contract Before Code
Every proposal must specify:
- Trigger and affected surfaces
- Initial state, end state, and reduced-motion fallback
- Duration, easing or spring, delay or stagger, and cancellation behavior
- Acceptance criteria: responsiveness, accessibility, parity, and performance
No vague wording like "smooth" or "premium" without values.
3. Route to the Safest Native Abstraction
Use the highest-level API that solves the job:
- Flutter: implicit animation widgets, AnimatedSwitcher
, TweenAnimationBuilder, Hero
- React and Next.js: CSS-first transitions, Motion presence/layout APIs, and router-safe transitions before bespoke choreography
- SwiftUI: withAnimation
, content transitions, matchedGeometryEffect
- Compose: animate*AsState
, AnimatedVisibility, updateTransition
- React Native: native-thread or worklet-safe animation paths before JS-thread choreography
- Web: CSS transform
and opacity, View Transitions, or framework-native transitions before GSAP-level complexity
Avoid low-level animation code when a higher-level primitive already handles interruption and lifecycle.
4. Optimize for Compositor-Safe Motion and Interruption
- Prefer transform, opacity, color, and scale patterns that keep layout stable.
- Avoid width, height, top, left, and layout-driven loops unless the stack provides a dedicated layout animation primitive.
- Define behavior for rapid taps, back gestures, dismiss, re-render, offscreen, and navigation cancel.
- Users should never get stuck behind an animation.
5. Ship Accessible Variants by Default
- Respect reduced-motion and system animation-scale settings.
- Replace large travel, parallax, bounce, blur-heavy flourishes, and infinite loops with calmer equivalents.
- Never rely on movement alone to communicate status.
- Keep focus order, screen reader output, and hit targets stable during motion.
6. Cover Real Product States, Not Only the Happy Path
- Animate loading, success, error, empty, disabled, retry, and optimistic-update states when relevant.
- Coordinate navigation, overlays, lists, forms, and async data so motion still works with latency and content changes.
- Deliver a sober V1 first, then a more expressive V2 only when constraints allow.
7. Verify with Previews, Tests, and Device Reality
- Leave deterministic previews, stories, or demo toggles for the motion states you touched.
- Add or update behavior, E2E, or visual tests when the app stack supports them.
- Validate reduced motion, mid-tier performance, and interrupted flows before calling it done.
Common Traps
- Pretty animation without a user-facing reason -> extra motion, less clarity.
- Hardcoded timings per screen -> inconsistent product feel and painful iteration.
- JS or main-thread choreography for critical mobile motion -> dropped frames under load.
- Animating only happy-path states -> broken UX on loading, error, or rapid retries.
- Missing cancellation rules -> stuck overlays, ghost states, or navigation glitches.
- Shipping only one variant -> accessibility regressions and poor low-end performance.
Security & Privacy
Data that leaves your machine:
- None by default from this skill itself.
Data that stays local:
- Motion preferences, approved tokens, platform notes, and QA learnings under ~/animate/
.
This skill does NOT:
- Upload builds, videos, or telemetry automatically.
- Modify files outside ~/animate/
for memory.
- Disable accessibility settings.
- Modify its own SKILL.md
.
Related Skills
Install with clawhub install
if user confirms:
flutter - Widget lifecycles and performance rules useful for Flutter motion.
react - Component and rendering patterns that shape animation behavior in React apps.
react-native - Mobile lifecycle and animation-thread constraints for React Native.
swift - Swift and SwiftUI implementation patterns for Apple platforms.
android - Android and Compose implementation details for native motion.Feedback
clawhub star animate
Stay updated: clawhub sync`
by