feature-video
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFeature Video Walkthrough
功能视频演示
<command_purpose>Record a video walkthrough demonstrating a feature, upload it, and add it to the PR description.</command_purpose>
<command_purpose>录制演示功能的视频讲解，上传并添加到PR描述中。</command_purpose>
Introduction
简介
<role>Developer Relations Engineer creating feature demo videos</role>
This command creates professional video walkthroughs of features for PR documentation:
- Records browser interactions using agent-browser CLI
- Demonstrates the complete user flow
- Uploads the video for easy sharing
- Updates the PR description with an embedded video
<role>开发者关系工程师创建功能演示视频</role>
此命令为PR文档创建专业的功能视频讲解：
- 使用agent-browser CLI录制浏览器交互
- 演示完整的用户流程
- 上传视频以便轻松分享
- 更新PR描述并嵌入视频
Prerequisites
前提条件
<requirements>
- Local development server running (e.g., `bin/dev`, `rails server`)
- agent-browser CLI installed
- Git repository with a PR to document
- `ffmpeg` installed (for video conversion)
- `rclone` configured (optional, for cloud upload - see rclone skill)
- Public R2 base URL known (for example, `https://<public-domain>.r2.dev`)
</requirements>
<requirements>
- 本地开发服务器正在运行（例如`bin/dev`、`rails server`）
- 已安装agent-browser CLI
- 包含待记录PR的Git仓库
- 已安装`ffmpeg`（用于视频转换）
- 已配置`rclone`（可选，用于云上传 - 查看rclone技能）
- 已知公开R2基础URL（例如`https://<public-domain>.r2.dev`）
</requirements>
Setup
设置
Check installation:
bash
command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"Install if needed:
bash
npm install -g agent-browser && agent-browser installSee the skill for detailed usage.
agent-browser检查安装情况：
bash
command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"如需安装：
bash
npm install -g agent-browser && agent-browser install查看技能了解详细用法。
agent-browserMain Tasks
主要任务
1. Parse Arguments
1. 解析参数
<parse_args>
Arguments: $ARGUMENTS
Parse the input:
- First argument: PR number or "current" (defaults to current branch's PR)
- Second argument: Base URL (defaults to )
http://localhost:3000
bash
undefined<parse_args>
参数： $ARGUMENTS
解析输入：
- 第一个参数：PR编号或"current"（默认为当前分支的PR）
- 第二个参数：基础URL（默认为）
http://localhost:3000
bash
undefinedGet PR number for current branch if needed
必要时获取当前分支的PR编号
gh pr view --json number -q '.number'
</parse_args>gh pr view --json number -q '.number'
</parse_args>2. Gather Feature Context
2. 收集功能上下文
<gather_context>
Get PR details:
bash
gh pr view [number] --json title,body,files,headRefName -q '.'Get changed files:
bash
gh pr view [number] --json files -q '.files[].path'Map files to testable routes (same as playwright-test):
| File Pattern | Route(s) |
|---|---|
| |
| |
| Pages using that Stimulus controller |
| Pages rendering that component |
</gather_context>
<gather_context>
获取PR详情：
bash
gh pr view [number] --json title,body,files,headRefName -q '.'获取变更文件：
bash
gh pr view [number] --json files -q '.files[].path'将文件映射到可测试路由（与playwright-test相同）：
| 文件模式 | 路由 |
|---|---|
| |
| |
| 使用该Stimulus控制器的页面 |
| 渲染该组件的页面 |
</gather_context>
3. Plan the Video Flow
3. 规划视频流程
<plan_flow>
Before recording, create a shot list:
- Opening shot: Homepage or starting point (2-3 seconds)
- Navigation: How user gets to the feature
- Feature demonstration: Core functionality (main focus)
- Edge cases: Error states, validation, etc. (if applicable)
- Success state: Completed action/result
Ask user to confirm or adjust the flow:
markdown
**Proposed Video Flow**
Based on PR #[number]: [title]
1. Start at: /[starting-route]
2. Navigate to: /[feature-route]
3. Demonstrate:
- [Action 1]
- [Action 2]
- [Action 3]
4. Show result: [success state]
Estimated duration: ~[X] seconds
Does this look right?
1. Yes, start recording
2. Modify the flow (describe changes)
3. Add specific interactions to demonstrate</plan_flow>
<plan_flow>
录制前，创建镜头列表：
- 开场镜头：首页或起始点（2-3秒）
- 导航：用户如何进入功能页面
- 功能演示：核心功能（重点）
- 边缘情况：错误状态、验证等（如适用）
- 成功状态：完成的操作/结果
请用户确认或调整流程：
markdown
**提议的视频流程**
基于PR #[number]：[title]
1. 起始位置：/[starting-route]
2. 导航至：/[feature-route]
3. 演示内容：
- [操作1]
- [操作2]
- [操作3]
4. 展示结果：[成功状态]
预计时长：~[X]秒
此流程是否合适？
1. 是，开始录制
2. 修改流程（描述变更）
3. 添加需要演示的特定交互</plan_flow>
4. Setup Video Recording
4. 设置视频录制
<setup_recording>
Create videos directory:
bash
mkdir -p tmp/videosRecording approach: Use browser screenshots as frames
agent-browser captures screenshots at key moments, then combine into video using ffmpeg:
bash
ffmpeg -framerate 2 -pattern_type glob -i 'tmp/screenshots/*.png' -vf "scale=1280:-1" tmp/videos/feature-demo.gif</setup_recording>
<setup_recording>
创建视频目录：
bash
mkdir -p tmp/videos录制方式：使用浏览器截图作为帧
agent-browser在关键时刻捕获截图，然后使用ffmpeg合并为视频：
bash
ffmpeg -framerate 2 -pattern_type glob -i 'tmp/screenshots/*.png' -vf "scale=1280:-1" tmp/videos/feature-demo.gif</setup_recording>
5. Record the Walkthrough
5. 录制演示视频
<record_walkthrough>
Execute the planned flow, capturing each step:
Step 1: Navigate to starting point
bash
agent-browser open "[base-url]/[start-route]"
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/01-start.pngStep 2: Perform navigation/interactions
bash
agent-browser snapshot -i # Get refs
agent-browser click @e1 # Click navigation element
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/02-navigate.pngStep 3: Demonstrate feature
bash
agent-browser snapshot -i # Get refs for feature elements
agent-browser click @e2 # Click feature element
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/03-feature.pngStep 4: Capture result
bash
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/04-result.pngCreate video/GIF from screenshots:
bash
undefined<record_walkthrough>
执行规划好的流程，捕获每个步骤：
步骤1：导航至起始点
bash
agent-browser open "[base-url]/[start-route]"
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/01-start.png步骤2：执行导航/交互
bash
agent-browser snapshot -i # 获取引用
agent-browser click @e1 # 点击导航元素
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/02-navigate.png步骤3：演示功能
bash
agent-browser snapshot -i # 获取功能元素的引用
agent-browser click @e2 # 点击功能元素
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/03-feature.png步骤4：捕获结果
bash
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/04-result.png从截图创建视频/GIF：
bash
undefinedCreate directories
创建目录
mkdir -p tmp/videos tmp/screenshots
mkdir -p tmp/videos tmp/screenshots
Create MP4 video (RECOMMENDED - better quality, smaller size)
创建MP4视频（推荐 - 质量更好，体积更小）
-framerate 0.5 = 2 seconds per frame (slower playback)
-framerate 0.5 = 每帧2秒（播放速度较慢）
-framerate 1 = 1 second per frame
-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
-c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2"
tmp/videos/feature-demo.mp4
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
-c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2"
tmp/videos/feature-demo.mp4
Create low-quality GIF for preview (small file, for GitHub embed)
创建低质量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
-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
**Note:**
- The `-2` in MP4 scale ensures height is divisible by 2 (required for H.264)
- Preview GIF uses 640px width and 128 colors to keep file size small (~100-200KB)
</record_walkthrough>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
-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 the Video
6. 上传视频
<upload_video>
Upload with rclone:
bash
undefined<upload_video>
使用rclone上传：
bash
undefinedCheck rclone is configured
检查rclone是否已配置
rclone listremotes
rclone listremotes
Set your public base URL (NO trailing slash)
设置你的公开基础URL（无末尾斜杠）
PUBLIC_BASE_URL="https://<your-public-r2-domain>.r2.dev"
PUBLIC_BASE_URL="https://<your-public-r2-domain>.r2.dev"
Upload video, preview GIF, and screenshots to cloud storage
上传视频、预览GIF和截图到云存储
Use --s3-no-check-bucket to avoid permission errors
使用--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 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
List uploaded files
列出已上传文件
rclone ls r2:kieran-claude/pr-videos/pr-[number]/
rclone ls r2:kieran-claude/pr-videos/pr-[number]/
Build and validate public URLs BEFORE updating PR
在更新PR之前构建并验证公开URL
VIDEO_URL="$PUBLIC_BASE_URL/pr-videos/pr-[number]/feature-demo.mp4"
PREVIEW_URL="$PUBLIC_BASE_URL/pr-videos/pr-[number]/feature-demo-preview.gif"
curl -I "$VIDEO_URL"
curl -I "$PREVIEW_URL"
VIDEO_URL="$PUBLIC_BASE_URL/pr-videos/pr-[number]/feature-demo.mp4"
PREVIEW_URL="$PUBLIC_BASE_URL/pr-videos/pr-[number]/feature-demo-preview.gif"
curl -I "$VIDEO_URL"
curl -I "$PREVIEW_URL"
Require HTTP 200 for both URLs; stop if either fails
要求两个URL均返回HTTP 200；若任一失败则停止
curl -I "$VIDEO_URL" | head -n 1 | grep -q ' 200 ' || exit 1
curl -I "$PREVIEW_URL" | head -n 1 | grep -q ' 200 ' || exit 1
</upload_video>curl -I "$VIDEO_URL" | head -n 1 | grep -q ' 200 ' || exit 1
curl -I "$PREVIEW_URL" | head -n 1 | grep -q ' 200 ' || exit 1
</upload_video>7. Update PR Description
7. 更新PR描述
<update_pr>
Get current PR body:
bash
gh pr view [number] --json body -q '.body'Add video section to PR description:
If the PR already has a video section, replace it. Otherwise, append:
IMPORTANT: GitHub cannot embed external MP4s directly. Use a clickable GIF that links to the video:
markdown
undefined<update_pr>
获取当前PR正文：
bash
gh pr view [number] --json body -q '.body'在PR描述中添加视频部分：
如果PR已有视频部分，请替换它；否则，追加：
重要提示： GitHub无法直接嵌入外部MP4。请使用可点击的GIF链接到视频：
markdown
undefinedDemo
演示
Click to view full video
Example:
```markdown
[](https://<your-public-r2-domain>.r2.dev/pr-videos/pr-137/feature-demo.mp4)Update the PR:
bash
gh pr edit [number] --body "[updated body with video section]"Or add as a comment if preferred:
bash
gh pr comment [number] --body "## Feature Demo
_Automated walkthrough of the changes in this PR_"</update_pr>
点击查看完整视频
示例：
```markdown
[](https://<your-public-r2-domain>.r2.dev/pr-videos/pr-137/feature-demo.mp4)更新PR：
bash
gh pr edit [number] --body "[包含视频部分的更新后正文]"或者（如偏好）添加为评论：
bash
gh pr comment [number] --body "## 功能演示
_此PR变更的自动化演示_</update_pr>
8. Cleanup
8. 清理
<cleanup>
bash
undefined<cleanup>
bash
undefinedOptional: Clean up screenshots
可选：清理截图
rm -rf tmp/screenshots
rm -rf tmp/screenshots
Keep videos for reference
保留视频以供参考
echo "Video retained at: tmp/videos/feature-demo.gif"
</cleanup>echo "视频保留在：tmp/videos/feature-demo.gif"
</cleanup>9. Summary
9. 总结
<summary>
Present completion summary:
markdown
undefined<summary>
展示完成总结：
markdown
undefinedFeature Video Complete
功能视频录制完成
PR: #[number] - [title]
Video: [url or local path]
Duration: ~[X] seconds
Format: [GIF/MP4]
PR： #[number] - [title]
视频： [URL或本地路径]
时长： ~[X]秒
格式： [GIF/MP4]
Shots Captured
捕获的镜头
- [Starting point] - [description]
- [Navigation] - [description]
- [Feature demo] - [description]
- [Result] - [description]
- [起始点] - [描述]
- [导航] - [描述]
- [功能演示] - [描述]
- [结果] - [描述]
PR Updated
PR已更新
- Video section added to PR description
- Ready for review
Next steps:
- Review the video to ensure it accurately demonstrates the feature
- Share with reviewers for context
</summary>- 视频部分已添加到PR描述
- 准备好评审
下一步：
- 查看视频以确保其准确演示了功能
- 与评审人员分享以提供上下文
</summary>Quick Usage Examples
快速使用示例
bash
undefinedbash
undefinedRecord video for current branch's PR
为当前分支的PR录制视频
/feature-video
/feature-video
Record video for specific PR
为特定PR录制视频
/feature-video 847
/feature-video 847
Record with custom base URL
使用自定义基础URL录制
/feature-video 847 http://localhost:5000
/feature-video 847 http://localhost:5000
Record for staging environment
为 staging 环境录制
/feature-video current https://staging.example.com
undefined/feature-video current https://staging.example.com
undefinedTips
小贴士
- Keep it short: 10-30 seconds is ideal for PR demos
- Focus on the change: Don't include unrelated UI
- Show before/after: If fixing a bug, show the broken state first (if possible)
- Annotate if needed: Add text overlays for complex features
- 保持简短：PR演示的理想时长为10-30秒
- 聚焦变更：不要包含无关的UI
- 展示前后对比：如果是修复bug，尽可能先展示错误状态
- 必要时添加注释：为复杂功能添加文本覆盖层