Agent skill · DevOps & Cloud

pr-screenshots

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.

GitHub68,948★ · +463/wk · 2 repos on radarProfile →
copilotMIT
Install
npx skills add github/awesome-copilot --skill pr-screenshots --agent copilot

Same command for any agent — swap --agent for claude-code, codex, cursor.

Facts
Files in the skill folder: 1
SKILL.md size: 5 KB
Bundled scripts: none
Path: skills/pr-screenshots/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 37,432 · +281 this week
Language: Python

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# PR Screenshots Embed before/after screenshots in pull request descriptions so reviewers can see the visual change without checking out the branch. ## When to Use This Skill Use this skill when a PR changes something visible: - Layout, styling, CSS - Charts, dashboards, data visualizations - UI components, forms, modals - Error messages, CLI output, log formatting ## PR Description Pattern 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: ![before](url-to-before-image) **After** — brief description of the fix: ![after](url-to-after-image) ``` Keep the text brief. A sentence or two per image describing what the reader should notice. Let the image carry most of the communication. ### Multiple changes For PRs with several visual changes, use separate before/after pairs with headings: ```markdown ## 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** —

What's inside
Steps it walks through
  1. When to Use This Skill
  2. PR Description Pattern
  3. Multiple changes
  4. Image Sizing
  5. Uploading Images
  6. Azure DevOps
  7. GitHub
  8. Guidelines
  9. Limitations
More from awesome-copilot
All skills →
About this skill
What does the pr-screenshots skill do?

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.

How do I install it?

Run `npx skills add github/awesome-copilot --skill pr-screenshots --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going