⚡

功能视频录制Skill feature-video

这个技能自动化记录软件功能的视频演示，包括使用agent-browser CLI进行浏览器录制、ffmpeg视频转换、rclone云存储上传，并自动更新GitHub PR描述，以提高代码审查和文档效率。关键词：功能演示、视频录制、GitHub PR、自动化、DevOps、开发工具。

DevOps 0 次安装 0 次浏览 更新于 3/9/2026

名称: 功能视频 描述: 记录一个功能的视频演示，并将其添加到PR描述中

参数

[PR编号或’current’] [可选: 基础URL, 默认localhost:3000]

功能视频演示

<command_purpose>记录一个展示功能的视频演示，上传它，并将其添加到PR描述中。</command_purpose>

介绍

<role>开发者关系工程师创建功能演示视频</role>

这个命令为PR文档创建专业的功能演示视频：

  • 使用agent-browser CLI记录浏览器交互
  • 演示完整的用户流程
  • 上传视频以便轻松分享
  • 更新PR描述并嵌入视频

先决条件

<requirements>

  • 本地开发服务器运行中（例如，bin/dev，rails server）
  • agent-browser CLI已安装
  • 具有PR的Git仓库需要文档化
  • ffmpeg已安装（用于视频转换）
  • rclone已配置（可选，用于云上传 - 见rclone技能） </requirements>

设置

检查安装：

command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"

如果需要安装：

npm install -g agent-browser && agent-browser install

参见agent-browser技能获取详细用法。

主要任务

1. 解析参数

<parse_args>

参数： $ARGUMENTS

解析输入：

  • 第一个参数：PR编号或"current"（默认为当前分支的PR）
  • 第二个参数：基础URL（默认为http://localhost:3000）
# 如果需要，获取当前分支的PR编号
gh pr view --json number -q '.number'

</parse_args>

2. 收集功能上下文

<gather_context>

获取PR详情：

gh pr view [number] --json title,body,files,headRefName -q '.'

获取更改的文件：

gh pr view [number] --json files -q '.files[].path'

将文件映射到可测试的路由（与playwright-test相同）：

