# UI Check

> Use Playwright MCP to check UI styles and usability. Automatically used for requests like "check UI", "verify appearance", "take screenshot".

- Skill: `majiayu000/ui-check-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ui-check-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui-check-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/ui-check-2

---


# 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