面向 UI 生成的骨架屏动效 Agent Skill

是什么：Jakub Antalik（transitions.dev 作者）发布了一个面向 UI 生成的 Agent Skill——骨架屏（skeleton）效果，即他在此前 UI 演示视频中反复使用的手法，示例界面由 transitions.dev 的 UI Agent 构建，推文以视频呈现生成过程与效果。

核心设计：骨架屏模式 = 脉冲占位 + 到内容的交叉淡入揭示，是加载体验的经典方案。视频画面展示了三栏生成工作台：左侧 agent 日志逐条解析部件（PARTS 61/61），中间实时渲染 Token spend 图表卡片与音乐播放器卡片，右侧输出 MOTION.CSS——6 条动效配方、21 个动效 token（如 --bar-morph-dur、cubic-bezier(0.22,1,0.36,1)）。这说明该 skill 把动效判断固化为可复用的配方与变量，而非散落的硬编码样式。

关键洞察：transitions.dev 的方法论是“给 agent 装上动效工艺”：库内含 43+ 精修过渡（包括 skeleton loader and reveal），并提供 npx transitions-agent 为代码库做 0-100 动效评分、以 diff/PR 形式修复、可设 PR 分数门禁；站点还给出用同色幕布 transform 替代 mask 重绘的性能思路。把设计经验编码为 token + recipe，是 AI 生成 UI 提质的可复制路径。

边界与风险：配方覆盖有限场景，复杂业务动效仍需人工打磨；评分器基于启发式规则，分数高不等于体验好；skill 生效依赖 agent 正确引用，且需兼顾 reduced-motion 可访问性。