New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

UI Screenshots

by github in github/awesome-copilot

Capture screenshots of web apps during development using Playwright and PIL.

OfficialMITAuto-check passedTesting & QA

Install UI Screenshots

skills CLI
$ npx skills add github/awesome-copilot --skill ui-screenshots -a claude-code

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

GitHub CLI
$ gh skill install github/awesome-copilot ui-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/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-screenshots .claude/skills/ui-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/

Facts

Skill name
ui-screenshots
GitHub stars
40k
Token cost
~1.9k tokens
SKILL.md length
540 words
Files
1
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Capture screenshots of web apps during development using Playwright and PIL.

  • Works in 5 steps: Take a raw full-page screenshot → View the raw image, then crop with PIL → Iterate on crop, not on capture → …
  • Tasks that involve Browser testing
  • SKILL.md covers When to Use This Skill, Prerequisites, Core Workflow and Guidelines, plus 2 more sections
  • Calls pip, git and playwright

What it does

UI Screenshots is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Capture screenshots of web apps during development using Playwright and PIL. Supports full-page captures, interactive states, and an iterate-on-crop workflow that avoids slow re-screenshots.

Its SKILL.md is about 1.9k 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 Browser testing. It works with Playwright. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser testing

Example prompts

  • “/ui-screenshots”

Requirements

  • Python 3
  • Node.js

Workflow steps

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

  1. Take a raw full-page screenshot
  2. View the raw image, then crop with PIL
  3. Iterate on crop, not on capture
  4. Interactive states
  5. Section-specific captures

What it can do on your machine

Read from SKILL.md and the folder at commit 727ff2e. 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:

    • pip
    • git
    • playwright

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pip and git, which can reach the network depending on how they are called.

    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

UI Screenshots loads about 1.9k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 540 words of instructions outside code blocks.

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

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 github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 540 words, ~1,867 tokens.

