PR Screenshot Skill

PR截图Skill

Add before/after comparison screenshots to a pull request using browser automation and GitHub CDN. This captures the UI on the base branch (before) and the PR branch (after), then presents them in a side-by-side comparison table.

通过浏览器自动化和GitHub CDN为拉取请求（PR）添加前后对比截图。该技能会在基础分支（变更前）和PR分支（变更后）上捕获UI界面，然后将它们以并排对比表格的形式展示。

Arguments

参数

```
$ARGUMENTS
```
- PR number and optional description of what to screenshot (e.g. pages/routes to capture)

```
$ARGUMENTS
```
- PR编号以及可选的截图内容描述（例如：要捕获的页面/路由）

Execution Steps

执行步骤

1. Parse Arguments & Get Repo Info

1. 解析参数并获取仓库信息

bash

undefined

bash

undefined

Get current repo info

REPO=$(gh repo view --json nameWithOwner -q .nameWithOwner)

Get PR info (base branch, head branch, title, body)

gh pr view <PR_NUMBER> --json baseRefName,headRefName,title,body

Save branch names

BASE_BRANCH=<baseRefName> # e.g. main HEAD_BRANCH=<headRefName> # e.g. feature/new-ui

undefined

BASE_BRANCH=<baseRefName> # e.g. main HEAD_BRANCH=<headRefName> # e.g. feature/new-ui

undefined

2. Capture "Before" Screenshots (Base Branch)

2. 捕获"变更前"截图（基础分支）

bash

undefined

bash

undefined

Stash any uncommitted changes, then checkout the base branch

git stash git checkout $BASE_BRANCH

Install dependencies (in case they differ)

pnpm install

Start dev server

pnpm dev & DEV_PID=$! sleep 5

Create screenshot directories

mkdir -p docs/screenshot/before docs/screenshot/after

Open the page(s) to screenshot

agent-browser open "http://localhost:3000/path/to/feature" sleep 2

Login if needed (check CLAUDE.md for credentials)

agent-browser snapshot -i agent-browser fill @e1 "email" agent-browser fill @e2 "password" agent-browser click @e3

Navigate to the relevant page and take screenshot(s)

agent-browser screenshot docs/screenshot/before/feature-overview.png agent-browser screenshot docs/screenshot/before/feature-detail.png

Stop dev server and close browser

agent-browser close kill $DEV_PID 2>/dev/null || true pkill -f "next dev" || true

undefined

agent-browser close kill $DEV_PID 2>/dev/null || true pkill -f "next dev" || true

undefined

3. Capture "After" Screenshots (PR Branch)

3. 捕获"变更后"截图（PR分支）

bash

undefined

bash

undefined

Checkout the PR branch

git checkout $HEAD_BRANCH git stash pop || true

Install dependencies

pnpm install

Start dev server

pnpm dev & DEV_PID=$! sleep 5

Open the same page(s)

agent-browser open "http://localhost:3000/path/to/feature" sleep 2

Login if needed (same steps as before)

agent-browser snapshot -i agent-browser fill @e1 "email" agent-browser fill @e2 "password" agent-browser click @e3

Navigate to the same page and take screenshot(s)

agent-browser screenshot docs/screenshot/after/feature-overview.png agent-browser screenshot docs/screenshot/after/feature-detail.png

Stop dev server and close browser

agent-browser close kill $DEV_PID 2>/dev/null || true pkill -f "next dev" || true

undefined

agent-browser close kill $DEV_PID 2>/dev/null || true pkill -f "next dev" || true

undefined

4. Screenshot Naming Convention

4. 截图命名规范

Use matching filenames in

before/

and

after/

so the comparison table is easy to construct:

docs/screenshot/
├── before/
│   ├── feature-overview.png
│   ├── feature-detail.png
│   └── feature-empty.png
└── after/
    ├── feature-overview.png
    ├── feature-detail.png
    └── feature-empty.png

Naming ideas:

```
feature-overview.png
```
— main view
```
feature-detail.png
```
— expanded/detailed view
```
feature-empty.png
```
— empty state
```
feature-loading.png
```
— loading state
```
feature-mobile.png
```
— mobile viewport

在

before/

和

after/

目录中使用匹配的文件名，以便轻松构建对比表格：

docs/screenshot/
├── before/
│   ├── feature-overview.png
│   ├── feature-detail.png
│   └── feature-empty.png
└── after/
    ├── feature-overview.png
    ├── feature-detail.png
    └── feature-empty.png

命名建议：

```
feature-overview.png
```
— 主视图
```
feature-detail.png
```
— 展开/详情视图
```
feature-empty.png
```
— 空状态
```
feature-loading.png
```
— 加载状态
```
feature-mobile.png
```
— 移动端视口

5. Commit & Push

5. 提交并推送

bash

git add docs/screenshot/
git commit -m "$(cat <<'EOF'
docs: add before/after screenshots for [feature]

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
EOF
)"
git push

bash

git add docs/screenshot/
git commit -m "$(cat <<'EOF'
docs: add before/after screenshots for [feature]

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
EOF
)"
git push

6. Update PR Body with Before/After Comparison Table

6. 更新PR正文，添加前后对比表格

IMPORTANT: Use GitHub CDN URL format with

?raw=true

:

https://github.com/<REPO>/blob/<BRANCH>/docs/screenshot/<before|after>/<filename>.png?raw=true

Where

<REPO>

is the

nameWithOwner

from step 1 and

