Agent Skills › raphaelmansuy/edgequake › playwright-ux-ui-capture

playwright-ux-ui-capture

GitHub

使用 Playwright 自动化捕获 WebUI 路由的截图与请求数据，生成标准化产物。适用于实现或修改 E2E 截图采集规范及 UI 自动化收集任务。

.github/skills/playwright-ux-ui-capture/SKILL.md raphaelmansuy/edgequake

Trigger Scenarios

需要为 WebUI 页面添加或更新 Playwright E2E 截图采集规格要求自动化执行 UI 界面截图和请求数据收集

Install

npx skills add raphaelmansuy/edgequake --skill playwright-ux-ui-capture -g -y

More Options

Non-standard path

npx skills add https://github.com/raphaelmansuy/edgequake/tree/edgequake-main/.github/skills/playwright-ux-ui-capture -g -y

Use without installing

npx skills use raphaelmansuy/edgequake@playwright-ux-ui-capture

指定 Agent (Claude Code)

npx skills add raphaelmansuy/edgequake --skill playwright-ux-ui-capture -a claude-code -g -y

安装 repo 全部 skill

npx skills add raphaelmansuy/edgequake --all -g -y

预览 repo 内 skill

npx skills add raphaelmansuy/edgequake --list

SKILL.md

Frontmatter

{
    "name": "playwright-ux-ui-capture",
    "license": "Proprietary (repository internal)",
    "metadata": {
        "area": "e2e",
        "repo": "raphaelmansuy\/edgequake"
    },
    "description": "Capture EdgeQuake WebUI routes with Playwright and write artifacts immediately (screenshots + per-page request JSON + capture index). Use when adding\/updating Playwright E2E capture specs or when asked to automate UI screenshot collection.",
    "compatibility": "Requires Node.js, Next.js dev server, and @playwright\/test in edgequake_webui; runs via npm scripts."
}

Playwright UX/UI Capture (Artifact-first)

When to use

Use this skill when implementing or modifying Playwright E2E to:

capture screenshots for a set of routes
emit per-route artifacts immediately to disk
keep the process robust and deterministic

Repo conventions

Playwright config: edgequake_webui/playwright.config.ts
Tests live in: edgequake_webui/e2e/
UX/UI output dir: ux_ui_map/ (repo root)

Route discovery

Prefer enumerating concrete page.tsx files under edgequake_webui/src/app/**/page.tsx.

Ignore route groups: folders like (dashboard) do not appear in URL paths.
Avoid dynamic segments: paths with [param], [...param], [[...param]] are not capturable without fixture data.

Helper script (no dependencies):

Derive concrete routes from the Next.js App Router: scripts/derive_routes.mjs

Example:

node .github/skills/playwright-ux-ui-capture/scripts/derive_routes.mjs --format json

Viewports (required)

Capture exactly these 3 widths (use a reasonable height):

desktop: 1440px
tablet: 768px
mobile: 375px

Waiting strategy (important)

Prefer Playwright auto-waits + a stable “page ready” signal (e.g. a visible main or h1).
Avoid relying on waitForLoadState('networkidle') as the primary sync.

Artifact write-out (must be immediate)

For each route:

create ux_ui_map/screenshots/{page}/
write desktop.png, tablet.png, mobile.png
write/update ux_ui_map/requests/{page}.json from the template
append one JSON line to ux_ui_map/capture-index.jsonl

How to run

From repo root:

cd edgequake_webui && npm run test:e2e

To run a single spec (preferred while iterating):

cd edgequake_webui && npx playwright test e2e/<spec>.spec.ts

Output example (capture index)

Each line is a standalone JSON object:

{"page":"dashboard","route":"/","capturedAt":"2025-12-26T12:34:56.000Z","ok":true}

Common failure handling

If a page requires auth, capture /login first and then attempt the route.
If a route 404s, still write a capture-index line with ok:false and store a screenshot of the error state.