⚡

功能视频录制Skill feature-video

这个技能用于自动化记录功能演示视频，自动上传并嵌入到Pull Request（PR）描述中，帮助开发团队和代码评审者更直观地了解代码更改和功能实现，提升开发效率和沟通效果。关键词：视频录制、PR文档、功能演示、自动化、开发工具、代码评审、屏幕录制。

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

name: feature-video description: 记录功能演示视频并将其添加到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 "已安装" || echo "未安装"

如果需要安装：

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相同）：

文件模式 路由
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. 开始于：/[起始路由]
2. 导航到：/[功能路由]
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 = 每秒0.5帧（播放速度较慢）
# -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链接到视频：

## 演示

[![功能演示]([预览-gif-url])]([视频-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

提示

  • 保持简短：PR演示的理想时间为10-30秒
  • 专注于更改：不要包括不相关的UI
  • 显示之前/之后：如果修复错误，先显示损坏状态（如果可能）
  • 如果需要，添加注释：为复杂功能添加文本叠加