skills.rest
codebytes
codebytesCOMMUNITY
Explore all skills by this author →
Website𝕏@chris_l_ayersGitHub

pr-screenshots

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

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

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 embedded markdown images, then delete the temp branch after merge. - Use Case: A PR adds a TypeDoc API reference docs site; run the Playwright tests, push the screenshots to the temp branch, and embed them in the PR body so reviewers see the 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 PNGs to a temporary orphan branch, then reference them in the PR body with markdown image syntax pointing to raw.githubusercontent.com URLs. Update the body using gh pr edit, since 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 waitUntil networkidle, 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. The workaround is hosting images on a temporary git branch and embedding raw.githubusercontent.com URLs as markdown images in the PR body.

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 for review, 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 pure backend or refactoring work. The pattern is intended for docs sites, UI components, and generated visual artifacts where reviewers need to see rendered output.

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
githubnextgithubnext
5.1k

pr-screenshots

Capture Playwright screenshots and embed them in GitHub PR descriptions.

Official
Intermediate
benzwickbenzwick

review-ui-screenshots

Identify visual and UX issues in UI screenshots and produce actionable improvement notes.

Community
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

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

Official
Intermediate