ui-layout-analyzerlisted

# UI Layout Analyzer Analyze the provided UI screenshot and output structured layout description and functional analysis. ## 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: ```markdown ## 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. Ident