Agent skill
ui-check
Use Playwright MCP to check UI styles and usability. Automatically used for requests like "check UI", "verify appearance", "take screenshot".
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/ui-check-yuheinakasaka-cc-dev-kit-22549887
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.
# 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?