假设你要给一个后台列表加“卡片飞入”效果，第一反应往往是打开动画库找参数。这套 Skill 的顺序恰好相反：先用 grilling 把“这个动效解决什么交互问题”追问到底，纯装饰的部分在这一步就该被砍掉。留下来的动效才交给 motion-design 定时长和缓动，页面级跳转交给 vercel-react-view-transitions，滚动触发交给 gsap-framer-scroll-animation，3D 场景交给 threejs-animation。
动效写出来只是开始。vercel-react-best-practices 管住组件别因动画反复重渲染，web-perf 用 Chrome DevTools 看动画期间的真实帧率，webapp-testing 用 Playwright 把连点、打断、快速切换跑一遍。
最后两步常被跳过：fixing-accessibility 修键盘焦点和 Tab 导航，accessibility 按 WCAG 检查 prefers-reduced-motion 和闪烁。顺序不能颠倒，因为无障碍和性能问题往往来自前一步没砍干净的需求。