Agent skill

PR Screenshots

Capture Playwright screenshots and embed them in GitHub PR descriptions

MITAuto-check passedTesting & QA

Install PR Screenshots

skills CLI

$ npx skills add bradygaster/squad --skill pr-screenshots -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install bradygaster/squad pr-screenshots --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/bradygaster/squad.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.squad-templates/skills/pr-screenshots .claude/skills/pr-screenshots && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "pr-screenshots" agent skill from https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots into .claude/skills/pr-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pr-screenshots", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add bradygaster/squad --skill pr-screenshots -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install bradygaster/squad pr-screenshots --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bradygaster/squad.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.squad-templates/skills/pr-screenshots .agents/skills/pr-screenshots && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "pr-screenshots" agent skill from https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots into .agents/skills/pr-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pr-screenshots", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bradygaster/squad --skill pr-screenshots -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install bradygaster/squad pr-screenshots --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bradygaster/squad.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.squad-templates/skills/pr-screenshots .cursor/skills/pr-screenshots && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "pr-screenshots" agent skill from https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots into .cursor/skills/pr-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pr-screenshots", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/bradygaster/squad.git --path .squad-templates/skills/pr-screenshots

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add bradygaster/squad --skill pr-screenshots -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install bradygaster/squad pr-screenshots --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bradygaster/squad.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.squad-templates/skills/pr-screenshots .gemini/skills/pr-screenshots && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "pr-screenshots" agent skill from https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots into .gemini/skills/pr-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pr-screenshots", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install bradygaster/squad pr-screenshots

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add bradygaster/squad --skill pr-screenshots -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/bradygaster/squad.git skills-src && mkdir -p .github/skills && cp -r skills-src/.squad-templates/skills/pr-screenshots .github/skills/pr-screenshots && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "pr-screenshots" agent skill from https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots into .github/skills/pr-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pr-screenshots", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bradygaster/squad --skill pr-screenshots -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install bradygaster/squad pr-screenshots --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bradygaster/squad.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.squad-templates/skills/pr-screenshots .opencode/skills/pr-screenshots && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "pr-screenshots" agent skill from https://github.com/bradygaster/squad/tree/dev/.squad-templates/skills/pr-screenshots into .opencode/skills/pr-screenshots/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pr-screenshots", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: pr-screenshots
GitHub stars: 3.3k
Token cost: ~1.1k tokens
SKILL.md length: 313 words
Files: 1
Skills in repo: 31
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Capture Playwright screenshots and embed them in GitHub PR descriptions

Works in 4 steps: Capture screenshots with Playwright → Host screenshots on a temporary branch → Embed in PR description → …
Tasks that involve Pull requests
SKILL.md covers Context, Patterns, Examples and Anti-Patterns
Calls git, gh and npx; reaches raw.githubusercontent.com

What it does

PR Screenshots is an agent skill from bradygaster/squad. Capture Playwright screenshots and embed them in GitHub PR descriptions

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Pull requests, Browser testing and Static sites and blogs. It works with Playwright and GitHub. The repository describes itself as: Squad: AI agent teams for any project. The licence is MIT.

When your agent uses it

Tasks that involve Pull requests
Tasks that involve Browser testing
Tasks that involve Static sites and blogs

Example prompts

“/pr-screenshots”

Requirements

Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

Capture screenshots with Playwright
Host screenshots on a temporary branch
Embed in PR description
Gitignore screenshots locally

What it can do on your machine

Read from SKILL.md and the folder at commit 71818eb. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- git
- gh
- npx
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- raw.githubusercontent.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

PR Screenshots loads about 1.1k tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 313 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~22
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from bradygaster/squad at commit 71818eb, republished under its MIT licence (© bradygaster). 313 words, ~1,108 tokens.

