screenshot-analyzer

name	screenshot-analyzer
description	Analyze screenshots with accurate coordinate mapping for UI debugging and Playwright testing. Use when debugging UI issues from screenshots, creating precise click targets, or implementing visual test automation.

Screenshot Analyzer

Skill for analyzing screenshots with accurate coordinate mapping.

When to Use

This skill activates when you:

• Debug UI issues from screenshots
• Need precise element coordinates
• Create Playwright test click targets
• Analyze responsive design issues
• Map visual elements to code
• Verify UI implementations

Keywords: screenshot, coordinates, click, position, pixel, UI debug, element location, Playwright, visual testing

How It Works

Claude Code v2.0.64 preserves original image dimensions when resizing screenshots:

1. Original dimensions stored - Even if image is compressed for display
2. Accurate coordinate mapping - Click targets are precise to original
3. Consistent measurements - Pixel values match actual screen

Quick Reference

Coordinate System

(0,0) ─────────────────────────► X (width)
  │
  │
  │
  │
  ▼
  Y (height)

Coordinates: (x, y)
- x = horizontal distance from LEFT edge
- y = vertical distance from TOP edge

Common Screen Sizes

Device	Width	Height
iPhone SE	375	667
iPhone 14	390	844
iPhone 14 Pro Max	430	932
iPad	768	1024
iPad Pro	1024	1366
Laptop	1366	768
Desktop HD	1920	1080
Desktop 4K	3840	2160

Usage Patterns

Pattern 1: UI Bug Debugging

You: [Paste screenshot of bug]
"The submit button isn't working. What's happening?"

Claude: "Based on the screenshot (1920x1080):

        The submit button is at (960, 750) but there's a
        transparent overlay div covering it at z-index: 1000
        from coordinates (0, 600) to (1920, 900).

        Fix: Remove or reposition the overlay
        File: components/checkout/CheckoutForm.tsx:145"

Pattern 2: Playwright Test Creation

You: [Paste screenshot of login form]
"Create a Playwright test for this login"

Claude: "Screenshot dimensions: 1440x900

        Element positions:
        - Email field: (720, 280)
        - Password field: (720, 360)
        - Submit button: (720, 450)
        - Forgot password link: (720, 500)

        ```typescript
        test('user can login', async ({ page }) => {
          await page.goto('/login')

          // Using data-testid (preferred)
          await page.fill('[data-testid="email"]', '[e-mail]')
          await page.fill('[data-testid="password"]', 'password123')
          await page.click('[data-testid="submit"]')

          // Or using coordinates (fallback)
          // await page.click({ x: 720, y: 450 })

          await expect(page).toHaveURL('/dashboard')
        })
        ```"

Pattern 3: Responsive Design Analysis

You: [Paste mobile screenshot]
"The navigation looks off on mobile"

Claude: "Screenshot: 375x667 (iPhone SE)

        Issues detected:
        1. Menu icon at (355, 30) - only 20px from edge
           Recommended: (335, 30) for better touch target

        2. Logo at (20, 25) - too large for viewport
           Currently: 80px wide
           Recommended: 60px max on mobile

        3. Search icon overlapping menu
           Search: (310, 30)
           Menu: (340, 30)
           Gap: only 30px, need 44px for touch targets

        Fix in: components/layout/Header.tsx
        ```tsx
        <nav className='flex items-center gap-4 md:gap-2'>
        ```"

Pattern 4: Element Overlap Detection

You: [Paste screenshot with layout issue]
"Something is blocking the checkout button"

Claude: "Screenshot: 1280x720

        Checkout button: (640, 580)

        Overlapping elements detected:
        1. Cookie banner: (0, 650) to (1280, 720)
           - Partially covers button area

        2. Live chat widget: (1180, 500) to (1280, 600)
           - Clear of button

        The cookie banner's top edge (y=650) is only 70px below
        the button center (y=580). On smaller viewports, this
        will overlap.

        Fix: Add bottom padding to main content
        ```css
        .checkout-container {
          padding-bottom: 100px; /* Space for cookie banner */
        }
        ```"

CircleTel UI Debugging

Customer Dashboard Issues

You: [Screenshot of dashboard]
"The billing card is cut off"

Claude: "Screenshot: 1366x768

        Billing card boundaries:
        - Start: (50, 400)
        - End: (450, 700) - extends 68px below viewport!

        Container height: 768px
        Card bottom: 700px + 68px padding = 768px (edge)

        Fix in: app/dashboard/page.tsx
        Add scrollable container or reduce card height"

Admin Portal Tables

You: [Screenshot of admin orders table]
"Export button disappears on laptop screens"

Claude: "Screenshot: 1366x768

        Table container: (0, 100) to (1366, 768)
        Export button: (1400, 120) - OUTSIDE viewport!

        The button is positioned at x=1400 but viewport
        width is only 1366px.

        Fix options:
        1. Make button sticky inside table header
        2. Add horizontal scroll
        3. Move button above table

        File: components/admin/orders/OrdersTable.tsx:45"

