mcpField
P
pr-screenshots

pr-screenshots

github.com/githubテスト・品質40.5k141 回インストール今日更新
リポジトリ

pr-screenshots について

pr-screenshots は、Pull Request に変更前後のスクリーンショットを掲載するためのスキルです。画像の撮影・比較方法に加え、Azure DevOps と GitHub でのアップロード手順や注意点をまとめています。

主な機能

  1. 01変更前後の画像掲載ガイド
  2. 02ビューポートと切り抜きの統一
  3. 03Azure DevOps 添付手順
  4. 04GitHub 画像アップロードの代替策

活用シーン

  1. 01Pull Request のレビューで UI 変更を提示
  2. 02チャートやダッシュボードの更新を比較
  3. 03コマンドライン出力の変更を記録

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/pr-screenshotsを入力して読み込まれたか確認します。

詳細

PR のスクリーンショット

プルリクエストの説明に変更前と変更後のスクリーンショットを埋め込み、ブランチをチェックアウトしなくてもレビュー担当者が見た目の変化を確認できるようにします。

このスキルを使用する場面

PR で目に見える変更がある場合に、このスキルを使用します。

  • レイアウト、スタイリング、CSS
  • グラフ、ダッシュボード、データの可視化
  • UI コンポーネント、フォーム、モーダル
  • エラーメッセージ、CLI 出力、ログの書式設定

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)

文章は簡潔にします。各画像につき、注目してほしい点を説明する文を 1〜2 文添えます。伝えたいことの大部分は画像に任せましょう。

複数の変更

見た目に関する変更が複数ある 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 での注意点：

  • dev.azure.com/{org} ではなく {org}.visualstudio.com を使用します — AzDO の Markdown レンダラーは .visualstudio.com を使用します。dev.azure.com 形式では読み込みが明らかに遅くなります。
  • PUT ではなく POST を使用します（PUT は 405 を返します）。
  • API バージョンは 7.1-preview.1 である必要があります。
  • 同じファイル名で再アップロードすることはできません。新しい名前（例：screenshot-v2.png）を使用してください。
  • Invoke-RestMethod ではなく HttpClient を使用します。IRM はバイナリデータを破損させることがあります。
  • リポジトリ相対パスは PR の説明では機能しません。完全な URL を使用する必要があります。
  • PR のスクリーンショットを載せるためだけに、画像をブランチにコミットしないでください。
GitHub

⚠️ 作業中です。 GitHub のドラッグ＆ドロップによる画像アップロードでは、ブラウザーの Cookie を必要とする内部エンドポイントが使用されます。現時点では、PR の説明に画像をアップロードするための使いやすい公開 API はありません。

現在の回避策： 画像を pr-assets という orphan ブランチにコミットし、blob URL（github.com/{owner}/{repo}/blob/pr-assets/{file}?raw=true）で参照します。機能はしますが扱いにくいため、より良い方法への貢献を歓迎します。

ガイドライン

  1. 変更を加える前に、変更前の状態を撮影します — 撮り忘れやすく、後から元の状態を再現するのは時間がかかり、間違いも起きやすいためです。
  2. 説明は簡潔にします — 変更点を示す文を各画像につき 1〜2 文添えれば十分です。
  3. 折りたたんだセクションより、すぐ見られる画像を優先します — <details> タグ内のスクリーンショットは見落とされやすいためです。
  4. 変更が微妙な場合は注釈を付けます — 違いがすぐに分からない場合は、image-annotations スキルを使ってコールアウトを追加します。
  5. 変更前と変更後のペアでは、ビューポートと切り抜きをそろえます。そうすることで、意味のある比較ができます。

制限事項

  • GitHub での画像アップロードには回避策が必要です（PR の説明に画像をアップロードする公開 API はありません）。
  • Azure DevOps では添付ファイル名を再利用できません。ファイル名は事前に計画してください。
  • 非常に大きな画像（>10MB）は、一部のプラットフォームでインライン表示されないことがあります。

コメント

Markdown 対応