Download SKILL.mdSave it as .claude/skills/pr-screenshots/SKILL.md (or your agent's skills folder).

name: pr-screenshots
description: Capture Playwright screenshots and embed them in GitHub PR descriptions
domain: pull-requests, visual-review, docs, testing
confidence: high
source: earned (multiple sessions establishing the pattern for PR #11 TypeDoc API reference)

Context

When a PR includes visual changes (docs sites, UI components, generated pages), reviewers need to see what the PR delivers without checking out the branch. Screenshots belong in the PR description body, not as committed files and not as text descriptions.

Use this skill whenever:

A PR touches docs site pages (Astro, Starlight, etc.)
A PR adds or changes UI components
A PR generates visual artifacts (TypeDoc, Storybook, diagrams)
Playwright tests already capture screenshots as part of testing

Patterns

1. Capture screenshots with Playwright

If Playwright tests already exist and produce screenshots, reuse those. Otherwise, write a minimal capture script:

javascript

// scripts/capture-pr-screenshots.mjs
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });

const screenshots = [
  { url: 'http://localhost:4321/path/to/page', name: 'feature-landing' },
  { url: 'http://localhost:4321/path/to/detail', name: 'feature-detail' },
];

for (const { url, name } of screenshots) {
  await page.goto(url, { waitUntil: 'networkidle' });
  await page.screenshot({ path: `screenshots/${name}.png`, fullPage: false });
}

await browser.close();

2. Host screenshots on a temporary branch

GitHub PR descriptions render images via URLs. The gh CLI cannot upload binary images directly. Use a temporary orphan branch to host the images:

powershell

# Save current branch
$currentBranch = git branch --show-current

