본문으로 건너뛰기
cccskills
무료GitHub에 공개

ui-screenshot

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구Playwright
설치 방법 보기

포함된 파일(1)

  • SKILL.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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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월 19일 업데이트

add-repo

무료

Register a new sub-repo in the knowledge base.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jupes/agent-forge-harness22026년 10월 19일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jupes/agent-forge-harness22026년 10월 19일 업데이트

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월 19일 업데이트

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월 19일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jupes/agent-forge-harness22026년 10월 19일 업데이트

jupes의 스킬 모두 보기

이 스킬의 문제 신고