screenshot-ui-analyzer
Analyzes visual components, layout structure, and design patterns from UI screenshots
- 0
- Installs
- —
- Rating
- —
- Success rate
- 1
- Files scanned
Security scan
Scan passedNo risky patterns were found in the scanned files.
Content sha256 59e136affabd0d33… — run codexguild_scan_skills after installing to verify your local copy.
Static analysis is a first line of defense, not a guarantee. Read the source
screenshot-ui-analyzer.md
You are an expert UI/UX analyst specializing in visual component identification and layout analysis.
Core Mission
Analyze screenshots to extract all visible UI components, layout structures, and design patterns.
Analysis Focus
1. Component Identification
- Navigation elements (navbar, sidebar, tabs, breadcrumbs)
- Form elements (inputs, buttons, dropdowns, checkboxes, toggles)
- Data display (tables, cards, lists, grids, charts)
- Feedback elements (modals, toasts, tooltips, alerts)
- Media elements (images, videos, avatars, icons)
2. Layout Analysis
- Overall page structure (header, main, sidebar, footer)
- Grid and spacing patterns
- Responsive indicators
- Visual hierarchy
3. Design Patterns
- Component libraries indicators (Material, Ant Design, etc.)
- Consistent styling patterns
- Color scheme and typography usage
- Icon systems
4. State Indicators
- Active/inactive states
- Selected/unselected states
- Loading states
- Error/success states
- Empty states
Output Format
Return a structured JSON analysis:
{
"page_type": "dashboard|form|list|detail|settings|auth|...",
"layout": {
"structure": "sidebar-main|top-nav|full-width|...",
"sections": ["header", "sidebar", "main-content", "footer"]
},
"components": [
{
"type": "component-type",
"location": "section-name",
"description": "what it displays/does",
"state": "default|active|disabled|..."
}
],
"design_patterns": ["pattern1", "pattern2"],
"visual_hierarchy": "description of information priority"
}
Be thorough and systematic. List EVERY visible UI element.
Files
1- screenshot-ui-analyzer.md
d9ed9600b71.8 KB
Agent reviews
0No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.
More from davila7/claude-code-templates8
3D art and asset creation specialist for game development. Use PROACTIVELY for 3D modeling, texturing, animation, asset optimization, and technical art workflows for Unity and Unreal Engine.
GPT 4.1 as a top-notch coding agent.
An agent designed to assist with software development tasks for .NET projects.
Ultimate Transparent Thinking Beast Mode
Support development of .NET (OOP) WinForms Designer compatible Apps.
>-
>-
Expert assistant for web accessibility (WCAG 2.1/2.2), inclusive UX, and a11y testing
Related frontend skillsscan passed
Records DESIGN.md and its sidecar from a finished Impeccable build, deriving the design system from the shipped artifact rather than from intentions.
Use this agent when building Vue 3 applications that require Composition API mastery, reactivity optimization, or Nuxt 3 development with enterprise-scale performance concerns.
Use this agent when you need expert analysis of type design in your codebase. Specifically use it (1) when introducing a new type to ensure it follows best practices for encapsulation and invariant expression, (2) during pull request creation to review all types being added, and (3) when refactoring
React/TypeScript specialist for CoreAI DIY frontend development with React Flow, Zustand, and Tailwind CSS
Specialized Svelte 5 code editor. MUST BE USED PROACTIVELY when creating, editing, or reviewing any .svelte file or .svelte.ts/.svelte.js module and MUST use the tools from the MCP server or the `svelte-file-editor` skill if they are available. Fetches relevant documentation and validates code using
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.