# Dsh Record Browser Gif

用户要求从真实浏览器应用录制 GIF 演示时使用，完成实际操作、采集、本地编码和结果核验。

- Repository: https://github.com/qufei1993/skills-hub (1848 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add qufei1993/skills-hub --skill dsh-record-browser-gif -g -a claude-code -y`
Codex: `npx skills add qufei1993/skills-hub --skill dsh-record-browser-gif -g -a codex -y`
Cursor: `npx skills add qufei1993/skills-hub --skill dsh-record-browser-gif -g -a cursor -y`
Gemini CLI: `npx skills add qufei1993/skills-hub --skill dsh-record-browser-gif -g -a gemini-cli -y`

## Description

用户要求从真实浏览器应用录制 GIF 演示时使用，完成实际操作、采集、本地编码和结果核验。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 录制并核验真实应用演示

用户要求浏览器演示 GIF 时使用。阅读[项目上下文](references/project-context.md)和[验证证据](references/evidence.md)。默认在本地采集；上传、发布或发送须属于用户明确要求的范围。不得伪造应用画面或成功状态。

1. 设计简短的用户操作过程，通常包含 3, 6 个有意义的状态。检查项目启动和构建命令，确认实际运行的产物与版本。全程使用相同的应用源地址、进程或运行实例、视口和会话。录制前先处理旧服务，不能录完再解释。
2. 使用可用浏览器工具真实操作并截图或录屏。优先用环境已有工具，项目声明的浏览器测试库可作备用。缺少浏览器或凭据意味着受阻，不允许合成画面代替。
3. 等待可观察状态，不靠固定休眠。逐一查看采集状态，不隐藏相关失败，避免暴露凭据和私有用户数据。将原始采集文件及状态说明保存在本地证据目录。
4. 确认已安装 `ffmpeg` 和 `ffprobe`，运行自带[编码器](scripts/encode_gif.py)：
   `python3 <skill-dir>/scripts/encode_gif.py <frames-dir> <output.gif> --durations 1,2,2`。
   视频裁剪、速度和末帧停留参数见 `--help`。至少需要两帧，且尺寸一致。默认限制为 5 MiB、宽度 1200、10 fps，可按目标用途调整。没有覆盖原文件的意图时，不使用 `--force`。
5. 读取编码器实际退出状态，以及 JSON 中的尺寸、帧数、时长和大小。编码失败仍可能留下输出文件，文件存在不等于成功。必须从 GIF 本身解码检查帧顺序、调色板、时间和可读性；仅查看源截图无法验证编码结果。
6. 返回本地 GIF，附简短说明和当前应用运行证据。文件过大或不可读时，保留操作过程，调整时长或缩放后重新核验。查看最终文件后，只发布到用户明确指定的目标。