# Asset: Shot

> Capture website screenshots from a generated, committed shots.yml (routes → shot-scraper) and frame them with the project's theme into README-ready mockups

- Skill: `jasonwarrenuk/asset-shot` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jasonwarrenuk/asset-shot`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jasonwarrenuk/asset-shot/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: JasonWarrenUK (https://skillmd.com/u/jasonwarrenuk)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jasonwarrenuk/asset-shot

---


# Screenshots and framed mockups

Load `asset-conventions` first; tool flags are in `~/.claude/library/references/asset-tools.md`.

```xml
<asset-shot>
	<arguments>
		Free text. Recognise: URLs or paths (explicit targets, skip route detection); a directory (static site: capture its `index.html` and any top-level `.html`); "no frame" / "raw" (skip framing); "regenerate" / "fresh config" (rebuild `shots.yml` from routes even if one exists); "mobile" / "phone" (add a 390-wide viewport per route); "full page" (omit `height`); a theme family name (pass as `--family`). Anything else is a hint for which routes matter.
	</arguments>
	<steps>
		<step num="1">Detect project type and capture base per the conventions. For a dev-server project, check whether a server is already listening (`lsof -iTCP -sTCP:LISTEN -P | grep -E 'node|bun|deno'`); if not, start `bun run dev` in the background, read the port from its output, and stop it at the end.</step>
		<step num="2">
			Config. If `docs/assets/shots.yml` exists and no regenerate hint was given, use it. Otherwise build one: one entry per route at 1440 wide with `height: 900` (viewport crop) plus a second full-page entry for the home route; `wait: 800`; `output: docs/assets/shots/&lt;slug&gt;.png`. Use `javascript:` to hide cookie banners or dev overlays when the project has them. Show the YAML and stop for approval; explicit URL/path arguments still get a config, so the run is repeatable.
		</step>
		<step num="3">`shot-scraper multi docs/assets/shots.yml --retina`. On a failure for one entry, retry that entry once with `wait` doubled, then report it.</step>
		<step num="4">Unless "no frame": resolve the `frame` theme (`theme.ts frame --project .`), then for each capture `bun ~/.claude/library/scripts/asset/frame.ts docs/assets/shots/&lt;slug&gt;.png docs/assets/shots/framed/&lt;slug&gt;.png --project . [--family X]`. Full-page captures get `--no-chrome` (a 6000px tall browser window looks wrong).</step>
		<step num="5">Quality gate from the conventions on every framed PNG. Then report in the conventions' format, with the README snippet per image.</step>
	</steps>
	<rules>
		<rule>`shots.yml` is the source of truth once approved; edits go there, not into ad hoc CLI flags.</rule>
		<rule>Never capture a deployed URL that needs login; use the dev server with seeded data and say so.</rule>
		<rule>No colour or margin decisions in this skill; the frame block owns them.</rule>
	</rules>
</asset-shot>
```