What is the ui-screenshots skill?
The ui-screenshots skill is a SKILL.md in awesome-copilot for capturing UI screenshots. Your agent takes one full-page Playwright capture at a tall viewport, then crops it with Pillow, grabs hover or click states, and builds consistent before and after pairs.
The ui-screenshots skill is a folder in the awesome-copilot repository. It is a capture recipe, not a set of design rules. Its job is to make an agent produce clean screenshots of a UI it built or changed.
The method is simple. Take one raw full-page capture, then iterate on crops in Python with Pillow. That avoids retaking the page for every crop and keeps the framing identical between runs.
The core flow
- Install Playwright and Pillow, then run playwright install chromium.
- Capture the page once with a tall viewport, 1400 wide by 5000 high, waiting for the network to go idle and an extra 4000ms.
- Crop regions from that raw image in Pillow.
- For interactive states, hover or click, then move the mouse away before the next shot.
Before and after pairs
The guidelines say to capture the before state first, and to use the same viewport and crop for both images. device_scale_factor stays at 1. If you forgot the before shot, git checkout HEAD~1 -- followed by the files recovers it.
Beyond the browser
The skill also covers non-web capture. On Windows, mss with ctypes takes screenshots in about 33ms for a window and about 68ms for the full screen. Electron apps use Node.js Playwright and need a --user-data-dir.
Who the ui-screenshots skill is for
Best for
- Pull request evidence, where an agent should show what a UI change looked like.
- Feeding captures into a review so critique rests on real pixels. Related: web design guidelines.
- Anyone documenting a build, including Electron or Windows desktop apps.
Not for
- Apps that are not running. The skill needs a live app or page to capture.
- Hidden or minimized windows, since the window must be visible.
- Design judgment. It records the screen and does not assess it. Related: improve UI.
Use it with UiChemy
A WordPress page produced with UiChemy is a normal running site, so Playwright can capture it for a before and after record of an edit. Composer makes the edit inside Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install UI Screenshots Skill: Before and After Captures with Playwright
git clone https://github.com/github/awesome-copilot.gitClone the repository
Run
git clone https://github.com/github/awesome-copilot.git. The skill is in skills/ui-screenshots.Copy the skill folder
Copy skills/ui-screenshots into the place your agent loads skills from.
Install the capture tools
Run
pip install playwright Pillow -q, thenplaywright install chromium.Run your app
Start the app or page first. The skill lists a running app and a visible window as limitations.
Check that it loaded
Ask the agent to screenshot your running page before and after a small change. You should get two images with the same viewport and crop.
Key features
- Single raw captureOne full-page Playwright capture at a 1400 by 5000 viewport, with network idle and a 4000ms wait, becomes the source for every crop.
- Pillow croppingCrops are made in Python after the fact, so adjusting a region means rerunning a few lines rather than retaking the page.
- Interactive statesThe agent hovers or clicks to reveal a state, captures it, then moves the mouse away so the next capture is clean.
- Before firstThe guidelines say to capture the before state first, using the same viewport and crop for both images in a pair.
- Consistent scaledevice_scale_factor=1 keeps pixel dimensions predictable, and charts get extra wait time to finish rendering.
- Before-state recoveryIf the original was never captured, git checkout HEAD~1 -- with the changed files restores the earlier UI for a screenshot.
- Windows capture pathmss with ctypes grabs a window in about 33ms and the full screen in about 68ms for non-web targets.
- Electron supportElectron apps are driven with Node.js Playwright and require a --user-data-dir flag, as Python Playwright does not cover them.
- Decision tableA table helps the agent choose the capture method for web pages, Windows apps and Electron apps. Related: polish.
Frequently asked questions
What is the ui-screenshots skill?
It is a skill in the awesome-copilot repository that guides an AI coding agent through capturing UI screenshots. It uses Playwright for a single tall full-page capture, Pillow for cropping, and gives rules for interactive states and consistent before and after pairs.
How do I install the ui-screenshots skill?
Clone github/awesome-copilot, copy the skills/ui-screenshots folder into the place your agent loads skills from, then run pip install playwright Pillow and playwright install chromium. Start the app you want to capture, and ask the agent for a screenshot or a before and after pair.
What viewport does ui-screenshots use?
The core flow uses a tall viewport of 1400 pixels wide by 5000 high, loads the page until the network is idle, and waits another 4000ms. The agent then crops from that single capture. The guidelines also fix device_scale_factor at 1.
Can ui-screenshots capture desktop apps?
Yes, in a limited way. For Windows it describes mss with ctypes, and for Electron it uses Node.js Playwright with a --user-data-dir flag. It notes that the window must be visible. A decision table in the skill picks the method per target.
How do I get a before screenshot after changing code?
The guidelines say to capture the before state first. If you did not, git checkout HEAD~1 -- with the changed files restores the previous version so you can take the capture, then restore your current files and capture the after state.
What are the limits of the ui-screenshots skill?
The app has to be running, the window has to be visible, and Electron needs Node.js Playwright instead of the Python version. Charts and animations need extra wait time. The skill is a capture method and does not judge the design.
Does ui-screenshots work with any AI coding agent?
The skill names no specific agent. It needs one that can run shell commands, install Python packages and read the resulting images. Claude Code and other command-line capable agents can follow it, but the pack lists no agent compatibility, so test it.