Ui Screenshots

Playwright does the capture here, and the part worth knowing is the iterate-on-crop workflow: take one tall full-page screenshot, view it, then slice it with PIL as many times as you need, since re-shooting means relaunching the browser and waiting for render each time. The skill also covers hover and selected states, before/after comparisons using git checkout to rebuild the old version, and a Win32 plus mss path for desktop windows and Electron apps like VS Code. The Electron section is the most practical surprise: it captures over CDP, so the window can be minimized, but it requires Node.js Playwright since the Python bindings lack the electron API. Charts need about four seconds after networkidle, and the Playwright and desktop paths are separate enough that you'll likely use only one.

skills.sh installs: 212
GitHub stars: 41K
last updated: Aug 1, 2026

View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill ui-screenshots --agent claude-code

Installs into .claude/skills of the current project.

Files

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

pip install playwright Pillow -q
playwright install chromium

Core Workflow

1. Take a raw full-page screenshot

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()

SKILL.md on GitHub