ui-layout-analyzer
Use when analyzing a UI screenshot to describe layout structure and interface functionality.
- Installs
- 55
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill ui-layout-analyzer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ui-layout-analyzer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the ui-layout-analyzer skill do?
Use when analyzing a UI screenshot to describe layout structure and interface functionality.
How do I install ui-layout-analyzer?
Run npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill ui-layout-analyzer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-layout-analyzer/ (personal) or .claude/skills/ui-layout-analyzer/ (project).
Which AI agents can use ui-layout-analyzer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ui-layout-analyzer safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ui-layout-analyzer?
It is published by yangsonhung in yangsonhung/awesome-agent-skills. It has 55 recorded installs.
More from yangsonhung/awesome-agent-skills
novel-writer-cn
yangsonhung/awesome-agent-skills
当用户需要创作、续写、修改小说，或设计角色和世界观时使用。
novel-writer
yangsonhung/awesome-agent-skills
Use when writing, continuing, revising, or planning novels, characters, and fictional worlds.
topic-bookmarks-reorganizer-cn
yangsonhung/awesome-agent-skills
当用户需要按主题整理浏览器书签导出、URL 去重并生成可导入 HTML 时使用。
mac-software-storage-cleanup
yangsonhung/awesome-agent-skills
Use when auditing macOS app storage, cleaning priority caches, or recommending reclaimable disk space.
conversation-json-to-md
yangsonhung/awesome-agent-skills
Use when converting chat export JSON into per-conversation Markdown files with preserved user-assistant Q/A and normalized headings.
topic-bookmarks-reorganizer
yangsonhung/awesome-agent-skills
Use when reorganizing a browser bookmarks export by topic, deduplicating URLs, and producing an importable HTML file.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.