Agent skill · software engineering · github
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.
Why this skill is useful
Adds specific Playwright commands and PIL usage patterns for capturing and processing UI screenshots that the AI wouldn't reliably generate on its own.
What it needs
Requires pillow, playwright installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 Core Workflow 1. Take a raw full-page screenshot Use a tall viewport (height=5000) so the page renders everything without scrolling waituntil="networkidle" + waitfortimeout(4000) ensures async charts load fullpage=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. 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 For "selected" state without hover effect, move the mouse away after clicking: 5. Section-specific captures Crop different sections from a single full-page screenshot: 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/ui-screenshots