From yangsonhung-awesome-agent-skills
Analyze UI images and output layout description with functional analysis. Triggers when user sends a UI screenshot and says "analyze this UI", "describe this interface layout", "what does this UI do", or "output UI layout and function description".
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin yangsonhung-awesome-agent-skillsThis skill uses the workspace's default tool permissions.
Analyze the provided UI screenshot and output structured layout description and functional analysis.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Analyze the provided UI screenshot and output structured layout description and functional analysis.
Use this skill when the user provides a UI image and requests analysis.
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 |
Identify sections top to bottom, each containing:
Infer functions from visual elements: