ux-ui-map-page-by-page

Captures per-route screenshots and generates UX/UI documentation for the EdgeQuake WebUI.

2.1k|244|Updated Dec 21, 2025
One-click install
npx skills add https://github.com/raphaelmansuy/edgequake --skill ux-ui-map-page-by-page-raphaelmansuy
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: ux-ui-map-page-by-page
Source: https://github.com/raphaelmansuy/edgequake/tree/main/.github/skills/ux-ui-map-page-by-page
Command: npx skills add https://github.com/raphaelmansuy/edgequake --skill ux-ui-map-page-by-page-raphaelmansuy

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve? Mapping a web application's UI route-by-route often overloads the agent's context when screenshots and analysis accumulate, leading to lost or incomplete documentation. This Skill enforces a memory-safe workflow that processes exactly one route at a time, writing page docs and analysis requests immediately after each capture. ## Core Features & Use Cases - Page-by-page capture: Navigates one route at a time, capturing desktop, tablet, and mobile screenshots before moving on. - Structured artifact generation: Produces per-page Markdown docs, JSON analysis requests, and an append-only capture index under ux_ui_map/. - Scaffold and validate script: A Node.js helper scaffolds expected files for a page and validates that all three screenshots and docs exist. - Use Case: Ask the agent to generate ux_ui_map/ artifacts for all routes of the Next.js dev server; it captures each route, writes docs immediately, and never retains prior pages in context. ## Quick Start Ask the agent to capture the UI page-by-page and generate ux_ui_map artifacts for all routes of the running dev server.

Frequently Asked Questions about ux-ui-map-page-by-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture screenshots of every route in a Next.js app?โ–ผ

Run the Next.js dev server and process one route at a time: navigate, capture desktop, tablet, and mobile screenshots, then write the page doc and request JSON before moving on. The scaffold command creates the expected folders for each page slug.

How do I avoid agent context overflow when documenting a web UI?โ–ผ

Process exactly one route at a time and write artifacts to disk immediately after each capture, never keeping previous pages in working context. This skill enforces that rule and logs each capture to an append-only capture-index.jsonl file.

What artifacts does the UX/UI mapping workflow produce?โ–ผ

It produces a Markdown page doc per route, three viewport screenshots (desktop.png, tablet.png, mobile.png), a per-page JSON analysis request, and an append-only capture-index.jsonl log, all under the ux_ui_map/ directory.

How do I validate that all screenshots for a page were captured?โ–ผ

Run the page_artifacts.mjs script with the validate command and the page slug. It checks for the page doc, request JSON, and all three viewport screenshots, exiting with a non-zero code if anything is missing.

What environment is required to run this UI capture workflow?โ–ผ

It is designed for GitHub Copilot agent mode in VS Code and requires Playwright E2E to run the Next.js dev server. Node.js is needed to execute the scaffold and validate helper script.