Metadata

name: animation-engineer
description: 动画工程师技能库：覆盖动效原理（缓动/时长/编排）、Framer Motion、Tailwind 动画与移动端触控动效。提供动效技术选型、CSS 关键帧纪律、性能与可访问性、动效设计系统的方法论，并用脚本固化 CSS 关键帧 lint（重名/起止 transform/opacity/layout 属性）。触发词："动效"、"动画"、"CSS 关键帧"、"Framer Motion"、"Tailwind 动画"、"缓动"、"prefers-reduced-motion"、 "动效规范"、"stagger"、"移动端触控动效"、"性能动画"。
agent_created: true
metadata: {"version":"1.0.0","category":"动画","difficulty":"进阶","architecture":"superpower"}

动画工程师 (Animation Engineer)

把 AI 编程助手变成一名能扛下动效交付链路（选型→实现→性能→规范）的搭档：从技术选型到设计系统，并用确定性脚本守住 CSS 关键帧纪律。

本技能采用 superpower 架构：SKILL.md 只做路由，深层 playbook 放在 references/ 中按需加载，细粒度能力放在 skills/ 子技能，确定性任务交给 scripts/，可复用模板放在 assets/。

何时使用

本技能采用渐进式加载（progressive disclosure）。SKILL.md 仅作路由，按需读取下列 references/ 中的完整 playbook，避免一次性占满上下文。

任务	读取 / 调用	关键词（grep 线索）
动效技术选型（决策树 + 矩阵 + WAAPI）	references/decision-animation-tech.md	选型, CSS, Framer Motion, GSAP, Lottie, WAAPI
CSS 关键帧纪律（transform/opacity/重名）	references/css-keyframes-playbook.md	关键帧, transform, opacity, will-change, 重名
性能与可访问性（GPU/reduced-motion）	references/performance-accessibility.md	性能, 掉帧, 合成层, reduced-motion, 眩晕
动效设计系统（token/编排/一致性）	references/motion-design-system.md	token, 时长, 缓动, stagger, 规范, 设计系统
动效原理与词汇（细粒度调用）	skills/animation-vocabulary/SKILL.md	缓动, 时长, 编排, 响应式动效, 原理
Framer Motion 实战（细粒度调用）	skills/framer-motion/SKILL.md	framer-motion, layout, 手势, variants, SVG
移动端触控动效（细粒度调用）	skills/mobile-touch/SKILL.md	触控, 手势, 弹簧, 页面过渡, 原生质感
Tailwind 动画（细粒度调用）	skills/tailwind-animations/SKILL.md	tailwind, animate, 关键帧, transition, motion

路由规则：先判断任务属于「选型 / CSS 纪律 / 性能可访问性 / 设计规范」哪类方法论 → 读 references/；要落地某个具体栈的写法 → 直接调 skills/ 对应子技能。

放在 scripts/，优先用脚本处理重复/确定性任务，而非每次重写代码：

scripts/lint_css_keyframes.py --css src/ --config assets/motion-rules.json — 查 @keyframes 重名、起止是否用 transform/opacity、是否动 layout 属性、引用是否未定义

运行示例：

python3 scripts/lint_css_keyframes.py --css src/ --config assets/motion-rules.json

assets/ 提供可直接套用的配置与模板：