Record Browser Gif

---
name: record-browser-gif
description: "用户要求录制浏览器或网页演示，或涉及用户可见 GUI 的变更需要演示证据时使用。"
---

# record-browser-gif

本 Skill 仅用于当前项目。用户授权、项目 AGENTS.md 和实际宿主能力优先。

## 准备真实演示

本 Skill 产出本地 GIF。用户要求网页演示或项目实际验收要求演示时使用；不把来源“所有 GUI PR 必录并上传”当作本项目新规则。录制、编码、检查和对外发布是不同步骤。

先读 [工具与编码用法](references/setup.md)，确认浏览器控制能力及媒体依赖。记录授权的目标、代码版本/工作树、实际构建、服务 origin、transport、真实/fixture、模式覆盖与故事路径。指定 PR 的正式证据应来自其精确 head 构建；本地未提交预览可记录内容指纹并明确标签，不能冒充 commit 的证据。

通过应用正常配置解析凭据，不能读取或回显密钥。真实服务/真实模型请求不能换成 mock、注入事件或测试 hook；缺环境就报告。用私有测试数据与隔离 profile/context；不能为隔离擅自清掉用户浏览器状态。没有隔离能力则记录例外/影响，必要时停在准备阶段。

一个故事只来自同一个服务、工作区、会话和运行。失败帧留作诊断，重新录制使用新的运行目录；不能把不同尝试拼成成功路径。停止服务只用本次拥有的 PID/句柄，不用宽泛 pkill。

## 捕获

优先当前宿主的浏览器控制机制；工具支持连续 video 时在同一 context 开启，显式保持 viewport 与 record size 一致。否则捕获同一次运行的连续截图并标记 storyboard；只有浏览器控制不可用时才考虑项目已声明依赖的 Playwright，不自动安装或打开用户浏览器。

选择三到六个有意义的状态，以唯一语义 locator 和可观察状态等待，不用 sleep 证明完成；已经确认状态后可停留便于阅读。完成标记不能误匹配 prompt echo。演示工具调用/错误/恢复时展示身份、状态/稳定错误码及后续结果；瞬态运行窗口需连续捕获或在观察到 marker 的同次操作中截图。

video 关闭 context 并等待 flush 后才保存/编码；单页 video 句柄先保留，不拼其他页面。截图保持同尺寸、裁剪与稳定编号。审查整个选区及中间帧，避免个人数据、凭据 URL、通知和无关内容。保留原始视频/图帧、脚本、时间与 QA 在授权的忽略输出目录。

## 编码与成品检查

使用随包的 `scripts/encode_gif.py`；按 [用法](references/setup.md) 选择连续片段、速度、最终停留、fps、尺寸、颜色与体积。保留因果和结果，不合成缺失状态；公开标注速度/截取区间，不能用加速演示证明响应延迟。

读取编码器 JSON，检查源片段/截图数、frame count、尺寸、时长和 bytes。再观察编码后的 GIF；若查看器只显示首帧，解码 GIF 代表帧检查顺序、调色、可读性及最终停留，不能只看编码前截图。编码器拒绝或检查失败不算成品通过，尤其体积超限时可能已留下未合格文件。

确认产物只落在忽略路径，回传绝对 GIF 路径并展示，说明真实 API/fixture、版本、速度和未覆盖状态。用户未要求上传时到此结束。要求附到 PR 时再读 [发布检查](references/publishing.md)，使用实际支持且获授权的附件路径，不自动提交媒体到分支。

来源、适配边界和许可证见 [provenance.md](provenance.md)。