用途：Chromatic 只告诉你快照变了，却不说明原因。该技能解析 Chromatic URL，找出被比较的两个构建，把两侧已发布的 Storybook 放到 localhost，渲染同一 story，以 DOM 结构、计算样式和 :root 上的自定义属性（设计 token）对比，判断差异属于真实回归还是 flaky。
前置条件与限制：需要 CHROMATIC_TOKEN（否则流程无法进行，参见 references/token.md）；需要 Bun；完整流程还需 chrome-devtools 驱动（MCP 工具或 CLI）。缺少驱动时只能完成步骤 1 和 2，并应报告缺口后停止，不得改用 Playwright、Puppeteer 或 Chromatic 自带对比图来绕开。
使用方式： 步骤 0 预检：bun scripts/preflight.ts --devtools-mcp <yes|no>，输出环境行（运行时、token 剩余时间、可用驱动）。 步骤 1 解析：bun scripts/resolve.ts <chromatic-url> --out <workdir>，输出构建号、分支、提交、未审核变更的 story 及两侧 Storybook 地址，context.json 保存 story id、视口宽度和模式。 步骤 2 选择对比对象：默认对比 Test.baseline；可加 --against，接受分支名、构建号、构建 id 或另一 Chromatic URL。 步骤 3 代理：bun scripts/proxy.ts <base-storybook-host> <head-storybook-host>，为每个 host 输出 http://127.0.0.1:<port>。 步骤 4 渲染对比：以 iframe.html?id=<storyId>&viewMode=story 打开两侧，匹配 context.json 的视口宽度与 globals，确认视口已生效，等待 #storybook-root 有子节点，再用 evaluate_script 提取 outerHTML、计算样式、getBoundingClientRect、:root 自定义属性等，写入 .chromatic-diff/<唯一子目录>/ 后 diff，结束时删除自己的子目录。 步骤 5 给出结论：DOM 不同为结构变更；样式或盒模型不同为样式布局变更；捕获条件下完全一致则快照可能 flaky，需确认两侧确实渲染、视口和 globals 匹配，可对同一页面截图两次比对以佐证，并将 flaky 区分为“两次都正常但不同”（可批准）与“一次捕获本身损坏”（建议重跑而非批准）。结论应结合 context.json 的分支与提交，对应到具体 commit。若中途停止，也要按顺序报告环境行、构建信息、未审核 story、两侧 URL 和缺口及解锁条件。
适用场景：调查 Chromatic 快照变更的根因、判断回归或 flaky、定位设计 token 或样式变化。资料未提供更多平台、收费或效果信息。