Deconstruct 是一个用于拆解动画或交互的技能。其目标是把一段动画或交互从“感觉”变成可检查的数据：命名每个状态和事件，把每个过渡拆成按属性划分的轨道，并在一个可以拖拽 scrub 的页面上同时呈现元素、状态机和每条轨道的实时值。
用途：拆解动画或交互，输出状态表与逐属性时间线。
主要能力：
- 捕获真实运动：从代码、实时页面或录制中读取关键帧、过渡和弹簧配置，或在降低播放速度下逐帧查看。
- 命名状态和事件：列出元素可停留的状态以及驱动状态切换的事件（如 press、release、resolve、timeout），并写成“状态 / 进入事件 / 离开事件”的表格。
- 拆分过渡为轨道：每个动画属性（scale、opacity、blur、width、colour、icon、label 等）单独一条轨道，记录 from、to、delay、duration、easing。
- 保留曲线原样：弹簧保持弹簧参数（stiffness、damping、mass，或 bounce 和 duration），不把弹簧近似成猜测的 bezier。
- 单一时钟驱动：将元素渲染为一个时间值的纯函数，使 scrub、暂停、循环在相同时间显示相同帧。
- 构建查看器：复制技能自带的 viewer.html 作为仅开发用页面，按头部注释所示格式编写 timeline.js 并打开；查看器显示元素、状态机和每条轨道及其实时值，高亮当前状态，点击状态可跳转，保留 scrubber、播放、暂停和 0.25× 速度。
- 慢速对比：以 0.25× 并排播放原始与重建，逐帧命名漂移。
- 数据交接：timeline.js 作为交接产物，包含状态表和轨道的一个对象；重建导入该文件而非副本，使查看器与实际运动读取同一份值。查看器需限制在开发环境或发布前删除，保留 timeline.js。
使用方式：先打开来源（代码、实时页面或录制）读取关键帧、过渡和弹簧配置，或降低播放速度逐帧步进；然后列出状态与事件并写成表格；接着为每个动画属性拆分轨道并记录参数；再以单一时钟渲染元素，复制 viewer.html 并编写 timeline.js 打开查看；最后以 0.25× 并排对比原始与重建，命名每一帧漂移，并交付 timeline.js。输出报告按 file:line - [rule-id] what is wrong 格式，每条根因一个发现，并附 Rule | Count | Severity 汇总；存在 HIGH 时 Block，否则 Approve；无法从来源读取的值标记 Not verified。
适用场景：需要精确拆解动画或交互、审查动效实现、对比重建与原始运动、或以数据形式交接时间线时使用。
限制：资料中未说明该技能支持的具体平台、运行环境、收费方式或价格；部分规则（如 match、lab、verify、motion）仅提及归属，未展开细节；查看器需限制在开发环境或发布前删除；无法读取的值只能标记 Not verified，不得估算。