本文へ移動
cccskills
無料GitHub で公開

ui-screenshot

Auto-capture UI screenshots for PRs using Playwright MCP browser tools.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.1 KB
  • ui-screenshot.md1.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

ui-screenshot

Captures screenshots of changed UI areas and attaches them to PRs.

When to Use

  • After frontend feature work or UI bug fixes
  • When /ship detects .tsx, .css, or .html changes

Prerequisites

  • Playwright MCP server configured in Claude Code settings
  • Dev server startable via bun run dev

Steps

1. Start dev server

bun run dev

2. Identify changed pages

git diff --name-only main..HEAD | grep -E "\.(tsx|css|html)$"

Map file paths to URL routes via the app router config.

3. Capture screenshots (Playwright MCP)

For each affected page:

  1. Navigate to the URL
  2. Full-page screenshot at 1280px viewport
  3. Full-page screenshot at 375px viewport (mobile)
  4. Save to .tmp/screenshots/<page>-<timestamp>.png

4. Attach to PR

Include screenshot images in PR body when running /ship.

Output

Screenshots: 3 captured
  dashboard-1280.png
  dashboard-375.png
  settings-1280.png
Attached to PR #17.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

add-bead

無料

Capture free-text work as a tracked Beads issue. Use when the user runs /add-bead or wants to quickly file a Beads issue.

日本語の概要は準備中です。原文の説明を表示しています。

jupes/agent-forge-harness22026年10月11日 更新

add-repo

無料

Register a new sub-repo in the knowledge base.

日本語の概要は準備中です。原文の説明を表示しています。

jupes/agent-forge-harness22026年10月11日 更新

Add focused Bun unit tests for mission-critical behavior and edge cases — not blanket coverage.

日本語の概要は準備中です。原文の説明を表示しています。

jupes/agent-forge-harness22026年10月11日 更新

ask

無料

Answer questions about the codebase from knowledge files. Use when the user runs /ask or asks a domain/knowledge question about the repos.

日本語の概要は準備中です。原文の説明を表示しています。

jupes/agent-forge-harness22026年10月11日 更新

Meta-skill for creating Agent Forge skills under .claude/skills/ with SKILL.md, optional references/ and scripts/, and Bun scaffolds. Use when the user wants to add or author a skill, scaffold a new skill folder, or align skill docs with harness conventions (JSON script output, Beads for tasks).

日本語の概要は準備中です。原文の説明を表示しています。

jupes/agent-forge-harness22026年10月11日 更新

Choose Beads issue priority (P0–P4, numeric, or named) from urgency, impact, and risk when creating or triaging work.

日本語の概要は準備中です。原文の説明を表示しています。

jupes/agent-forge-harness22026年10月11日 更新

jupes のスキルをすべて見る

このスキルの問題を報告する