Name: ui-layout-analyzer
Author: yangsonhung

Imported from yangsonhung/awesome-agent-skills (skills/en/ui-layout-analyzer/SKILL.md). Install upstream with npx skills add yangsonhung/awesome-agent-skills --skill ui-layout-analyzer. Copyright stays with the author.

UI Layout Analyzer

Overview

Analyze a provided UI screenshot and output a structured layout description plus functional analysis. The skill focuses on interface screenshots, describing page structure, visual sections, hierarchy, controls, and likely user workflows without designing new UI or reviewing implementation code.

When to Use

Use this skill when the user provides a UI image and requests analysis.

Do not use

Do not use this skill for:

Non-UI images (photos, diagrams, charts that are not interface screenshots)
Requests to design or create UI (use ui-ux-pro-max instead)
Code review of UI implementation (use code-reviewer instead)

Instructions

Follow this format exactly:

## UI Layout Description

### Overall Structure
Describe the overall structure type (modal dialog/full page/sidebar/drawer), background color, rounded corners, shadows, etc. End with "---".

---

### Section N: Section Name
- Specific description items
- Use bullet points for key elements

[Continue describing each section...]

---

## Function Description

| Function Module | Description |
|---|---|
| **Module Name** | Function description |

Analysis Steps

1. Identify Overall Structure

Page type: Modal dialog / Full page / Sidebar / Bottom drawer
Background: White/gray/gradient/image background
Special elements: Rounded corners, shadows, borders, dividers

2. Divide into Sections

Identify sections top to bottom, each containing:

Section type: Header / Tab bar / Content area / List / Table / Input area / Action bar
Key elements: Icons, text, buttons, input fields
Layout: Left-aligned/centered/right-aligned, horizontal/vertical

3. Identify Interactive Elements

Buttons: Primary (filled) / Secondary (text) / Icon buttons
Inputs: Single-line/multiline text/dropdown/date picker
Selectors: Radio/checkbox/switch/tab switch
Lists: List items, grid layout, card layout

4. Describe Functions

Infer functions from visual elements:

Form: Input, validation, submit
Navigation: Jump, tab switch, back
Display: List, detail, carousel
Feedback: Toast, modal, loading state

Notes

Recognize and include all text visible in the image
Mark states (disabled/selected/expanded) when visible
Use Arabic numerals for section numbers (1, 2, 3...)
Keep descriptions concise but complete

Install ui-layout-analyzer and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "yangsonhung-awesome-agent-skills-ui-layout-analyzer", "kind": "skill", "name": "ui-layout-analyzer", "description": "Use when analyzing a UI screenshot to describe layout structure and interface functionality.", "publisher": "yangsonhung", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Use when analyzing a UI screenshot to describe layout structure and interface functionality." ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/yangsonhung/awesome-agent-skills", "path": "skills/en/ui-layout-analyzer/SKILL.md", "ref": "HEAD", "url": "https://github.com/yangsonhung/awesome-agent-skills/blob/HEAD/skills/en/ui-layout-analyzer/SKILL.md", "key": "yangsonhung/awesome-agent-skills/skills/en/ui-layout-analyzer/SKILL.md" } }, "instructions": "# UI Layout Analyzer\n\n## Overview\n\nAnalyze a provided UI screenshot and output a structured layout description plus functional analysis. The skill focuses on interface screenshots, describing page structure, visual sections, hierarchy, controls, and likely user workflows without designing new UI or reviewing implementation code.\n\n## When to Use\n\nUse this skill when the user provides a UI image and requests analysis.\n\n## Do not use\n\nDo not use this skill for:\n- Non-UI images (photos, diagrams, charts that are not interface screenshots)\n- Requests to design or create UI (use ui-ux-pro-max instea", "cost": { "context_tokens": 592 } }

ui-layout-analyzer

About