/ui-analyzer

name: ui-analyzer
description: Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.
allowed-tools: Read, Write, Edit, Glob, Grep, AskUserQuestion

UI Analyzer

This skill provides a systematic approach to analyzing UI design screenshots and translating them into production-ready React components using TypeScript and Tailwind CSS.

Purpose

Transform UI design screenshots into well-structured, accessible, and maintainable React components. The skill guides through analyzing layouts, extracting design tokens, identifying components, and generating clean code that matches the design while following best practices.

When to Use This Skill

Use this skill when:

• The user provides a UI design screenshot, mockup, or Figma export
• The user requests "implement this design" or "build this UI"
• The user asks to "analyze this screenshot"
• The user wants to convert a design to code
• The user needs help understanding a UI's structure
• The user requests matching an existing design

Analysis Workflow

Follow these steps systematically when analyzing a UI screenshot:

Step 1: Initial Observation and Screenshot Reading

**Read the provided screenshot first** using the Read tool if a file path is provided, or if the user has shared an image in the conversation.

After viewing the screenshot: 1. Describe what you see in the UI 2. Identify the screen/page type (login, dashboard, form, etc.) 3. Determine the target device (desktop, mobile, responsive) 4. Note the overall aesthetic (modern, minimal, colorful, etc.) 5. Confirm understanding with the user before proceeding

Step 2: Layout Analysis

Identify the high-level layout structure:

1. **Main layout type** - Consult `references/layout-patterns.md` to identify:

• Single column
• Sidebar layout
• Header + content
• Grid layout
• Split screen
• Dashboard
• Master-detail
• Other patterns

2. **Layout hierarchy** - Break down into sections:

• Header/navigation
• Main content area
• Sidebar (if present)
• Footer (if present)
• Nested structures

3. **Responsive considerations**:

• How should layout adapt to mobile?
• Which elements stack or hide?
• Breakpoint strategy

Reference `references/layout-patterns.md` for Tailwind implementation patterns.

Step 3: Component Identification

Systematically identify all UI components using `references/ui-analysis-checklist.md`:

**Navigation Components**:

• Top nav, sidebar nav, breadcrumbs, tabs, etc.

**Data Display Components**:

• Cards, tables, lists, stats, badges, avatars, icons, etc.

**Input Components**:

• Text inputs, selects, checkboxes, radios, switches, date pickers, etc.

**Action Components**:

• Buttons (primary, secondary, etc.), icon buttons, links, etc.

**Feedback Components**:

• Alerts, toasts, progress bars, loading states, etc.

**Overlay Components**:

• Modals, drawers, tooltips, popovers, dropdowns, etc.

List all identified components with:

• Component type and purpose
• Location in the layout
• Approximate size and styling
• Interactive states (if visible)

Step 4: Design Token Extraction

Extract design system values using `references/design-tokens.md`:

**Color Palette**: 1. Identify all unique colors in the design 2. Categorize by usage:

• Primary brand color
• Secondary/accent colors
• Background colors (main, secondary)
• Text colors (primary, secondary, muted)
• Border colors
• State colors (success, warning, error, info)

3. Map each color to nearest Tailwind color or note custom color needed 4. Create a color reference table

**Typography**: 1. Identify font family (serif, sans-serif, monospace) 2. List all text sizes observed 3. Map to Tailwind typography scale (`text-xs` to `text-6xl`) 4. Note font weights used (normal, medium, semibold, bold) 5. Identify heading hierarchy (H1-H6)

**Spacing**: 1. Observe padding patterns (card padding, button padding, etc.) 2. Observe margin/gap patterns (between sections, between items) 3. Map to Tailwind spacing scale (p-4, m-6, gap-8, etc.) 4. Note the spacing unit (usually 4px or 8px base)

**Other Tokens**:

• Border radius (rounded-none to rounded-full)
• Shadows (shadow-sm to shadow-2xl)
• Border widths
• Icon sizes

Reference `references/design-tokens.md` for complete mapping tables.

Step 5: Detailed Component Analysis

For each major component identified:

1. **Component boundaries** - Where does it start/end? 2. **Props/data** - What data does it receive? 3. **Internal structure** - Sub-components and elements 4. **Styling details**:

• Background color
• Text color and size
• Padding and margins
• Border and radius
• Shadow

5. **Interactive states** (if visible or inferable):

• Hover
• Active/pressed
• Focused
• Disabled
• Loading
• Error

6. **Accessibility needs**:

• ARIA labels
• Semantic HTML
• Keyboard navigation

Step 6: Implementation Strategy

Plan the implementation approach:

1. **Component hierarchy** - Which components to build first? 2. **Reusability** - Which patterns repeat? Extract to reusable components 3. **State management** - Does any component need Zustand or just local state? 4. **Integration with react-component-generator** - Can existing templates be used? 5. **File structure** - Where should components live?

**If the react-component-generator skill is available**:

• Reference its templates for common components (forms, cards, buttons, modals, etc.)
• Use its best practices for component structure
• Follow its naming conventions

Step 7: Code Generation

Generate React components following these principles:

**Structure**: 1. Start with TypeScript interfaces for pro