文件模式 路由(s)
app/views/users/* /users, /users/:id, /users/new
app/controllers/settings_controller.rb /settings
app/javascript/controllers/*_controller.js 使用该Stimulus控制器的页面
app/components/*_component.rb 渲染该组件的页面

</gather_context>

3. 计划视频流程

<plan_flow>

在录制前，创建一个镜头列表：

  1. 开场镜头：主页或起点（2-3秒）
  2. 导航：用户如何到达功能
  3. 功能演示：核心功能（主要焦点）
  4. 边界情况：错误状态、验证等（如果适用）
  5. 成功状态：完成的操作/结果

询问用户确认或调整流程：

**提议的视频流程**

基于PR #[number]: [标题]

1. 开始于：/[starting-route]
2. 导航到：/[feature-route]
3. 演示：
   - [动作1]
   - [动作2]
   - [动作3]
4. 显示结果：[成功状态]

预计时长：~[X]秒

这看起来正确吗？
1. 是，开始录制
2. 修改流程（描述更改）
3. 添加特定的交互来演示

</plan_flow>

4. 设置视频录制

<setup_recording>

创建视频目录：

mkdir -p tmp/videos

录制方法：使用浏览器截图作为帧

agent-browser在关键时刻捕获截图，然后使用ffmpeg组合成视频：

ffmpeg -framerate 2 -pattern_type glob -i 'tmp/screenshots/*.png' -vf "scale=1280:-1" tmp/videos/feature-demo.gif

</setup_recording>

5. 录制演示

<record_walkthrough>

执行计划的流程，捕获每个步骤：

步骤1：导航到起点

agent-browser open "[base-url]/[start-route]"
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/01-start.png

步骤2：执行导航/交互

agent-browser snapshot -i  # 获取引用
agent-browser click @e1    # 点击导航元素
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/02-navigate.png

步骤3：演示功能

agent-browser snapshot -i  # 获取功能元素的引用
agent-browser click @e2    # 点击功能元素
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/03-feature.png

步骤4：捕获结果

agent-browser wait 2000
agent-browser screenshot tmp/screenshots/04-result.png

从截图创建视频/GIF：

# 创建目录
mkdir -p tmp/videos tmp/screenshots

# 创建MP4视频（推荐 - 更好质量，更小大小）
# -framerate 0.5 = 每帧2秒（较慢播放）
# -framerate 1 = 每帧1秒
ffmpeg -y -framerate 0.5 -pattern_type glob -i 'tmp/screenshots/*.png' \
  -c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \
  tmp/videos/feature-demo.mp4

# 创建低质量GIF用于预览（小文件，用于GitHub嵌入）
ffmpeg -y -framerate 0.5 -pattern_type glob -i 'tmp/screenshots/*.png' \
  -vf "scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse" \
  -loop 0 tmp/videos/feature-demo-preview.gif

注意：

  • MP4缩放中的-2确保高度能被2整除（H.264所需）
  • 预览GIF使用640px宽度和128种颜色以保持文件大小较小（约100-200KB）

</record_walkthrough>

6. 上传视频

<upload_video>

使用rclone上传：

# 检查rclone是否配置
rclone listremotes

# 上传视频、预览GIF和截图到云存储
# 使用--s3-no-check-bucket以避免权限错误
rclone copy tmp/videos/ r2:kieran-claude/pr-videos/pr-[number]/ --s3-no-check-bucket --progress
rclone copy tmp/screenshots/ r2:kieran-claude/pr-videos/pr-[number]/screenshots/ --s3-no-check-bucket --progress

# 列出上传的文件
rclone ls r2:kieran-claude/pr-videos/pr-[number]/

公共URL（R2带公共访问）：

视频: https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-[number]/feature-demo.mp4
预览: https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-[number]/feature-demo-preview.gif

</upload_video>

7. 更新PR描述

<update_pr>

获取当前PR正文：

gh pr view [number] --json body -q '.body'

添加视频部分到PR描述：

如果PR已有视频部分，替换它。否则，追加：

重要： GitHub无法直接嵌入外部MP4。使用可点击的GIF链接到视频：

## 演示

[![功能演示]([preview-gif-url])]([video-mp4-url])

*点击查看完整视频*

示例：

[![功能演示](https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-137/feature-demo-preview.gif)](https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-137/feature-demo.mp4)

更新PR：

gh pr edit [number] --body "[更新后的正文带视频部分]"

或者如果首选，作为评论添加：

gh pr comment [number] --body "## 功能演示

![演示]([视频-url])

_此PR中更改的自动演示_"

</update_pr>

8. 清理

<cleanup>

# 可选：清理截图
rm -rf tmp/screenshots

# 保留视频以供参考
echo "视频保留在：tmp/videos/feature-demo.gif"

</cleanup>

9. 摘要

<summary>

呈现完成摘要：

## 功能视频完成

**PR：** #[number] - [标题]
**视频：** [url或本地路径]
**时长：** ~[X]秒
**格式：** [GIF/MP4]

### 捕获的镜头
1. [起点] - [描述]
2. [导航] - [描述]
3. [功能演示] - [描述]
4. [结果] - [描述]

### PR已更新
- [x] 视频部分已添加到PR描述
- [ ] 准备审核

**下一步：**
- 查看视频以确保准确演示功能
- 与审核者分享以获得上下文

</summary>

快速使用示例

# 为当前分支的PR录制视频
/feature-video

# 为特定PR录制视频
/feature-video 847

# 使用自定义基础URL录制
/feature-video 847 http://localhost:5000

# 为暂存环境录制
/feature-video current https://staging.example.com

提示

  • 保持简短：10-30秒对于PR演示是理想的
  • 关注变化：不要包括无关的UI
  • 显示之前/之后：如果修复bug，先显示损坏状态（如果可能）
  • 如果需要，添加注释：为复杂功能添加文本覆盖