ui-analyzer

What this skill does

# 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 props
2. Use functional components with React.FC
3. Include JSDoc comments
4. Export both named and default exports

**Styling**:
1. Use Tailwind CSS exclusively for styling
2. Apply extracted design tokens
3. Organize classes logically (layout → spacing → colors → effects → states)
4. Use responsive classes where needed (sm:, md:, lg:, xl:)

**Best Practices**:
1. Use semantic HTML elements
2. Include ARIA attributes for accessibility
3. Handle loading and error states
4. Support keyboard navigation
5. Use proper TypeScript types (no `any`)
6. Keep components focused and composable

**Example Component Template**:
```tsx
import React from 'react';

interface ComponentNameProps {
  // Props based on analysis
  title: string;
  description?: string;
  onClick?: () => void;
  className?: string;
}

/**
 * ComponentName - Brief description based on UI purpose
 *
 * @param props - Component props
 * @returns JSX.Element
 */
export const ComponentName: React.FC<ComponentNameProps> = ({
  title,
  description,
  onClick,
  className = ''
}) => {
  return (
    <div className={`/* Tailwind classes from design */ ${className}`}>
      {/* Implementation based on screenshot */}
    </div>
  );
};

export default ComponentName;
```

### Step 8: Verification and Refinement

After generating code:

1. **Review against screenshot** - Does it match the design?
2. **Check responsiveness** - Will it work on different screen sizes?
3. **Verify accessibility** - Are ARIA labels and semantic HTML present?
4. **Validate design tokens** - Are colors, spacing, typography correct?
5. **Consider edge cases** - Long text, empty states, loading states
6. **Note assumptions** - Clearly state what was assumed vs confirmed

### Step 9: Deliverables

Provide the user with:

1. **Analysis Summary**:
   - Layout description
   - Component breakdown
   - Design tokens extracted

2. **Generated Code**:
   - Complete React component(s)
   - TypeScript interfaces
   - Tailwind classes applied

3. **Implementation Notes**:
   - Installation requirements (if any packages needed)
   - Usage examples
   - Customization suggestions
   - Responsive behavior notes

4. **Next Steps**:
   - Suggest improvements or variations
   - Note areas that might need refinement
   - Offer to generate additional related components

## Common Scenarios

### Scenario 1: Simple Form Screenshot

**User**: "Implement this login form design [screenshot]"

**Approach**:
1. Read