AGH UI Screenshot

Capture deterministic PNGs of AGH runtime UI surfaces (Storybook isolation iframes, the proposal mock at docs/design/new-proposal/agh-refined-7.html, or any local dev-server URL) via the Chrome DevTools Protocol. Chrome's built-in --screenshot flag hangs on Storybook iframes and races font loading; this skill avoids both by driving Chrome explicitly through chrome-launcher + chrome-remote-interface.

Procedures

Step 1: Confirm dev servers are reachable.

1. Run curl -s -o /dev/null -w "%{http_code}\n" http://localhost:6006/ for the web/ Storybook and http://localhost:6007/ for the packages/ui/ Storybook. Expect 200.
2. If a server is down, start it from its workspace: cd web && bun run storybook (defaults to 6006) or cd packages/ui && bun run storybook (defaults to 6007). Wait for the "Storybook started" banner before proceeding.
3. Read references/storybook-urls.md for the canonical port table, iframe URL grammar, and story-id naming patterns.

Step 2: Prepare the capture workdir.

1. Execute the bootstrap helper: bash .agents/skills/agh-ui-screenshot/scripts/setup-workdir.sh /tmp/agh-ui-screenshot. This is a bootstrap helper — it creates the directory and installs chrome-launcher + chrome-remote-interface via bun. It is idempotent; re-running on an existing workdir is a no-op.
2. Capture its stdout — the printed path is the workdir to cd into for every later bun run invocation.

Step 3: Resolve the story ids to capture.

1. Skip this step when capturing a non-Storybook URL (e.g., the proposal mock).
2. For Storybook captures, run the read-only helper bun run .agents/skills/agh-ui-screenshot/scripts/list-stories.mjs http://localhost:6006 [--filter <substring>]. The script fetches index.json and emits one story id per line, optionally filtered.
3. Confirm each story id intended for capture appears in the output. A missing id will land on Storybook's "Couldn't find story" fallback and produce a tiny (under 20 KB) PNG. If unsure of the naming pattern, read references/storybook-urls.md.