ui-screenshots
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.
Profile →npx skills add github/awesome-copilot --skill ui-screenshots --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- When to Use This Skill
- Prerequisites
- Core Workflow
- 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
- Guidelines
- Non-Web App Screenshots
- mss + ctypes (recommended for desktop windows)
- Electron apps (VS Code, etc.)
- Decision tree
- Limitations
pip install playwright Pillow -q playwright install chromium
What does the ui-screenshots skill do?
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.
How do I install it?
Run `npx skills add github/awesome-copilot --skill ui-screenshots --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.