# 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.

```bash
# 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

```markdown
# 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