mcpField
P
pr-screenshots

pr-screenshots

github.com/github测试与质量40.5k141 次安装1 天前更新
代码仓库

关于 pr-screenshots

pr-screenshots 是用于在 Pull Request 中呈现前后截图的技能，帮助评审者查看视觉变化。它提供截图规范，以及 Azure DevOps 和 GitHub 的图片上传流程与注意事项。

主要功能

  1. 01前后截图编写指导
  2. 02统一视口与裁剪范围
  3. 03Azure DevOps 附件上传步骤
  4. 04GitHub 图片上传变通方案

适用场景

  1. 01向 Pull Request 评审者展示界面变化
  2. 02对比图表或仪表板更新
  3. 03记录命令行输出变化

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/github/awesome-copilot --skill pr-screenshots

安装后在 Claude Code 中输入/pr-screenshots确认已加载。

详细介绍

PR 截图

在 pull request 描述中嵌入前后对比截图，让评审者无需检出分支就能看到视觉变化。

何时使用此技能

当 PR 更改了任何可见内容时，使用此技能：

  • 布局、样式、CSS
  • 图表、仪表板、数据可视化
  • UI 组件、表单、模态框
  • 错误消息、命令行输出、日志格式

PR 描述模式

将截图直接放在 PR 描述正文中。避免把它们包在 <details> 折叠块里——评审者更有可能看到无需点击就能看到的图片。

**Before** — brief description of the problem:

![before](url-to-before-image)

**After** — brief description of the fix:

![after](url-to-after-image)

文字保持简短。每张图片配一两句话，说明读者应该注意什么。让图片承担大部分沟通任务。

多项更改

对于包含多项视觉更改的 PR，使用带标题的独立前后对比图组：

## Filter bar alignment

**Before** — 1px border clash between adjacent buttons:

![before-filters](url)

**After** — borders overlap cleanly, hover tint added:

![after-filters](url)

## Chart tooltip

**Before** — tooltip clipped at container edge:

![before-tooltip](url)

**After** — tooltip repositions to stay visible:

![after-tooltip](url)

图片尺寸

  • 以原生 1x 分辨率截图——不要用 PIL 调整大小（会产生伪影）
  • 当图片过大时，在 HTML 中控制显示尺寸： 
    <img src="url" width="600" alt="description">
  • 前后对比图组必须使用相同的视口宽度和裁剪范围——否则对比毫无意义

上传图片

Azure DevOps

通过 REST API 将图片作为 PR 附件上传：

$token = az account get-access-token `
    --resource "499b84ac-1321-427f-aa17-267ca6975798" `
    --query accessToken -o tsv

$base = "https://{org}.visualstudio.com/{projectId}/_apis/git/repositories/{repoId}"
$url = "$base/pullRequests/{prId}/attachments/screenshot.png?api-version=7.1-preview.1"

# Use HttpClient — Invoke-RestMethod can corrupt binary data
$client = New-Object System.Net.Http.HttpClient
$client.DefaultRequestHeaders.Authorization = `
    New-Object System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", $token)
$content = New-Object System.Net.Http.ByteArrayContent(
    , [System.IO.File]::ReadAllBytes("screenshot.png")
)
$content.Headers.ContentType = `
    [System.Net.Http.Headers.MediaTypeHeaderValue]::new("application/octet-stream")
$resp = $client.PostAsync($url, $content).Result

在 PR 描述中引用：

![description](https://{org}.visualstudio.com/{projectId}/_apis/git/repositories/{repoId}/pullRequests/{prId}/attachments/screenshot.png)

Azure DevOps 注意事项：

  • 使用 {org}.visualstudio.com，而不是 dev.azure.com/{org}——AzDO 的 markdown 渲染器使用 .visualstudio.com。dev.azure.com 格式加载明显更慢
  • 使用 POST 而非 PUT（PUT 会返回 405）
  • API 版本必须是 7.1-preview.1
  • 不能用相同文件名重新上传——请使用新名称（例如 screenshot-v2.png）
  • 使用 HttpClient 而非 Invoke-RestMethod——IRM 可能损坏二进制数据
  • 仓库相对路径在 PR 描述中不起作用——必须使用完整 URL
  • 不要仅仅为了 PR 截图就把图片提交到分支
GitHub

⚠️ 仍在进行中。 GitHub 的拖放图片上传使用需要浏览器 cookie 的内部端点。目前还没有干净的公开 API 可用于将图片上传到 PR 描述。

当前变通方案： 将图片提交到 pr-assets 孤立分支，并通过 blob URL（github.com/{owner}/{repo}/blob/pr-assets/{file}?raw=true）引用。这可行但很笨拙——欢迎贡献更好的方法。

指南

  1. 在做出更改之前先捕获更改前状态——很容易忘记，而且之后再重建原始状态既慢又容易出错
  2. 保持描述简短——每张图片配一两句话指出更改内容就足够了
  3. 优先使用可见图片而非折叠区块——藏在 <details> 标签后面的截图很容易被跳过
  4. 当更改很细微时进行标注——当差异不是一眼就能看出时，使用 image-annotations 技能添加标注
  5. 在前后对比图组之间匹配视口和裁剪范围，使对比有意义

限制

  • GitHub 图片上传需要变通方案（没有用于 PR 描述图片的公开 API）
  • Azure DevOps 附件文件名不能重复使用——请提前规划命名
  • 非常大的图片（>10MB）在某些平台上可能无法内联渲染

评论

支持 Markdown