ui-check
Use Playwright MCP to check UI styles and usability. Automatically used for requests like "check UI", "verify appearance", "take screenshot".
When & Why to Use This Skill
This Claude skill automates user interface (UI) verification and usability testing using Playwright. It enables developers and QA engineers to perform visual audits, check responsive layouts, and ensure accessibility compliance by capturing and analyzing screenshots directly within the agent workflow. By integrating automated browser actions with AI-driven visual analysis, it streamlines the process of identifying layout shifts, styling inconsistencies, and user experience bottlenecks.
Use Cases
- Automated Visual Regression: Verify that recent code changes haven't negatively impacted the layout, spacing, or styling of critical web pages.
- Accessibility Audits: Automatically check UI components for WCAG compliance, including color contrast ratios, font readability, and clear focus states.
- Responsive Design Testing: Capture and analyze screenshots across various viewport sizes to ensure a consistent experience on mobile, tablet, and desktop.
- Usability and UX Review: Evaluate the intuitiveness of navigation flows, button placements, and interactive elements to provide actionable feedback for design improvements.
- Cross-Browser Style Verification: Use Playwright to ensure that CSS styles and brand elements are rendered correctly and consistently.
| name | ui-check |
|---|---|
| description | Use Playwright MCP to check UI styles and usability. Automatically used for requests like "check UI", "verify appearance", "take screenshot". |
| allowed-tools | mcp__playwright, Bash, Read |
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
magickcommand before analysis - Using large images directly may cause crashes