ui-check

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

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/ui-check

SKILL.md

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