skills.rest
elbruno
elbrunoCOMMUNITY
Explore all skills by this author →
Website𝕏@elbrunoGitHub

pr-screenshots

Capture Playwright screenshots and embed them in GitHub PR descriptions via temporary branches.

2|Updated Jul 24, 2026
Search Tags:#documentation#pull request#screenshots#github#playwright#gh cli#visual review
One-click install
npx skills add https://github.com/elbruno/ElBruno.MagenticUI --skill pr-screenshots-elbruno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pr-screenshots
Source: https://github.com/elbruno/ElBruno.MagenticUI/tree/main/.squad/templates/skills/pr-screenshots
Command: npx skills add https://github.com/elbruno/ElBruno.MagenticUI --skill pr-screenshots-elbruno

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Reviewers of pull requests with visual changes cannot see what the PR delivers without checking out the branch, and GitHub's CLI cannot upload binary images directly to PR descriptions. ## Core Features & Use Cases - Playwright Screenshot Capture: Reuse existing Playwright test screenshots or write a minimal capture script for docs sites and UI pages. - Temporary Branch Hosting: Push screenshots to an orphan screenshots-temp branch so raw GitHub URLs render images inline in the PR body. - Automated PR Body Updates: Embed markdown image references with gh pr edit and clean up the temporary branch after merge. - Use Case: A PR adds a TypeDoc API reference page to an Astro docs site; run Playwright to capture the pages, push them to the temp branch, and update the PR description so reviewers see the rendered pages inline. ## Quick Start Capture screenshots of the changed docs pages with Playwright, push them to a screenshots-temp branch, and embed the raw image URLs in the PR description using gh pr edit.

Frequently Asked Questions about pr-screenshots

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add screenshots to a GitHub PR description?▼

GitHub PR descriptions render images via URLs, so push screenshots to a temporary orphan branch and embed the raw.githubusercontent.com links as markdown images using gh pr edit. The gh CLI cannot upload binary images directly.

How to capture website screenshots with Playwright?▼

Launch a Chromium browser with Playwright, navigate to each page URL with networkidle wait, and call page.screenshot with an output path. Reuse existing Playwright test screenshots when tests already produce them.

Can I upload images to GitHub PRs using the gh CLI?▼

No, gh pr edit and gh issue comment do not support binary image uploads. The workaround is hosting images on a temporary git branch and referencing the raw URLs in the PR body markdown.

Should screenshots be committed to a feature branch?▼

No, screenshots are build artifacts that bloat the repository and go stale. Add screenshots directories to .gitignore, host them on a temporary orphan branch, and delete that branch after the PR merges.

When should PR screenshots not be used?▼

Skip screenshots for PRs with no visual changes, such as backend logic or configuration updates. The pattern only adds value when the PR changes what users see, like docs pages or UI components.

Related Skills

Explore More Software Engineering Skills→
mmnavarrmmnavarr

ce-test-browser

Runs end-to-end browser tests on pages affected by a PR or branch using the agent-browser CLI.

Community
Advanced
githubnextgithubnext
5.1k

pr-screenshots

Capture Playwright screenshots and embed them in GitHub PR descriptions.

Official
Intermediate
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

visual-regression-test-setup

Set up automated visual regression testing with Percy, Chromatic, Playwright, or BackstopJS.

Official
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate