Back to Details

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:
  1. Analyzes the video to understand what's broken (via 
    eyeroll watch
    )
  2. Extracts error messages, URLs, UI state, and user actions
  3. Searches the codebase for relevant files (route mapping, error grep, component matching)
  4. Diagnoses the root cause
  5. Implements the fix
  6. Writes a test if applicable
  7. Raises a PR with full context linking back to the original video
给定一段展示bug的视频（Loom、YouTube、本地文件、截图均可），这个Skill会完成以下操作：
  1. 分析视频了解问题所在（通过
    eyeroll watch
    ）
  2. 提取错误信息、URL、UI状态和用户操作
  3. 在代码库中搜索相关文件（路由映射、错误检索、组件匹配）
  4. 诊断问题根本原因
  5. 实现修复代码
  6. 适用场景下编写测试用例
  7. 提交包含完整上下文的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:
  1. eyeroll watch https://loom.com/share/abc123
  2. Notes show: 500 error on /api/payments, "billingAddress is undefined"
  3. Grep for "billingAddress" → find 
    src/pages/checkout.tsx
    and 
    api/payments.py
  4. Read files, diagnose: field was renamed in migration but not updated in frontend
  5. Fix both files, write test, raise PR
User: "Checkout is broken after PR #432, here's a recording" [video.mp4] Steps:
  1. eyeroll watch video.mp4 --context "broken after PR #432"
  2. Notes show the error + context points to PR #432
  3. gh pr view 432
    to understand what changed
  4. Cross-reference changes with the error
  5. Fix, test, PR
用户：「修复这个bug：https://loom.com/share/abc123」 执行步骤：
  1. 运行
    eyeroll watch https://loom.com/share/abc123
  2. 分析说明显示：/api/payments接口返回500错误，报错信息为「billingAddress is undefined」
  3. 检索「billingAddress」找到
    src/pages/checkout.tsx
    和
    api/payments.py
    文件
  4. 阅读代码诊断：字段在数据迁移中被重命名，但前端代码没有同步更新
  5. 修复两个文件，编写测试用例，提交PR
用户：「PR #432合并后结账功能异常，这是录屏」[video.mp4] 执行步骤：
  1. 运行
    eyeroll watch video.mp4 --context "broken after PR #432"
  2. 分析说明展示了错误信息，上下文指向PR #432
  3. 运行
    gh pr view 432
    了解改动内容
  4. 比对改动内容和错误信息定位问题
  5. 修复、测试、提交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

Summary

Fix [brief description of the bug]
Fix [brief description of the bug]

Root Cause

Root Cause

[What was wrong and why]
[What was wrong and why]

Bug Evidence

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

Changes

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

Test Plan

Test Plan

  • [how to verify the fix]
undefined
  • [how to verify the fix]
undefined