关于 deconstruct
deconstruct 是用于拆解动画或交互的技能，面向需要还原和检查界面动效的开发者。它将状态、事件及逐属性时间轨道整理为可拖动查看的时间线，并要求与原始效果慢速对比。
主要功能
- 01记录状态及触发事件
- 02逐属性记录动画参数
- 03基于单一时钟驱动预览
- 04支持拖动、播放与暂停
- 05慢速并排比较原始效果
- 06导出 timeline.js 数据
适用场景
- 01还原页面动画的状态转换
- 02检查各属性的时长与缓动
- 03对比重建效果和录制原片
- 04将时间线数据交给重建项目
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/deconstruct确认已加载。
附带文件agents/openai.yamlviewer.html
详细介绍
拆解
此技能会拆解动画或交互，为每个状态和事件命名，把每次状态转换拆分成每个属性各自的轨道，并将两者放在一个用户可以拖动时间轴的页面上。
逐帧记录
描述不靠感觉。每个状态都有名称，每次状态转换都有触发事件，每个动画属性都有起始值、目标值、延迟、时长和缓动。无法读取的值会标记为 Not verified，绝不估算。
读取计算后的值并排展示证据属于 match。强制组件状态展开属于 lab。打开结果属于 verify。判断动画值是否正确属于 motion。
1. 捕捉实际动画
打开源内容：代码、实时页面或录制视频。读取关键帧、过渡和弹簧配置，或者降低播放速度逐帧查看。只看一遍就完成拆解，属于 deconstruct-capture-the-source。
2. 为状态和事件命名
列出元素可以停留的状态，以及促使它们相互转换的事件，例如按下、松开、解析完成和超时。将它们写成包含状态、进入条件和离开条件的表格。像“它缩小，然后旋转”这样的描述属于 deconstruct-name-the-states。
3. 将每次状态转换拆分成轨道
为每个动画属性分别设置轨道：缩放、不透明度、模糊、宽度、颜色、图标和标签。每条轨道都列出起始值、目标值、延迟、时长和缓动。“大约 300ms”属于 deconstruct-every-property。
保持曲线与原始写法一致。弹簧仍然是弹簧，并保留其刚度、阻尼和质量，或其回弹和时长。把弹簧曲线硬套成猜测的贝塞尔曲线，属于 deconstruct-keep-the-curve。
4. 由同一个时钟驱动
将元素渲染为单个时间值的纯函数。这样，拖动时间轴、暂停和循环播放时，相同时间都会显示相同的帧。只能重放 CSS、无法在过渡中途停止的查看器属于 deconstruct-one-clock。
5. 构建查看器
将 viewer.html 复制到重建项目旁边，作为仅用于开发的页面；按照其头部注释所示的结构，在旁边编写 timeline.js，然后打开页面。页面会显示元素、状态机，以及每条轨道及其实时值。
此技能附带查看器，因此只需编写数据。自行编写标记或样式的页面属于 deconstruct-shipped-viewer。查看器会突出显示当前状态，点击某个状态即可跳转到该状态。保留时间轴拖动条、播放、暂停和 0.25× 速度功能。没有时间轴拖动条的时间轴属于 deconstruct-scrub-the-timeline。
6. 慢速对比
以 0.25× 速度并排播放原版和重建版本。将 recording 设为原版的录制视频，查看器便会在预览旁边按同一个时钟播放视频。记录每一处出现偏差的帧。只以全速检查的拆解属于 deconstruct-compare-slowed。
7. 交付数据
timeline.js 就是交付内容：状态表和轨道作为一个对象保存在其中。重建版本导入该文件，而不是使用副本，这样查看器和最终交付的动画就会读取相同的值。只存在于回复中的时间轴属于 deconstruct-timeline-as-data。发布前限制查看器仅在开发环境中使用，或将其删除，并保留 timeline.js。
配对
每项检查都是一组配对内容。错误的做法旁边就是替代它的做法。
| 规则 | 错误做法 | 替代做法 |
|---|---|---|
deconstruct-capture-the-source | 只看一遍后做出的拆解 | 阅读代码，并以 0.1× 逐帧查看 |
deconstruct-name-the-states | “它缩小，然后旋转” | Idle、Pressed、Copying 和 Copied，以及对应的事件 |
deconstruct-every-property | “约 300ms” | 缩放比例从 1 变为 0.96，持续 120ms，采用 ease-out，在 400ms 时触发 |
deconstruct-keep-the-curve | 将弹簧效果近似为 ease-out | 按原样使用 stiffness: 400, damping: 30 |
deconstruct-one-clock | 使用 CSS 重现的按钮 | 根据同一个 t 计算每一帧 |
deconstruct-scrub-the-timeline | 仅提供循环预览 | 提供时间轴拖动条、播放、暂停和 0.25× |
deconstruct-shipped-viewer | 从头编写查看器页面 | 复制 viewer.html，仅编写 timeline.js |
deconstruct-compare-slowed | 仅以全速检查一次 | 以 0.25× 并排比较原版与重建版本 |
deconstruct-timeline-as-data | 在回复中描述时间轴 | 使用由重建版本导入的 timeline.js |
报告
严重程度。 HIGH 表示未打开源文件就进行拆解，或缺少某个状态。MEDIUM 表示时间估算不准确、曲线被简化、查看器无法拖动时间轴，或查看器是手动编写的。LOW 表示以慢速发现并指出偏差。
格式。 每个根本原因列出一条发现：
file:line - [rule-id] what is wrong
然后提供 Rule | Count | Severity 汇总。只要仍有任何 HIGH，就标记为 Block；否则标记为 Approve。所有无法从源文件读取的值都标记为 Not verified。