video-to-pr

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Video to PR

从视频到PR

Watch a bug video or screenshot, diagnose the issue, find the relevant code, fix it, and raise a pull request.

查看bug视频或截图，诊断问题，找到相关代码进行修复，然后提交拉取请求。

What This Skill Does

这个Skill的功能

Given a video showing a bug (Loom, YouTube, local file, screenshot), this skill:

Analyzes the video to understand what's broken (via
```
eyeroll watch
```
)
Extracts error messages, URLs, UI state, and user actions
Searches the codebase for relevant files (route mapping, error grep, component matching)
Diagnoses the root cause
Implements the fix
Writes a test if applicable
Raises a PR with full context linking back to the original video

给定一段展示bug的视频（Loom、YouTube、本地文件、截图均可），这个Skill会完成以下操作：

分析视频了解问题所在（通过
```
eyeroll watch
```
）
提取错误信息、URL、UI状态和用户操作
在代码库中搜索相关文件（路由映射、错误检索、组件匹配）
诊断问题根本原因
实现修复代码
适用场景下编写测试用例
提交包含完整上下文的PR，并关联原始视频

Setup

安装配置

bash

pip install eyeroll
eyeroll init          # set up Gemini API key
brew install yt-dlp   # for URL downloads

Or:

export GEMINI_API_KEY=your-key

bash

pip install eyeroll
eyeroll init          # set up Gemini API key
brew install yt-dlp   # for URL downloads

或者执行：

export GEMINI_API_KEY=your-key

When To Use This Skill

适用场景

User shares a bug video and says "fix this" or "raise a PR"
User pastes a Loom/YouTube link showing broken behavior and wants it fixed
User says "watch this and fix it", "create a PR for this bug"
User shares a screenshot of an error and wants it resolved
QA or customer sends a recording of a bug

用户分享bug视频并说明「修复这个问题」或「提交一个PR」
用户粘贴展示异常行为的Loom/YouTube链接，希望修复问题
用户表示「看看这个然后修复」、「为这个bug创建一个PR」
用户分享错误截图，希望解决问题
测试人员或客户发送了bug的录屏

Workflow

工作流程

1. Run: eyeroll watch <source> --context "..." --verbose
2. Read the structured notes — extract error messages, URLs, affected pages
3. Search the codebase:
   - Route/URL visible → match to routing config → find page/handler files
   - Error message visible → grep codebase for exact string
   - Component/page name → find source file
   - API endpoint → find handler
4. Read the identified files
5. Diagnose: cross-reference video observations with code
6. If context mentions regression ("after PR #X", "since last deploy"):
   - Check recent git history for the relevant files
   - git log --since="1 week ago" -- <identified-files>
7. Implement the fix
8. Write a test that would have caught the bug
9. Create branch, commit, push, open PR with:
   - Link to original video (if URL)
   - Summary of what was broken and why
   - What was fixed

1. Run: eyeroll watch <source> --context "..." --verbose
2. Read the structured notes — extract error messages, URLs, affected pages
3. Search the codebase:
   - Route/URL visible → match to routing config → find page/handler files
   - Error message visible → grep codebase for exact string
   - Component/page name → find source file
   - API endpoint → find handler
4. Read the identified files
5. Diagnose: cross-reference video observations with code
6. If context mentions regression ("after PR #X", "since last deploy"):
   - Check recent git history for the relevant files
   - git log --since="1 week ago" -- <identified-files>
7. Implement the fix
8. Write a test that would have caught the bug
9. Create branch, commit, push, open PR with:
   - Link to original video (if URL)
   - Summary of what was broken and why
   - What was fixed

Example Interactions

使用示例

User: "Fix this bug: https://loom.com/share/abc123" Steps:

eyeroll watch https://loom.com/share/abc123

Notes show: 500 error on /api/payments, "billingAddress is undefined"
Grep for "billingAddress" → find
```
src/pages/checkout.tsx
```
and
```
api/payments.py
```
Read files, diagnose: field was renamed in migration but not updated in frontend
Fix both files, write test, raise PR

User: "Checkout is broken after PR #432, here's a recording" [video.mp4] Steps:

eyeroll watch video.mp4 --context "broken after PR #432"

Notes show the error + context points to PR #432
```
gh pr view 432
```
to understand what changed
Cross-reference changes with the error
Fix, test, PR

用户：「修复这个bug：https://loom.com/share/abc123」执行步骤：

运行

eyeroll watch https://loom.com/share/abc123

分析说明显示：/api/payments接口返回500错误，报错信息为「billingAddress is undefined」
检索「billingAddress」找到
```
src/pages/checkout.tsx
```
和
```
api/payments.py
```
文件
阅读代码诊断：字段在数据迁移中被重命名，但前端代码没有同步更新
修复两个文件，编写测试用例，提交PR

用户：「PR #432合并后结账功能异常，这是录屏」[video.mp4] 执行步骤：

运行

eyeroll watch video.mp4 --context "broken after PR #432"

分析说明展示了错误信息，上下文指向PR #432
运行
```
gh pr view 432
```
了解改动内容
比对改动内容和错误信息定位问题
修复、测试、提交PR

Rules

使用规则

Always run
```
eyeroll watch
```
first to get structured notes before touching code.
Do NOT guess what files to change based on the video alone — always search the codebase.
Include the video URL (if available) in the PR description for traceability.
If diagnosis confidence is low, present findings and ask the user before implementing a fix.
If the fix spans multiple files, explain the full scope before making changes.
Write a test when feasible. At minimum, ensure existing tests still pass.
Create the PR as a draft if confidence is medium or lower.

改动代码前务必先运行
```
eyeroll watch
```
获取结构化分析结果
不要仅根据视频猜测需要修改的文件——务必搜索代码库确认
如果有视频URL，要包含在PR描述中以便溯源
如果诊断置信度较低，先展示分析结果，向用户确认后再实现修复
如果修复涉及多个文件，改动前先说明完整的改动范围
可行的情况下编写测试用例，至少要保证现有测试可以正常通过
如果置信度中等或更低，将PR创建为草稿模式

PR Template

PR模板

markdown

undefined

markdown

undefined

Summary

Fix [brief description of the bug]

Root Cause

[What was wrong and why]

Bug Evidence

Video: [link to original video if URL]
Error: [exact error message from video]
Affected page: [URL/route from video]

Video: [link to original video if URL]
Error: [exact error message from video]
Affected page: [URL/route from video]

Changes

[file1]: [what changed and why]
[file2]: [what changed and why]

[file1]: [what changed and why]
[file2]: [what changed and why]

Test Plan

[how to verify the fix]

undefined

[how to verify the fix]

undefined