跳到正文
cccskills
免费在 GitHub 公开

ui-screenshot

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

中文简介正在准备中。当前显示原文说明。

集成工具Playwright
查看安装方法

包含的文件(1)

  • SKILL.md1.1 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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 / 1000 字

此表单受 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 的全部技能

报告此技能的问题