Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Embed before/after screenshots and annotated images in pull request descriptions. Covers PR description patterns, image upload for Azure DevOps and GitHub, and sizing best practices.
.claude/skills/pr-screenshots/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-08 | ✗→✓ | ▲ Improved | — | — |
| case-10 | ✗→✓ | ▲ Improved | — | — |
| case-21 | ✗→✓ | ▲ Improved | — | — |
| case-02 | ✗→✓ | ▲ Improved | — | — |
| case-13 | ✗→✓ | ▲ Improved | — | — |
Embed before/after screenshots in pull request descriptions so reviewers can see the visual change without checking out the branch.
Use this skill when a PR changes something visible:
Place screenshots directly in the PR description body. Avoid wrapping them in <details> collapse — reviewers are more likely to look at images they can see without clicking.
markdown**Before** — brief description of the problem:  **After** — brief description of the fix: 
Keep the text brief. A sentence or two per image describing what the reader should notice. Let the image carry most of the communication.
For PRs with several visual changes, use separate before/after pairs with headings:
markdown## Filter bar alignment **Before** — 1px border clash between adjacent buttons:  **After** — borders overlap cleanly, hover tint added:  ## Chart tooltip **Before** — tooltip clipped at container edge:  **After** — tooltip repositions to stay visible: 
html <img src="url" width="600" alt="description">
Upload images as PR attachments via the REST API:
powershell$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
Reference in the PR description:
markdown
Azure DevOps gotchas:
{org}.visualstudio.com NOT dev.azure.com/{org} — AzDO's markdown renderer uses .visualstudio.com. The dev.azure.com format loads noticeably slowerPOST not PUT (PUT returns 405)7.1-preview.1screenshot-v2.png)HttpClient not Invoke-RestMethod — IRM can corrupt binary data> ⚠️ Work in progress. GitHub's drag-and-drop image upload uses internal endpoints that require browser cookies. There's no clean public API for uploading images to PR descriptions yet.
Current workaround: Commit images to a pr-assets orphan branch and reference via blob URLs (github.com/{owner}/{repo}/blob/pr-assets/{file}?raw=true). It works but is clunky — contributions for a better approach are welcome.
<details> tags are easy to skipimage-annotations skill to add callouts when the difference isn't immediately obvious| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-04 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-08 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-10 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-15 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-21 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-02 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-13 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-11 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-22 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-14 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-17 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-07 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-18 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-06 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-19 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-09 | pass→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-03 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-20 | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
case-12 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-05 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-01 | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
case-16 | pass→pass | — | — | — | — | — | — | — | — | — | — | — | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +45 percentage points is the difference between those two pass rates over the 22 comparable cases.
The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.
Other measured skills in the registry, with their headline benchmark lift.