Add visual-pr plugin — screenshot capture, annotation, and PR embedding (#1804)

* Add visual-pr plugin: screenshot capture, annotation, PR embedding, and screen recording Four skills that teach Copilot to capture UI screenshots (Playwright + PIL), annotate them with algorithmic label placement, embed before/after images in PR descriptions, and record animated GIF demos. Includes demo images showing the annotation engine on GitHub Issues. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Update generated README tables and marketplace.json Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Embed annotate.py module in image-annotations skill The full working module (annotate_image, grid_image, diff_images) is now included as a code block so users can save it as annotate.py and import directly. Scrubbed project-specific labels from examples. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Address review feedback: mss.mss() context manager, fix RECT struct, consistent placeholder - Use mss.mss() context manager instead of mss.MSS() (ui-screenshots, screen-recording) - Fix broken RECT struct in window+GIF combining example (screen-recording) - Consistent projectId placeholder in AzDO upload example (pr-screenshots) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-27 17:11:44 +00:00 · 2026-05-25 03:22:39 +02:00
parent 7f7599a716
commit 5cab59b03e
13 changed files with 1264 additions and 0 deletions
@@ -0,0 +1,24 @@
+{
+  "name": "visual-pr",
+  "description": "Capture, annotate, and embed screenshots and animated GIF demos in pull request descriptions. Includes Playwright-based UI capture, PIL image annotations, PR embedding workflows for GitHub and Azure DevOps, and screen recording with variable timing.",
+  "version": "1.0.0",
+  "keywords": [
+    "screenshots",
+    "pull-request",
+    "before-after",
+    "annotations",
+    "playwright",
+    "gif",
+    "screen-recording",
+    "visual"
+  ],
+  "author": { "name": "Awesome Copilot Community" },
+  "repository": "https://github.com/github/awesome-copilot",
+  "license": "MIT",
+  "skills": [
+    "./skills/image-annotations/",
+    "./skills/pr-screenshots/",
+    "./skills/screen-recording/",
+    "./skills/ui-screenshots/"
+  ]
+}
@@ -0,0 +1,59 @@
+# Visual PR Plugin
+
+When you change how something looks — a layout, a chart, a form — the PR description should show the change. Not describe it in words. Show it. A before/after screenshot tells your reviewer exactly what happened, and they don't have to check out the branch to see it.
+
+This plugin teaches Copilot to capture screenshots of your web app (or any UI), annotate them with callouts, and embed them in the PR description. Once you get used to having up-to-date screenshots on every visual change, going back to text-only PRs feels like reviewing code with your eyes closed.
+
+## Demo 🎬
+
+It is 2009. You just added the feature to show labels on issues. You better include screenshots because this is huge.
+
+Here is how such PR description would look like with our plugin:
+
+> **Before** — issues list without labels:
+>
+> <img src="demo/before.png" width="600" alt="Issues list without labels">
+>
+> **After** — labels are shown directly on each issue row:
+>
+> <img src="demo/after.png" width="600" alt="Issues list with labels annotated">
+
+---
+
+## It's not just for PRs
+
+The same annotation engine works for any screenshot. Here's a single prompt:
+
+> *"Go to the GitHub issues page of github/awesome-copilot. Screenshot the issues list and annotate: any issue icon, ready-for-review label, repo name, pinned issues, my avatar, most commented issue, New Issue button."*
+
+![Multipurpose annotation — 6 callouts from one prompt](demo/multi.png)
+
+The agent captured the page, identified 6 of 7 requested elements, and annotated them all. It correctly reported that the 7th (user avatar) isn't visible because the page was captured without authentication — no hallucinated annotations.
+
+### Debug mode
+
+Every annotation run can produce a debug heatmap showing how the algorithm chose label placements — contrast scoring, exclusion zones, and candidate rankings:
+
+![Debug heatmap showing placement algorithm](demo/debug.png)
+
+---
+
+## Skills Included
+
+| Skill | What it does |
+|-------|-------------|
+| [ui-screenshots](../../skills/ui-screenshots/SKILL.md) | Capture web UI screenshots with Playwright + PIL crop workflow |
+| [image-annotations](../../skills/image-annotations/SKILL.md) | Annotate any image with callout rectangles, arrows, labels, and color-coded highlights |
+| [pr-screenshots](../../skills/pr-screenshots/SKILL.md) | Embed before/after images in PR descriptions (GitHub + Azure DevOps) |
+| [screen-recording](../../skills/screen-recording/SKILL.md) | Create annotated animated GIF demos with variable timing |
+
+## Use Cases
+
+- **Visual PRs** — show reviewers what changed without checking out the branch
+- **Release notes** — embed GIF demos of new features
+- **Bug reports** — before/after screenshots proving the fix
+- **Documentation** — annotated screenshots with callouts highlighting key areas
+
+## Requirements
+
+This plugin needs a model that can view images — the workflow relies on looking at screenshots to find crop coordinates and verify annotations. The demo images in this README were generated with **Claude Opus 4.6**.