skills.rest
seiggy
seiggyCOMMUNITY
Explore all skills by this author →
GitHub

pr-screenshots

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

1|Updated Jul 7, 2026
Search Tags:#pull request#screenshots#github#playwright#docs#gh cli#visual review
One-click install
npx skills add https://github.com/seiggy/maf-copilot-studio-demo --skill pr-screenshots-seiggy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pr-screenshots
Source: https://github.com/seiggy/maf-copilot-studio-demo/tree/main/.squad/templates/skills/pr-screenshots
Command: npx skills add https://github.com/seiggy/maf-copilot-studio-demo --skill pr-screenshots-seiggy

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 the GitHub CLI cannot upload binary images directly to PR descriptions. ## Core Features & Use Cases - Playwright Screenshot Capture: Reuse existing Playwright test screenshots or run a minimal capture script against a local dev server. - Temporary Branch Hosting: Push screenshots to an orphan screenshots-temp branch so raw.githubusercontent.com URLs render inline in the PR body. - PR Body Embedding and Cleanup: Update the PR description with gh pr edit using markdown image references, then delete the temp branch after merge. - Use Case: A PR adds a TypeDoc API reference page to a docs site; run the Playwright tests, push the screenshots to the temp branch, and embed the images so reviewers see the rendered pages inline. ## Quick Start Capture screenshots of the changed pages with Playwright, push them to a screenshots-temp orphan branch, and embed the raw 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?▼

Push screenshot files to a temporary orphan branch, then reference them in the PR body using raw.githubusercontent.com URLs embedded as markdown images. Update the description with gh pr edit since the 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 the gh CLI upload images to pull requests?▼

No, gh pr edit and gh issue comment do not support binary image uploads. Host images on a temporary git branch and reference the raw URLs in markdown instead.

Should screenshots be committed to feature branches?▼

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 be skipped?▼

Skip screenshots only for PRs with no visual changes. Any PR that changes what users see, such as docs pages or UI components, should include inline screenshots so reviewers can verify without checking out the branch.

Related Skills

Explore More Software Engineering Skills→
afonsoftafonsoft

testing-eaf-angular-visual

Verifies the EAF Angular admin UI visually using Playwright end-to-end checks.

Community
Intermediate
Soul-Brews-StudioSoul-Brews-Studio
116

merged

Switch to main, pull latest changes, and delete merged branches.

Official
Basic
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

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

Official
Intermediate