skills.rest
raphaelmansuy
raphaelmansuyCOMMUNITY
Explore all skills by this author →
Website𝕏@raphaelmansuyGitHub

ux-ui-analyze-single-page

Analyze one captured UI page screenshot set and write its descriptive page documentation.

2.1k|244|Updated Dec 21, 2025
Search Tags:#screenshots#responsive design#design audit#ui analysis#page mapping#ux documentation
One-click install
npx skills add https://github.com/raphaelmansuy/edgequake --skill ux-ui-analyze-single-page-raphaelmansuy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-analyze-single-page
Source: https://github.com/raphaelmansuy/edgequake/tree/main/.github/skills/ux-ui-analyze-single-page
Command: npx skills add https://github.com/raphaelmansuy/edgequake --skill ux-ui-analyze-single-page-raphaelmansuy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Documenting UI pages one at a time prevents context saturation when analyzing many screens, and this Skill ensures each captured page gets a neutral, structured description written immediately after capture. ## Core Features & Use Cases - Single-Page Analysis: Reads one page's request JSON plus desktop, tablet, and mobile screenshots, then writes a structured Markdown document. - Neutral Descriptive Output: Documents hierarchy from page to regions, containers, components, and elements without judgment or recommendations. - Responsive Comparison: Inspects desktop first for structure, then tablet and mobile for responsive layout changes. - Use Case: After capturing screenshots of the /documents route, ask the agent to analyze them and immediately produce ux_ui_map/pages/documents.md with an ASCII layout diagram and component breakdown. ## Quick Start Ask the agent to analyze the dashboard screenshots and write the page document now.

Frequently Asked Questions about ux-ui-analyze-single-page

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

FAQPage Schema
How do I document a UI page from screenshots?▼

Provide the page's request JSON and desktop, tablet, and mobile screenshots, then ask the agent to analyze them. The Skill writes a Markdown page document with an overview, ASCII layout diagram, screenshot table, and component hierarchy.

How to analyze multiple UI pages without losing context?▼

Analyze one page at a time and write each page document immediately after capture. This Skill is designed for exactly that pattern, avoiding the need to carry multi-page context in a single conversation.

Can I use this without running the application?▼

Yes, the Skill works without running the app as long as the screenshots and request JSON already exist in the ux_ui_map directory. It only reads existing capture files and writes the analysis document.

Does the UI analysis include design recommendations?▼

No, the output is strictly descriptive. The Skill documents page structure, regions, containers, and components in neutral language and explicitly avoids judgments, severity ratings, and improvement suggestions.

What happens when screenshot text is not legible?▼

The Skill states the uncertainty plainly in the document, for example noting that text is not legible at the given resolution, rather than guessing at content it cannot verify.

Related Skills

Explore More Design & Creative Skills→
cfagerlincfagerlin

capture

Capture section-scoped screenshots at desktop, tablet, and mobile breakpoints using Playwright CLI.

Community
Advanced
Mjlike123Mjlike123

component-extract

Extracts reusable component inventories from existing designs across five audit phases.

Community
Intermediate
vercel-labsvercel-labs
210

before-and-after

Capture before-and-after screenshots from two URLs or image paths.

Official
Advanced
EnigmaWUEnigmaWU
1

create-living-documentation

Generate living documentation from code annotations, types, tests, and compilation artifacts.

Community
Advanced