# Create orphan branch with only screenshot files
git checkout --orphan screenshots-temp
git reset
git add screenshots/*.png
git commit -m "screenshots for PR review"
git push origin screenshots-temp --force

# Build raw URLs
$base = "https://raw.githubusercontent.com/{owner}/{repo}/screenshots-temp/screenshots"
# Each image: $base/{name}.png

# Return to working branch
git checkout -f $currentBranch

3. Embed in PR description

Use gh pr edit with the raw URLs embedded as markdown images:

powershell

$base = "https://raw.githubusercontent.com/{owner}/{repo}/screenshots-temp/screenshots"

gh pr edit {PR_NUMBER} --repo {owner}/{repo} --body @"
## {PR Title}

### What this PR delivers
- {bullet points of changes}

---

### Screenshots

#### {Page/Feature Name}
![{alt text}]($base/{name}.png)

#### {Another Page}
![{alt text}]($base/{another-name}.png)

---

### To verify locally
```bash
{commands to run locally}


### 4. Cleanup after merge

After the PR is merged, delete the temporary branch:

```bash
git push origin --delete screenshots-temp

5. Gitignore screenshots locally

Screenshots are build artifacts — never commit them to feature branches:

gitignore

# PR screenshots (hosted on temp branch, not committed to features)
screenshots/
docs/tests/screenshots/

Examples

Example: Docs site PR with 3 pages

Start dev server: cd docs && npm run dev
Run Playwright tests (they capture screenshots as a side effect)
Push screenshots to screenshots-temp branch
Update PR body with embedded ![...]() image references
Reviewer sees the pages inline without checking out the branch

Example: Reusing existing Playwright test screenshots

If tests at docs/tests/*.spec.mjs already save to docs/tests/screenshots/:

powershell

cd docs && npx playwright test tests/api-reference.spec.mjs
# Screenshots now at docs/tests/screenshots/*.png
# Push those to screenshots-temp and embed in PR

Anti-Patterns

❌ Committing screenshots to feature branches — they bloat the repo and go stale
❌ Posting text descriptions instead of actual images — reviewers can't see what they're getting
❌ Using gh CLI to "upload" images — gh issue comment and gh pr edit don't support binary uploads
❌ Asking the user to manually drag-drop images — automate it with the temp branch pattern
❌ Skipping screenshots for visual PRs — if the PR changes what users see, show what users see
❌ Leaving the screenshots-temp branch around forever — clean up after merge

Files

Just SKILL.md in .squad-templates/skills/pr-screenshots of bradygaster/squad.

Open the folder on GitHubat commit 71818eb

Compare with similar skills

PR Screenshots next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

PR Screenshots compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
PR Screenshots this skillbradygaster/squad	3.3k	—	~1.1k	Automated safety check: Pass	MIT	today
Docs AuthoringTracecatHQ/tracecat	3.8k	—	~3.1k	Automated safety check: Notes	AGPL-3.0	today
Record E2E Giflablup/backend.ai-webui	133	—	~907	Automated safety check: Notes	LGPL-3.0	today
Dev Issuehmislk/hmis	236	—	~5.1k	Automated safety check: Pass	GPL-3.0	today
Code Reviewnteract/semiotic	2.7k	—	~1.5k	Automated safety check: Pass	Apache-2.0	today
Reprovaadin/web-components	582	—	~1.3k	Automated safety check: Pass	None	today

Similar skills

Docs Authoring
TracecatHQ/tracecat
A skill your agent uses when adding or updating documentation pages in an existing docs site.
3.8k GitHub stars~3.1k tokensUpdated today
DevelopmentAuto-check: notes
Record E2E Gif
lablup/backend.ai-webui
Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.
133 GitHub stars~907 tokensUpdated today
Testing & QAAuto-check: notes
Dev Issue
hmislk/hmis
Run a GitHub issue through its full lifecycle end-to-end: investigate, discuss the approach, gather test context (department/data), implement, rebuild + local redeploy, verify with Playwright and…
236 GitHub stars~5.1k tokensUpdated today
Testing & QAAuto-check passed
Code Review
nteract/semiotic
Review Semiotic pull requests for behavioral bugs, regressions, contract drift, and missing evidence.
2.7k GitHub stars~1.5k tokensUpdated today
DevelopmentAuto-check passed
Repro
vaadin/web-components
Reproduce a Vaadin web component bug from a GitHub issue in vaadin/web-components.
582 GitHub stars~1.3k tokensUpdated today
Testing & QAAuto-check passed
Playwright Screen Recording
liaohch3/claude-tap
Records headless Playwright sessions as .webm videos to show a bug fix working or to give pull request reviewers visual evidence.
3.3k GitHub stars~714 tokensUpdated 16 days ago
Testing & QAAuto-check passed

Questions about PR Screenshots

What does PR Screenshots do?

Capture Playwright screenshots and embed them in GitHub PR descriptions. PR Screenshots is an agent skill from bradygaster/squad.

When should I use PR Screenshots?

PR Screenshots fits situations like: tasks that involve Pull requests; tasks that involve Browser testing; tasks that involve Static sites and blogs.

How do I install PR Screenshots in Claude Code?

Run `npx skills add bradygaster/squad --skill pr-screenshots -a claude-code`. Or copy the skill folder (.squad-templates/skills/pr-screenshots in bradygaster/squad) into .claude/skills/pr-screenshots in your project. Claude Code loads it when a task matches its description.

How do I install PR Screenshots in Codex?

Run `npx skills add bradygaster/squad --skill pr-screenshots -a codex`. Or copy the skill folder (.squad-templates/skills/pr-screenshots in bradygaster/squad) into .agents/skills/pr-screenshots in your project. Codex loads it when a task matches its description.

Can I use PR Screenshots in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bradygaster/squad --skill pr-screenshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pr-screenshots, .gemini/skills/pr-screenshots, .github/skills/pr-screenshots and .opencode/skills/pr-screenshots in your project.

What does PR Screenshots need to run?

Going by SKILL.md and its folder, PR Screenshots needs the command-line tools its instructions call (git, gh, npx and npm). Our summary lists: Node.js.

Does PR Screenshots access the network?

SKILL.md names 1 domain. In commands or code: raw.githubusercontent.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is PR Screenshots safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does PR Screenshots use?

PR Screenshots is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does PR Screenshots use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to PR Screenshots?

Skills that share tags, products or a category with PR Screenshots: Docs Authoring (TracecatHQ/tracecat, 3.8k stars), Record E2E Gif (lablup/backend.ai-webui, 133 stars), Dev Issue (hmislk/hmis, 236 stars) and Code Review (nteract/semiotic, 2.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains PR Screenshots?

bradygaster (a GitHub user) maintains it in bradygaster/squad, which has 3,259 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 9, 2026.

Source: bradygaster/squad on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install PR Screenshots

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Context

Patterns

1. Capture screenshots with Playwright

2. Host screenshots on a temporary branch

3. Embed in PR description

5. Gitignore screenshots locally

Examples

Example: Docs site PR with 3 pages

Example: Reusing existing Playwright test screenshots

Anti-Patterns

Files

Compare with similar skills

Similar skills

More from bradygaster/squad

Related

Questions about PR Screenshots