From ship
Reads PR body to extract Preview URL and How to Test steps, then drives agent-browser to capture a screenshot (1 step) or video (2+ steps) for UI review attachment.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ship:use-workflow-pageshotWhen to use
/pr workflow UI変更検出時のスクショ/動画撮影, screenshot capture, video capture
opusThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Internal helper invoked by `/pr` when UI changes are detected. Not for direct user invocation.
Internal helper invoked by /pr when UI changes are detected. Not for direct user invocation.
| 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 |
PR body is passed as a string from /pr. If Preview URL or How to Test is missing, return mode: failed with the missing field name and let /pr decide.
| Steps count | Mode | Artifact |
|---|---|---|
| 1 | screenshot | step-01.png |
| 2+ | video | capture.mp4 |
| Step | Action |
|---|---|
| 1 | Create output directory: ${CLAUDE_SKILL_DIR}/../../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 |
| # | 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 |
| # | 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 |
Insert agent-browser wait 500 between steps. Run snapshot before each operation to identify elements.
Single stdout line:
mode=screenshot artifact=/absolute/path/to/step-01.png
or
mode=video artifact=/absolute/path/to/capture.mp4
On failure:
mode=failed reason=<one-line reason>
npx claudepluginhub thkt/dotclaude --plugin toolkitProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.