npx skills add ...
npx skills add github/awesome-copilot --skill 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.
npx skills add github/awesome-copilot --skill ui-screenshots
Capture screenshots of web apps and graphical UIs during development to document visual changes.
Use this skill when you need to:
wait_until="networkidle" + wait_for_timeout(4000) ensures async charts loadfull_page=True captures the entire scrollable contentDo NOT try to get perfect crops via Playwright's clip parameter. It's unreliable with full-page captures.
For "selected" state without hover effect, move the mouse away after clicking:
Crop different sections from a single full-page screenshot:
git checkout HEAD~1 -- <files> to revert, screenshot, then git checkout HEAD -- <files> to restoredevice_scale_factor=1 in Playwright to force 1x pixels so screenshots match what users see at 100% zoomFor 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.
Prerequisites: pip install mss pillow
Limitation: Window must be visible (not behind other windows or minimized).
Node.js Playwright only — Python Playwright has no electron API. Captures via CDP (Chrome DevTools Protocol), not from the screen — works even while minimized.
Critical: --user-data-dir=<temp> is required or VS Code hands off to the existing instance and the launched process exits immediately.
| Scenario | Tool | Notes |
|---|---|---|
| Web app (localhost) | Playwright | Proven, full DOM access |
| Electron app (VS Code) | Playwright Electron (Node.js) | Works minimized via CDP |
| Desktop app, visible window | mss + ctypes (find by title) | ~33ms per capture |
| Desktop app, behind windows | Windows Graphics Capture API | Complex setup, Win10 1903+ |
| Quick full-screen | mss | ~68ms |