Add visual-pr plugin — screenshot capture, annotation, and PR embedding#1804
Open
nohwnd wants to merge 4 commits into
Open
Add visual-pr plugin — screenshot capture, annotation, and PR embedding#1804nohwnd wants to merge 4 commits into
nohwnd wants to merge 4 commits into
Conversation
…nd 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>
github-actions
Bot
added
new-submission
Contributor
🔍 Skill Validator Results
Summary
Full validator output```text Found 4 skill(s) [image-annotations] 📊 image-annotations: 6,966 BPE tokens [chars/4: 5,956] (comprehensive ✗), 29 sections, 8 code blocks [image-annotations] ⚠ Skill is 6,966 BPE tokens (chars/4 estimate: 5,956) — "comprehensive" skills hurt performance by 2.9pp on average. Consider splitting into 2–3 focused skills. [pr-screenshots] 📊 pr-screenshots: 1,120 BPE tokens [chars/4: 1,220] (detailed ✓), 13 sections, 5 code blocks [screen-recording] 📊 screen-recording: 1,999 BPE tokens [chars/4: 2,003] (detailed ✓), 22 sections, 9 code blocks [ui-screenshots] 📊 ui-screenshots: 1,810 BPE tokens [chars/4: 1,867] (detailed ✓), 16 sections, 8 code blocks ✅ All checks passed (4 skill(s)) ``` |
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a new “visual PR” plugin and supporting skills documentation to help developers capture UI screenshots, annotate images, create GIF demos, and embed before/after visuals in PR descriptions.
Changes:
- Added 4 new skills guides: UI screenshots, image annotations, screen recording, and PR screenshot embedding
- Added Visual PR plugin README and plugin manifest (
plugin.json) - Included code snippets/workflows for Playwright, Pillow, imageio, and (Windows) desktop capture via
mss+ Win32 APIs
Reviewed changes
Copilot reviewed 6 out of 10 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/ui-screenshots/SKILL.md | New guide for Playwright screenshots + PIL cropping + desktop window capture notes |
| skills/screen-recording/SKILL.md | New guide for capturing frames and assembling animated GIF demos |
| skills/pr-screenshots/SKILL.md | New guide for embedding screenshots in PRs (AzDO + GitHub) |
| skills/image-annotations/SKILL.md | New guide for annotating images/GIFs with Pillow |
| plugins/visual-pr/README.md | Plugin overview and examples linking the new skills |
| plugins/visual-pr/.github/plugin/plugin.json | Plugin manifest wiring the plugin to skill directories |
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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>
github-actions
Bot
added
the
skill-check-warning
…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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Four skills + one plugin that teach Copilot to capture UI screenshots, annotate them with algorithmic label placement, embed before/after images in PR descriptions, and record animated GIF demos.
Skills
Plugin
visual-prbundles all four. README includes a demo showing the annotation engine on GitHub Issues — before/after screenshots, multipurpose callouts from a single prompt, and the debug heatmap view.Needs a vision-capable model. Demo images were generated with Claude Opus 4.6.