# Use Workflow Pageshot

> Internal helper for /pr. Reads PR body (Preview URL + How to Test), drives agent-browser to capture a screenshot (1 step) or a video (2+ steps), and returns the artifact path that /pr passes to gh pr create --attach.

- Skill: `thkt/use-workflow-pageshot` (Agent Skill)
- Install (CLI): `npx skillmds@latest add thkt/use-workflow-pageshot`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thkt/use-workflow-pageshot/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: thkt (https://skillmd.com/u/thkt)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/thkt/use-workflow-pageshot

---


# use-workflow-pageshot

## Input

PR body is passed as a string from `/pr`. If either field below is missing, return `mode=failed reason=<missing field name>` and let `/pr` decide.

| Field       | Source                                                      |
| ----------- | ----------------------------------------------------------- |
| Preview URL | The leading `Preview URL: <URL>` line in the PR body        |
| Steps       | Numbered list under the `## How to Test` section in PR body |

## Browser engine

Pass `--session pageshot --engine chrome` on every agent-browser call. The default lightpanda returns a placeholder PNG for screenshot.

## Mode Selection

| Steps count | Mode       | Artifact    |
| ----------- | ---------- | ----------- |
| 1           | screenshot | step-01.png |
| 2+          | video      | capture.mp4 |

## Execution

| Step | Action                                                                           |
| ---- | -------------------------------------------------------------------------------- |
| 1    | Create the output directory `.claude/workspace/pageshot/$(date +%Y%m%d-%H%M%S)/` |
| 2    | `agent-browser open {Preview URL}`                                               |
| 3    | Run Screenshot Flow or Video Flow based on Mode                                  |
| 4    | Print absolute path of artifact to stdout                                        |

## Screenshot Flow (1 step)

| #   | Command                                                                    |
| --- | -------------------------------------------------------------------------- |
| 1   | `agent-browser snapshot` to obtain accessibility tree                      |
| 2   | If the step contains operations, run `agent-browser {click/type/fill/...}` |
| 3   | `agent-browser screenshot --full {outdir}/step-01.png`                     |

## Video Flow (2+ steps)

Insert `agent-browser wait 500` between steps. Run `snapshot` before each operation to identify elements.

| #   | Command                                                                |
| --- | ---------------------------------------------------------------------- |
| 1   | `agent-browser record start {outdir}/capture.webm`                     |
| 2   | For each step run `snapshot` then the operation in order               |
| 3   | `agent-browser record stop`                                            |
| 4   | `ffmpeg -i {outdir}/capture.webm -vcodec libx264 {outdir}/capture.mp4` |

## Output

Return a single mode line on stdout. `/pr` branches on that line.

| Situation             | Line                                                     |
| --------------------- | -------------------------------------------------------- |
| A screenshot was taken | `mode=screenshot artifact=/absolute/path/to/step-01.png` |
| A video was taken      | `mode=video artifact=/absolute/path/to/capture.mp4`      |
| An input was missing   | `mode=failed reason=<missing field name>`                |
| The capture failed     | `mode=failed reason=<one-line reason>`                   |