ui-check
- Repo stars 330
- License MIT
- Author repo claude-skill-registry
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
- Fluxly category
- Data
- Author-declared agents
- No explicit declaration found; this is not inferred or tested compatibility
- Static check
- 94 / 100 · heuristic scan, not runtime safety proof
- Author / version / license
- @majiayu000 · MIT
- Fluxly token estimate
- Lean
- Fluxly setup estimate
- Plug-and-play
- External API key
- No requirement detected
- Detected OS requirements
- Unspecified
- Runtime requirements
- Unspecified
- Detected file/system behavior
-
- Read-only
- Detected network behavior
- Local-only
- Install commands
- None (reference only)
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
The current SKILL.md does not define a fixed output example. Usage
Usage
1. Launch Browser
1. Launch Browser
2. Take Screenshot
2. Take Screenshot
3. Resize Image (Required)
Always resize screenshots with ImageMagick before analyzing in Claude Code.
4. UI Analysis
Load resized image and analyze: Layout verification Style verification
Check Perspectives
Check Perspectives
# 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 Evidence boundary and execution chain
Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.
sections -> Usage → 1. Launch Browser → 2. Take Screenshot → 3. Resize Image (Required) → 4. UI Analysis → Check Perspectives
terms -> Use Playwright MCP to verify UI styles and usability. · Always resize screenshots with ImageMagick before analyzing in Claude Code.
files/cmd -> .claude/tmp/screenshots/ · magick · .claude/tmp/screenshots/resized.png · margins/spacing · .claude/tmp/screenshots
body sha256 -> 9ee79925501a
Decide Fit First
Design Intent
How To Use It
Boundaries And Review