File contents use-workflow-pageshot
入力
PR 本文は /pr から文字列として渡される。下表のいずれかが欠落していれば、mode=failed reason=<欠落フィールド名> を返し、判断は /pr に任せる。
フィールド
ソース
Preview URL
PR 本文の冒頭にある Preview URL: <URL> 行
Steps
PR 本文の ## How to Test セクション配下の番号付きリスト
ブラウザ engine
すべての agent-browser 呼び出しに --session pageshot --engine chrome を付ける。既定の lightpanda は screenshot でプレースホルダー PNG を返す。
モード選択
Steps の数
モード
成果物
1
screenshot
step-01.png
2+
video
capture.mp4
実行
ステップ
アクション
1
出力ディレクトリを作成。.claude/workspace/pageshot/$(date +%Y%m%d-%H%M%S)/
2
agent-browser open {Preview URL}
3
モードに応じて Screenshot Flow または Video Flow を実行
4
成果物の絶対パスを stdout に出力
Screenshot Flow (1 step)
#
コマンド
1
agent-browser snapshot でアクセシビリティツリーを取得
2
step に操作が含まれていれば agent-browser {click/type/fill/...} を実行
3
agent-browser screenshot --full {outdir}/step-01.png
Video Flow (2+ steps)
step 間に agent-browser wait 500 を挟む。各操作の前に snapshot を実行して要素を特定する。
#
コマンド
1
agent-browser record start {outdir}/capture.webm
2
各 step について順に snapshot してから操作を実行
3
agent-browser record stop
4
ffmpeg -i {outdir}/capture.webm -vcodec libx264 {outdir}/capture.mp4
出力
stdout に mode 行を 1 つ返す。/pr はこの行を読んで分岐する。
状況
行
静止画を撮った
mode=screenshot artifact=/absolute/path/to/step-01.png
動画を撮った
mode=video artifact=/absolute/path/to/capture.mp4
入力が欠けた
mode=failed reason=<欠落フィールド名>
撮影中に失敗した
mode=failed reason=<1 行の理由>
1 --- 2 name: use-workflow-pageshot-2 3 description: Use Workflow Pageshot 4 --- 5 6 # use-workflow-pageshot 7 8 ## 入力 9 10 PR 本文は `/pr` から文字列として渡される。下表のいずれかが欠落していれば、`mode=failed reason=<欠落フィールド名>` を返し、判断は `/pr` に任せる。 11 12 | フィールド | ソース | 13 | ----------- | --------------------------------------------------------- | 14 | Preview URL | PR 本文の冒頭にある `Preview URL: <URL>` 行 | 15 | Steps | PR 本文の `## How to Test` セクション配下の番号付きリスト | 16 17 ## ブラウザ engine 18 19 すべての agent-browser 呼び出しに `--session pageshot --engine chrome` を付ける。既定の lightpanda は screenshot でプレースホルダー PNG を返す。 20 21 ## モード選択 22 23 | Steps の数 | モード | 成果物 | 24 | ---------- | ---------- | ----------- | 25 | 1 | screenshot | step-01.png | 26 | 2+ | video | capture.mp4 | 27 28 ## 実行 29 30 | ステップ | アクション | 31 | -------- | ---------------------------------------------------------------------------- | 32 | 1 | 出力ディレクトリを作成。`.claude/workspace/pageshot/$(date +%Y%m%d-%H%M%S)/` | 33 | 2 | `agent-browser open {Preview URL}` | 34 | 3 | モードに応じて Screenshot Flow または Video Flow を実行 | 35 | 4 | 成果物の絶対パスを stdout に出力 | 36 37 ## Screenshot Flow (1 step) 38 39 | # | コマンド | 40 | --- | ------------------------------------------------------------------------ | 41 | 1 | `agent-browser snapshot` でアクセシビリティツリーを取得 | 42 | 2 | step に操作が含まれていれば `agent-browser {click/type/fill/...}` を実行 | 43 | 3 | `agent-browser screenshot --full {outdir}/step-01.png` | 44 45 ## Video Flow (2+ steps) 46 47 step 間に `agent-browser wait 500` を挟む。各操作の前に `snapshot` を実行して要素を特定する。 48 49 | # | コマンド | 50 | --- | ---------------------------------------------------------------------- | 51 | 1 | `agent-browser record start {outdir}/capture.webm` | 52 | 2 | 各 step について順に `snapshot` してから操作を実行 | 53 | 3 | `agent-browser record stop` | 54 | 4 | `ffmpeg -i {outdir}/capture.webm -vcodec libx264 {outdir}/capture.mp4` | 55 56 ## 出力 57 58 stdout に mode 行を 1 つ返す。`/pr` はこの行を読んで分岐する。 59 60 | 状況 | 行 | 61 | ------------------ | --------------------------------------------------------- | 62 | 静止画を撮った | `mode=screenshot artifact=/absolute/path/to/step-01.png` | 63 | 動画を撮った | `mode=video artifact=/absolute/path/to/capture.mp4` | 64 | 入力が欠けた | `mode=failed reason=<欠落フィールド名>` | 65 | 撮影中に失敗した | `mode=failed reason=<1 行の理由>` |
thkt/claude-config/tree/main/.ja/skills/use-workflow-pageshot commit 3e2e99ac92
Frequently asked questions How do I install the Use Workflow Pageshot skill? Run npx skillmds@latest add thkt/use-workflow-pageshot-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Use Workflow Pageshot skill do? Use Workflow Pageshot It is listed under Productivity on SkillMD.
Is Use Workflow Pageshot safe to use? This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Use Workflow Pageshot? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Use Workflow Pageshot free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Use Workflow Pageshot? thkt (@thkt) published this skill. Their other Agent Skills are listed on their SkillMD profile.