1weiho skills

---
name: clean-ui-shot
description: Shoot polished, framed screenshots of a web app's real UI as cropped images, the app as a rounded, shadowed window on a stage, with padding where the window edge shows and bleed where the crop cuts through. Two styles, asked up front, clean (a soft gray stage) or glass (a gradient coloured from the UI itself, with a frosted white bezel). A house style for docs pages, changelogs, landing pages, and READMEs. Use whenever the user asks for UI screenshots, docs or changelog images, "nice", "framed", "clean", or "cropped" screenshots of their app, or wants existing product screenshots refreshed because the UI changed, even if they don't name this skill or describe the style.
---

# Clean UI shot

The output is an image like a product-page detail shot: a crop of the real
UI, rendered as a window with rounded corners and a shadow on a stage.
Window edges that fall inside the crop get padding; edges where the crop cuts
through the UI bleed off the stage. That contrast is what makes a crop read
as "a detail of a real app" instead of a pasted rectangle, so choose crops
with it in mind.

There are two styles. Both use the same crops and render the UI at the same
scale; only the stage and frame differ.

- **clean** (default): a soft warm-gray gradient stage, a layered neutral
  shadow, 56px of padding. Quiet and consistent; suits docs, changelogs,
  and READMEs, where many shots sit together.
- **glass**: a gradient stage coloured from the shot itself, a frosted,
  semi-transparent white bezel around the window, and 96px of padding. The
  script samples the capture, picks its main hues (saturated brand accents
  count more than large pale areas), and lays soft tints of them into the
  corners, so every product gets its own palette. A dark UI gets deep tones;
  a UI with no colour falls back to the clean stage. Suits landing pages,
  launch posts, and social images.

Everything is captured from the real app running locally, ideally a
throwaway instance with demo data, so the shots show the current UI, not a
mock.

The scripts live in the `scripts/` folder next to this file (written
`<skill>/scripts/` below). They need Node, `playwright` with Chromium, and
`sharp`, resolved from the directory you run them in. If the project doesn't
have them, `npm i playwright sharp` in a scratch directory, run
`npx playwright install chromium` there once, and run the scripts from that
directory.

## Before you start

- **Ask which style the user wants before shooting**, unless they already
  said. Describe both in a sentence each (as above), say which you'd pick for
  where the images will go, and wait for the answer. Use one style per
  batch, so images that sit together match. If the project already has shots