UI Check Skill

Use Playwright MCP to verify UI styles and usability.

Usage

1. Launch Browser

Navigate to target URL with mcp__playwright__browser_navigate

2. Take Screenshot

Take screenshot with mcp__playwright__browser_screenshot

3. Resize Image (Required)

Always resize screenshots with ImageMagick before analyzing in Claude Code.

# Resize to 1024px width
magick screenshot.png -resize 1024x .claude/tmp/screenshots/resized.png

4. UI Analysis

Load resized image and analyze:

• Layout verification
• Style verification
• Accessibility verification
• Usability verification

Check Perspectives

Layout

• Is element placement appropriate?
• Is responsive design appropriate?
• Are margins/spacing consistent?

Style

• Is color usage appropriate?
• Are fonts readable?
• Are icons appropriate?

Accessibility

• Is contrast ratio sufficient?
• Are focus states clear?
• Is text size appropriate?

Usability

• Is operation intuitive?
• Is feedback clear?
• Are error states understandable?

Output

# UI Check Result

## Screenshot
[Image path]

## Results

### Good Points
- ...

### Improvement Suggestions
- ...

## Recommended Actions
- ...

Notes

• Save screenshots to .claude/tmp/screenshots/
• Always resize with magick command before analysis
• Using large images directly may cause crashes