<BRANCH>

is the PR head branch.

Update PR body with a comparison table:

bash

gh pr edit <PR_NUMBER> --body "$(cat <<'EOF'

重要提示：使用带

?raw=true

的GitHub CDN链接格式：

https://github.com/<REPO>/blob/<BRANCH>/docs/screenshot/<before|after>/<filename>.png?raw=true

其中

<REPO>

是步骤1中获取的

nameWithOwner

，

<BRANCH>

是PR的头部分支。

使用对比表格更新PR正文：

bash

gh pr edit <PR_NUMBER> --body "$(cat <<'EOF'

PR Title

Summary

[existing summary]

Screenshots

Feature Overview

Before	After

Before	After

Detail View

Before	After

[rest of PR body] EOF )"


**Add one table per page/state you screenshot.** Each table has a single row with the before image on the left and the after image on the right.

Before	After

[rest of PR body] EOF )"


**每个页面/状态添加一个表格**。每个表格包含一行，左侧是变更前的图片，右侧是变更后的图片。

7. Clean Up

7. 清理

bash

agent-browser close
pkill -f "next dev" || true
git checkout $HEAD_BRANCH

bash

agent-browser close
pkill -f "next dev" || true
git checkout $HEAD_BRANCH

GitHub CDN URL Format

GitHub CDN链接格式

Always use this exact format for images to render in GitHub:

https://github.com/OWNER/REPO/blob/BRANCH/path/to/image.png?raw=true

OWNER/REPO: Get from

gh repo view --json nameWithOwner -q .nameWithOwner

BRANCH: The PR head branch name (get from
```
gh pr view
```
)
?raw=true: Required suffix for images to display

请始终使用以下精确格式的图片链接以确保在GitHub中正常显示：

https://github.com/OWNER/REPO/blob/BRANCH/path/to/image.png?raw=true

OWNER/REPO：从

gh repo view --json nameWithOwner -q .nameWithOwner

获取

BRANCH：PR的头部分支名称（从
```
gh pr view
```
获取）
?raw=true：图片正常显示所需的必填后缀

Authentication

身份验证

If the app requires login, check the project's

CLAUDE.md

for test credentials.

如果应用需要登录，请查看项目的

CLAUDE.md

文件获取测试凭据。

Tips

提示

Consistency is key: screenshot the exact same pages/viewports/states on both branches so the comparison is meaningful
Use
```
agent-browser tab list
```
to see all open tabs
Use
```
agent-browser tab N
```
to switch tabs
For elements not in snapshot, use CSS selectors:
```
agent-browser click "button.submit"
```
Scroll with:
```
agent-browser scroll down 500
```
For responsive comparisons, resize the viewport:
```
agent-browser eval "window.resizeTo(375, 812)"
```
If a page doesn't exist on the base branch (new page), skip the "before" screenshot and note it in the PR body as New Page

一致性是关键：在两个分支上捕获完全相同的页面/视口/状态，这样对比才有意义
使用
```
agent-browser tab list
```
查看所有打开的标签页
使用
```
agent-browser tab N
```
切换标签页
对于快照中未包含的元素，使用CSS选择器：
```
agent-browser click "button.submit"
```
滚动页面：
```
agent-browser scroll down 500
```

如需响应式对比，调整视口大小：

agent-browser eval "window.resizeTo(375, 812)"

如果基础分支上不存在某个页面（新增页面），则跳过"变更前"截图，并在PR正文中注明为新增页面

pr-screenshot

Original

Translation

PR Screenshot Skill

PR截图Skill

Arguments

参数

Execution Steps

执行步骤

1. Parse Arguments & Get Repo Info

1. 解析参数并获取仓库信息

Get current repo info

Get current repo info

Get PR info (base branch, head branch, title, body)

Get PR info (base branch, head branch, title, body)

Save branch names

Save branch names

2. Capture "Before" Screenshots (Base Branch)

2. 捕获"变更前"截图（基础分支）

Stash any uncommitted changes, then checkout the base branch

Stash any uncommitted changes, then checkout the base branch

Install dependencies (in case they differ)

Install dependencies (in case they differ)

Start dev server

Start dev server

Create screenshot directories

Create screenshot directories

Open the page(s) to screenshot

Open the page(s) to screenshot

Login if needed (check CLAUDE.md for credentials)

Login if needed (check CLAUDE.md for credentials)

Navigate to the relevant page and take screenshot(s)

Navigate to the relevant page and take screenshot(s)

Stop dev server and close browser

Stop dev server and close browser

3. Capture "After" Screenshots (PR Branch)

3. 捕获"变更后"截图（PR分支）

Checkout the PR branch

Checkout the PR branch

Install dependencies

Install dependencies

Start dev server

Start dev server

Open the same page(s)

Open the same page(s)

Login if needed (same steps as before)

Login if needed (same steps as before)

Navigate to the same page and take screenshot(s)

Navigate to the same page and take screenshot(s)

Stop dev server and close browser

Stop dev server and close browser

4. Screenshot Naming Convention

4. 截图命名规范

5. Commit & Push

5. 提交并推送

6. Update PR Body with Before/After Comparison Table

6. 更新PR正文，添加前后对比表格

PR Title

PR Title

Summary

Summary

Screenshots

Screenshots

Feature Overview

Feature Overview

Detail View

Detail View

7. Clean Up

7. 清理

GitHub CDN URL Format

GitHub CDN链接格式

Authentication

身份验证

Tips

提示