Show Before/After 是一个用于构建“前后对比”HTML 页面的技能。所谓 before/after 页面，就是一个自包含的 HTML 页面，把某个可视化对象的两种状态并排展示，并把推理说明固定到读者能看到的具体画面上。Before 通常是当前状态；After 则是一个计划、一个已完成的分支，或者一个替代方案。
用途 该技能用于展示视觉变化：UI、图表、示意图、渲染后的文档、图像输出或终端等。它帮助读者同时看到“改之前”和“改之后”的样子，并把每个变化点用编号注释对应到具体元素或区域上。
主要能力
- 并排展示两个状态：Before 与 After 各占一个窗格（pane），标题分别为“Before · ”和“After · ”。
- 忠实来源渲染：每一侧都从可用的最忠实来源渲染，并在窗格标题下方标注来源（例如 "Current app.css"、"localhost:5173 on main"、"matplotlib, seed 0"、"Screenshot, macOS"）。
- 多种来源形式：
- 两种状态都作为网页运行时，为每个 <iframe> 指向各自的服务器。
- HTML、CSS 或 SVG 需要重建时（Web UI、示意图、邮件、渲染文档），把真实源码放入 <iframe srcdoc>，从而隔离两份样式表。
- 渲染输出（图表、模型预测、原生或移动 UI）：每侧一张图像，由各自修订版本下的真实代码生成。
- 文本输出（终端、日志、复制内容）：每侧在等宽字体块中放入真实文本。
- 公平对比：给两侧输入相同的输入、数据和随机种子，使变化成为唯一的差异。
- 页面结构：先标题，再用一两句话说明“什么变了、什么保持不变”。
- 控件行：只放这次对比需要的控件，例如注释开关、布局（并排 / 堆叠）、视口、长框架的同步滚动，以及用于触发变化的输入变体。
- 编号注释：每个窗格下方有编号注释。Before 的注释指出问题，After 的注释指出修复。每条注释是一个加粗的主张加一句说明原因，并在存在具体数字时给出数字（px、计数、价格、指标）。
- 图钉联动：在每个注释所描述的元素或区域上放置编号图钉；悬停注释会高亮对应图钉，悬停图钉会高亮对应注释。
使用方式 把页面写入 $TMPDIR/<topic>/before-after.html，并在后台浏览器窗口中打开它的 file:// URL，然后回复绝对路径。srcdoc iframe、指向正在运行服务器的 iframe，以及页面旁边的图片都可以从 file:// 加载，因此可以跳过服务器。只有当页面需要浏览器在 file:// 下会阻止的能力（fetch、ES module 脚本或本地字体文件）时，才用 python3 -m http.server 提供该目录。
适用场景
- 展示 UI 界面修改前后的视觉差异。
- 对比图表、示意图、渲染文档或图像输出的变化。
- 对比终端输出、日志或其他文本内容的前后差异。
- 需要把每条说明固定到画面具体位置的评审或演示场景。
完成标准 当每条注释都有图钉指向它所描述的内容，并且每一侧都与其标注的来源一致时，页面即完成。
限制 资料未提供关于收费、价格、平台支持范围、性能表现等方面的更多信息，暂未提供。