Website Screenshots Skill for Claude

Website screenshots

Use the website's source App demo and its curated developer projects. The

fixtures in qualitylayer/src/ui/demo/website-gallery.ts supply questions,

documents, artifacts and checks; production components supply the interface.

The screenshot command uses a temporary browser profile and in-memory data.

From docs/site/, run npm run screenshots. It starts and closes its own

loopback source server, renders the twelve scenes in both themes at twice the

pixel density, and writes lossless WebP assets to public/product/. The website

and README use these same files. npm run screenshots -- --only plan,team

refreshes selected scenes. Dependencies are the locked website and QualityLayer

development dependencies.

Inspect the captured pictures together: the shown project and content must

explain the section, text must be sharp when enlarged, diagrams must have

rendered, and controls must fit. The fixtures show complex example work across

billing, notifications, identity and job processing; keep their scope and

captions consistent when changing them. Capture actual UI rather than drawing

an imitation. The export treatment is monochrome; the App's semantic colors

remain unchanged.

The command rejects internal beta-build content, remote requests and real API

calls. A failing scene leaves its last good published image in place; fix the

fixture or selector and rerun it. Review capture-manifest.json alongside the

images. Run the focused site checks and a desktop/phone pass of the affected

gallery and its full-size image dialog.

This skill updates local assets. Commit, deploy and replace Claude Design

pages only within the user's current authorization. Use the existing

deploy-website and open-claude-design skills for those destinations.