Agent Skills › raphaelmansuy/edgequake › ux-ui-map-page-by-page

ux-ui-map-page-by-page

GitHub

按路由逐个生成 EdgeQuake WebUI 的 UX/UI 映射，通过分步截图和即时文档写入避免上下文过载，确保内存安全。

.github/skills/ux-ui-map-page-by-page/SKILL.md raphaelmansuy/edgequake

Trigger Scenarios

需要逐页捕获 UI 界面生成或更新 ux_ui_map 工件避免代理记忆饱和

Install

npx skills add raphaelmansuy/edgequake --skill ux-ui-map-page-by-page -g -y

More Options

Non-standard path

npx skills add https://github.com/raphaelmansuy/edgequake/tree/edgequake-main/.github/skills/ux-ui-map-page-by-page -g -y

Use without installing

npx skills use raphaelmansuy/edgequake@ux-ui-map-page-by-page

指定 Agent (Claude Code)

npx skills add raphaelmansuy/edgequake --skill ux-ui-map-page-by-page -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": "ux-ui-map-page-by-page",
    "license": "Proprietary (repository internal)",
    "metadata": {
        "area": "ux-ui-mapping",
        "repo": "raphaelmansuy\/edgequake"
    },
    "description": "Produce the EdgeQuake WebUI UX\/UI map one route at a time (capture screenshots, then immediately write per-page docs and per-page analysis requests). Use when asked to map UI, capture screens page-by-page, avoid agent memory saturation, or generate ux_ui_map artifacts.",
    "compatibility": "Designed for GitHub Copilot agent mode in VS Code; requires Playwright E2E to run the Next.js dev server."
}

UX/UI Map (Page-by-Page)

When to use

Use this skill when the user asks to:

capture screens page by page
avoid “capture everything then analyze later”
generate/update ux_ui_map/ artifacts

Key rule (memory-safe)

Process exactly one route at a time:

Navigate route
Capture screenshots (desktop/tablet/mobile)
Immediately write/update the page doc in ux_ui_map/pages/
Immediately write/update the page request in ux_ui_map/requests/
Only then move to the next route

Do not keep previous pages in working context.

Output contract

Write these files as you go:

ux_ui_map/pages/{page}.md (page documentation)
ux_ui_map/screenshots/{page}/...png (screenshots)
ux_ui_map/requests/{page}.json (analysis request inputs)
ux_ui_map/capture-index.jsonl (append-only log, one JSON object per captured route)

Templates:

Page doc template: assets/page-template.md
Request JSON template: assets/request-template.json

Helper script:

Scaffold/validate per-page artifacts: scripts/page_artifacts.mjs

Script usage

Scaffold the expected files/folders for one page:

node .github/skills/ux-ui-map-page-by-page/scripts/page_artifacts.mjs scaffold --page dashboard --route /

Validate that a page has its 3 required screenshots and docs:

node .github/skills/ux-ui-map-page-by-page/scripts/page_artifacts.mjs validate --page dashboard

Naming

{page} is a stable slug (e.g. dashboard, documents, query, graph, settings, api-explorer, login).
Screenshot names include viewport suffix: desktop.png, tablet.png, mobile.png.