用途：在任意页面元素上播放“智能体正在生成此 UI”的动画，结束后交接到真实界面。图形并非伪造，而是从元素自身结构测量而来，因此虚线轮廓、文字行与图标会落在真实位置上。
主要能力：一次构建约 2.6 秒（默认 2400ms 绘制），依次经历点阵场、构造引导线、轮廓描绘、逐部件描绘与自上而下的揭示。每个盒子、文字行和图标路径按文档顺序绘制；按钮、输入框、最大盒子等关键元素会获得引导线、手柄与尺寸标签。
模式：skeleton 提供虚线绘制与揭示，适合 AI 结果卡片、空状态填充、主视觉；skeleton-texts 额外显示生成文本（智能体日志、正在写入的 motion CSS、步骤行），适合落地页、演示、视频等“智能体在工作”叙事，但需要元素旁或下方有空位，否则只回退到步骤行或不显示。
用法：通过 npx skills add Jakubantalik/transitions.dev 安装，或将 ui-generation.js 与 ui-generation.css 复制进项目并全局导入 CSS，在元素所在处导入 generate（属性 API 则导入 auto）。提供 vanilla、属性 API、React/Next.js、Vue、Svelte 的接线示例。generate(element, options) 返回 { finished, cancel, element }。支持 mode、duration、delay、steps、done、code、title、maxParts、keys、onDone 等选项，可用 data-t-generate-skip 排除子元素，通过 CSS 变量调整配色与点大小。
限制：需在元素渲染并确定最终尺寸、字体加载完成后调用（await document.fonts.ready），display:none 的元素无法测量。不要同时自行添加入场动画，不要将其当作加载状态（仅播放一次），不要在服务端导入。prefers-reduced-motion: reduce 时跳过绘制，仅 200ms 淡入。
分类判断：该技能用于在界面元素上播放 UI 生成动画，属于前端与界面动效范畴，归入 frontend。