subagents/ davila7/claude-code-templates

screenshot-ui-analyzer

Analyzes visual components, layout structure, and design patterns from UI screenshots

0
Installs
—
Rating
—
Success rate
1
Files scanned
Scan passedfrontend
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

1 files scannedscanner v1.2.0Oct 11, 2026

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

exact scanned copy

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
1.8 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from davila7/claude-code-templates8

3d-artist

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.

Scan passed 0
4.1-Beast

GPT 4.1 as a top-notch coding agent.

Scan passed 0
CSharpExpert

An agent designed to assist with software development tasks for .NET projects.

Scan passed 0
Ultimate-Transparent-Thinking-Beast-Mode

Ultimate Transparent Thinking Beast Mode

Scan passed 0
WinFormsExpert

Support development of .NET (OOP) WinForms Designer compatible Apps.

Scan passed 0
academic-research-synthesizer

>-

Scan passed 0
academic-researcher

>-

Scan passed 0
accessibility

Expert assistant for web accessibility (WCAG 2.1/2.2), inclusive UX, and a11y testing

Scan passed 0

Related frontend skillsscan passed

impeccable-documenter

Records DESIGN.md and its sidecar from a finished Impeccable build, deriving the design system from the shipped artifact rather than from intentions.

Scan passed 0
vue-expert

Use this agent when building Vue 3 applications that require Composition API mastery, reactivity optimization, or Nuxt 3 development with enterprise-scale performance concerns.

Scan passed 0
type-design-analyzer

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

Scan passed 0
Frontend Developer

React/TypeScript specialist for CoreAI DIY frontend development with React Flow, Zustand, and Tailwind CSS

Scan passed 0
svelte-file-editor

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

Scan passed 0
c4-component

Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships. Creates component diagrams and documentation. Use when synthesizing code-level documentation into logical compo

Scan passed 0