Skip to content
cccskills
FreePublished on GitHub

ui-screenshot

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

The English summary is being prepared. Showing the original description.

Works withPlaywright
See how to install

Files included (1)

  • SKILL.md1.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

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

The English summary is being prepared. Showing the original description.

jupes/agent-forge-harness2Updated Oct 19, 2026

Register a new sub-repo in the knowledge base.

The English summary is being prepared. Showing the original description.

jupes/agent-forge-harness2Updated Oct 19, 2026

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

The English summary is being prepared. Showing the original description.

jupes/agent-forge-harness2Updated Oct 19, 2026

ask

Free

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

The English summary is being prepared. Showing the original description.

jupes/agent-forge-harness2Updated Oct 19, 2026

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).

The English summary is being prepared. Showing the original description.

jupes/agent-forge-harness2Updated Oct 19, 2026

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

The English summary is being prepared. Showing the original description.

jupes/agent-forge-harness2Updated Oct 19, 2026

See all skills by jupes

Report a problem with this skill