Download SKILL.mdSave it as .claude/skills/ui-screenshots/SKILL.md (or your agent's skills folder).
name
ui-screenshots
description
Capture screenshots of web apps during development using Playwright and PIL. Supports full-page captures, interactive states, and an iterate-on-crop workflow that avoids slow re-screenshots.

UI Screenshots

Capture screenshots of web apps and graphical UIs during development to document visual changes.

When to Use This Skill

Use this skill when you need to:

  • Capture the current state of a running web app
  • Document a UI before and after a code change
  • Screenshot interactive states (tooltips, hovers, selected elements)
  • Capture specific sections of a page without re-screenshotting

Prerequisites

bash
pip install playwright Pillow -q
playwright install chromium

Core Workflow

1. Take a raw full-page screenshot
python
from playwright.async_api import async_playwright

async def capture(url="http://localhost:3000", out="screenshot-raw.png", width=1400, height=5000):
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page(viewport={"width": width, "height": height})
        await page.goto(url, wait_until="networkidle")
        await page.wait_for_timeout(4000)  # let charts/animations render
        await page.screenshot(path=out, full_page=True)
        await browser.close()
  • Use a tall viewport (height=5000) so the page renders everything without scrolling
  • wait_until="networkidle" + wait_for_timeout(4000) ensures async charts load
  • full_page=True captures the entire scrollable content
2. View the raw image, then crop with PIL

Do NOT try to get perfect crops via Playwright's clip parameter. It's unreliable with full-page captures.

python
from PIL import Image

img = Image.open("screenshot-raw.png")
cropped = img.crop((left, top, right, bottom))  # adjust based on what you see
cropped.save("screenshot-final.png")
  1. Take the raw screenshot
  2. View it to see actual pixel positions
  3. Crop with PIL based on what you see
  4. View the result — if not right, re-crop (instant, no re-screenshot needed)
3. Iterate on crop, not on capture
  • Re-screenshotting is slow (browser launch + page load + render wait)
  • Re-cropping is instant (just PIL)
  • Get one good raw capture, then slice it as many ways as needed
4. Interactive states
python
element = page.locator("selector").first
await element.hover()
await page.wait_for_timeout(1000)  # let tooltip appear
await page.screenshot(path="screenshot-hover.png", full_page=True)

For "selected" state without hover effect, move the mouse away after clicking:

python
await element.click()
await page.mouse.move(300, 300)  # move away so hover doesn't show
await page.wait_for_timeout(500)
await page.screenshot(path="screenshot-selected.png", full_page=True)
5. Section-specific captures

Crop different sections from a single full-page screenshot:

python
img.crop((0, 200, 920, 900)).save("screenshot-header.png")
img.crop((0, 900, 920, 1600)).save("screenshot-main.png")

Guidelines

  1. Always capture before state BEFORE making any changes — if you forget, you have to revert code to get a before shot
  2. Before/after pairs must use the same viewport width and crop — otherwise the comparison is useless
  3. To get a "before" after you already changed code: use git checkout HEAD~1 -- <files> to revert, screenshot, then git checkout HEAD -- <files> to restore
  4. For interactive states: capture before AND after for each state — don't assume the "normal" before covers all cases
  5. Use device_scale_factor=1 in Playwright to force 1x pixels so screenshots match what users see at 100% zoom
  6. Charts need extra wait time — Plotly, D3, etc. render asynchronously; 4s minimum after networkidle
  7. Narrow viewport reveals rendering bugs — some border/alignment issues only appear at specific widths
Show full SKILL.md (197 more words)Show less

Non-Web App Screenshots

For desktop apps (VS, WPF, WinForms, console apps, terminals) where Playwright can't reach.

Find a window by title via Win32 API, capture its region with mss. Tested at ~33ms per capture.

python
import ctypes
from ctypes import c_int, Structure, byref, windll
import mss
from PIL import Image

user32 = windll.user32

def find_window(title_contains):
    """Find visible windows matching a title substring."""
    results = []
    WNDENUMPROC = ctypes.WINFUNCTYPE(ctypes.c_bool, ctypes.c_void_p, ctypes.c_void_p)
    def cb(hwnd, _):
        if user32.IsWindowVisible(hwnd):
            buf = ctypes.create_unicode_buffer(256)
            user32.GetWindowTextW(hwnd, buf, 256)
            if title_contains.lower() in buf.value.lower():
                results.append((hwnd, buf.value))
        return True
    user32.EnumWindows(WNDENUMPROC(cb), 0)
    return results

def capture_window(title_contains, output_path):
    """Capture a window by title substring."""
    windows = find_window(title_contains)
    if not windows:
        raise ValueError(f"No window matching '{title_contains}'")
    hwnd = windows[0][0]

    class RECT(Structure):
        _fields_ = [('left', c_int), ('top', c_int), ('right', c_int), ('bottom', c_int)]
    rect = RECT()
    user32.GetWindowRect(hwnd, byref(rect))
    w, h = rect.right - rect.left, rect.bottom - rect.top

    with mss.mss() as sct:
        shot = sct.grab({'left': rect.left, 'top': rect.top, 'width': w, 'height': h})
        img = Image.frombytes('RGB', shot.size, shot.rgb)
        img.save(output_path)
        return img

# Usage:
capture_window('Visual Studio Code', 'vscode-capture.png')

Prerequisites: pip install mss pillow Limitation: Window must be visible (not behind other windows or minimized).

Electron apps (VS Code, etc.)

Node.js Playwright only — Python Playwright has no electron API. Captures via CDP (Chrome DevTools Protocol), not from the screen — works even while minimized.

javascript
const { _electron: electron } = require('playwright');
const app = await electron.launch({
    executablePath: 'C:\\Program Files\\Microsoft VS Code\\Code.exe',
    args: ['--new-window', '--disable-extensions', '--user-data-dir=' + tmpDir]
});
const window = await app.firstWindow();
await window.waitForLoadState('domcontentloaded');

// Minimize immediately — captures still work via CDP
await app.evaluate(({ BrowserWindow }) => {
    BrowserWindow.getAllWindows()[0].minimize();
});

await window.screenshot({ path: 'capture.png' }); // works while minimized!
await app.close();

Critical: --user-data-dir=<temp> is required or VS Code hands off to the existing instance and the launched process exits immediately.

Decision tree
ScenarioToolNotes
Web app (localhost)PlaywrightProven, full DOM access
Electron app (VS Code)Playwright Electron (Node.js)Works minimized via CDP
Desktop app, visible windowmss + ctypes (find by title)~33ms per capture
Desktop app, behind windowsWindows Graphics Capture APIComplex setup, Win10 1903+
Quick full-screenmss~68ms

Limitations

  • Web capture requires a locally running app or accessible URL
  • Desktop capture (mss) requires the window to be visible and unobstructed
  • Electron capture requires Node.js Playwright (not Python)
  • Some SPAs with heavy client-side rendering may need custom wait logic beyond networkidle

© github, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/ui-screenshots of github/awesome-copilot.

Open the folder on GitHubat commit 727ff2e

Compare with similar skills

UI 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.

UI Screenshots compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Screenshots this skillgithub/awesome-copilot40k—~1.9kAutomated safety check: PassMIT
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
Playwright CLIsanity-io/sanity6.4k18 repos~1.9kAutomated safety check: PassMIT
playwright-cli Browser Automationgithub/gh-aw5.3k23 repos~2.8kAutomated safety check: PassMIT
Write and Verify Playwright Testsappsmithorg/appsmith41k—~2.9kAutomated safety check: NotesApache-2.0
Cucumber and Playwright E2E Testslanggenius/dify158k—~682Automated safety check: PassCustom licence

Similar skills

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed

  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Testing & QAAuto-check passed

  • playwright-cli Browser Automation

    github/gh-aw

    Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.3k GitHub starsUsed in 23 repos~2.8k tokens
    Testing & QAAuto-check passed

  • Write and Verify Playwright Tests

    appsmithorg/appsmith

    Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.

    41k GitHub stars~2.9k tokensUpdated yesterday
    Testing & QAAuto-check: notes

  • Cucumber and Playwright E2E Tests

    langgenius/dify

    Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Testing & QAAuto-check passed

  • E2E Testing

    langflow-ai/langflow

    Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.

    156k GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo

  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed

  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed

  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about UI Screenshots

What does UI Screenshots do?

Capture screenshots of web apps during development using Playwright and PIL. UI Screenshots is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Capture screenshots of web apps during development using Playwright and PIL.

When should I use UI Screenshots?

UI Screenshots fits situations like: tasks that involve Browser testing.

How do I install UI Screenshots in Claude Code?

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

How do I install UI Screenshots in Codex?

Run `npx skills add github/awesome-copilot --skill ui-screenshots -a codex`. Or copy the skill folder (skills/ui-screenshots in github/awesome-copilot) into .agents/skills/ui-screenshots in your project. Codex loads it when a task matches its description.

Can I use UI 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 github/awesome-copilot --skill ui-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/ui-screenshots, .gemini/skills/ui-screenshots, .github/skills/ui-screenshots and .opencode/skills/ui-screenshots in your project.

What does UI Screenshots need to run?

Going by SKILL.md and its folder, UI Screenshots needs the command-line tools its instructions call (pip, git and playwright). Our summary lists: Python 3; Node.js.

Does UI Screenshots access the network?

SKILL.md contains no URLs. Its commands use pip and git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is UI 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 UI Screenshots use?

UI 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 UI Screenshots use?

About 1.9k tokens (SKILL.md is roughly 7.5k 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 UI Screenshots?

Skills that share tags, products or a category with UI Screenshots: Web Application Testing (anthropics/skills, 180k stars), Playwright CLI (sanity-io/sanity, 6.4k stars), playwright-cli Browser Automation (github/gh-aw, 5.3k stars) and Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Screenshots?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.

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