Payment Form Alignment

You: [Screenshot of checkout]
"Card fields look misaligned"

Claude: "Screenshot: 1920x1080

        Field positions (left edge):
        - Card number: x=400
        - Expiry: x=420 (20px offset!)
        - CVV: x=400
        - Name: x=400

        The expiry field has extra padding-left.

        Fix: components/checkout/CardFields.tsx:78
        ```tsx
        // Change
        <input className='pl-5' ... />
        // To
        <input className='pl-4' ... />
        ```"

Playwright Test Generation

Form Testing

You: [Screenshot of registration form]
"Generate Playwright test for this form"

Claude: "Screenshot: 1440x900

        Form fields:
        - First name: (500, 200)
        - Last name: (900, 200)
        - Email: (700, 280)
        - Phone: (700, 360)
        - Address: (700, 440)
        - Submit: (700, 540)

        ```typescript
        test('complete registration', async ({ page }) => {
          await page.goto('/register')

          await page.fill('[name="firstName"]', 'John')
          await page.fill('[name="lastName"]', 'Doe')
          await page.fill('[name="email"]', '[e-mail]')
          await page.fill('[name="phone"]', '[phone]')
          await page.fill('[name="address"]', '123 Main St')

          await page.click('button[type="submit"]')

          await expect(page.locator('.success-message')).toBeVisible()
        })
        ```"

Mobile Navigation Testing

You: [Mobile screenshot of menu]
"Generate mobile menu test"

Claude: "Screenshot: 375x812 (iPhone)

        Menu elements:
        - Hamburger: (335, 50)
        - Close (when open): (335, 50)
        - Menu items (when open):
          - Dashboard: (187, 150)
          - Services: (187, 210)
          - Billing: (187, 270)
          - Support: (187, 330)

        ```typescript
        test('mobile navigation', async ({ page }) => {
          await page.setViewportSize({ width: 375, height: 812 })
          await page.goto('/dashboard')

          // Open menu
          await page.click('[data-testid="mobile-menu-toggle"]')
          await expect(page.locator('[data-testid="mobile-menu"]')).toBeVisible()

          // Navigate to billing
          await page.click('text=Billing')
          await expect(page).toHaveURL('/dashboard/billing')
        })
        ```"

Multi-Step Wizard

You: [Screenshot of checkout wizard]
"Generate test for full checkout flow"

Claude: "Screenshot: 1440x900

        Step 1 - Coverage:
        - Address input: (720, 300)
        - Check button: (720, 400)

        Step 2 - Package:
        - Basic package: (400, 350)
        - Premium package: (720, 350)
        - Enterprise: (1040, 350)
        - Continue: (720, 550)

        Step 3 - Payment:
        - Card number: (720, 300)
        - Pay button: (720, 500)

        ```typescript
        test('complete checkout', async ({ page }) => {
          // Step 1: Coverage
          await page.goto('/order')
          await page.fill('[data-testid="address"]', '123 Main St')
          await page.click('[data-testid="check-coverage"]')
          await page.waitForSelector('[data-testid="coverage-result"]')

          // Step 2: Package selection
          await page.click('[data-testid="package-premium"]')
          await page.click('[data-testid="continue"]')

          // Step 3: Payment
          await page.fill('[data-testid="card-number"]', '4111111111111111')
          await page.fill('[data-testid="card-expiry"]', '12/25')
          await page.fill('[data-testid="card-cvv"]', '123')
          await page.click('[data-testid="pay-now"]')

          await expect(page).toHaveURL('/order/success')
        })
        ```"

Best Practices

Screenshot Quality

1. Use full resolution - Don't crop unless necessary
2. Include context - Show surrounding elements
3. Capture actual state - Screenshot the actual bug

Coordinate Usage

1. Prefer selectors - data-testid > text > coordinates
2. Coordinates as fallback - When no good selector exists
3. Document why - Comment coordinate usage

Large Screenshots

• Claude handles 4K+ images accurately
• Original dimensions always preserved
• No loss of coordinate precision

Responsive Testing

• Always note viewport dimensions
• Test multiple breakpoints
• Consider touch target sizes (44x44px minimum)

Integration with Other Skills

With Bug Fixing

1. Paste screenshot of bug
2. Get coordinates and analysis
3. Use bug-fixing skill for solution

With Mobile Testing

1. Capture mobile screenshots
2. Analyze coordinates
3. Generate Playwright mobile tests

Troubleshooting

Coordinates seem off

• Verify screenshot wasn't cropped
• Check if browser zoom was 100%
• Confirm viewport size in screenshot

Can't identify element

• Use higher resolution screenshot
• Ensure element is visible (not behind overlay)
• Check if element is in iframe

Playwright test fails

• Verify selectors exist
• Add appropriate waits
• Check if page is responsive (coordinates shift)

---

Version: 1.0.0 Last Updated: 2025-12-10 For: Claude Code v2.0.64+