From wicked-garden
Screenshot-based UI review using Claude's multimodal capabilities. Analyzes visual design from image files — layout, spacing, color, typography, responsiveness — and compares against design system rules. Use when: "screenshot review", "UI screenshot", "visual analysis from image", "design from screenshot", "review PNG", "review JPG", "image-based review"
npx claudepluginhub mikeparcewski/wicked-garden --plugin wicked-gardenThis skill uses the workspace's default tool permissions.
Analyze UI design directly from screenshot images using Claude's multimodal
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
Analyze UI design directly from screenshot images using Claude's multimodal vision capabilities. No code needed — review what users actually see.
Claude can read PNG, JPG, WEBP, and GIF files directly with the Read tool:
Read(file_path="/path/to/screenshot.png")
The image is presented visually. Analyze it for design quality, consistency, and usability issues without requiring access to source code.
When a reference image is provided:
Read(file_path="/path/to/reference.png") # design spec or comp
Read(file_path="/path/to/implementation.png") # built UI
Compare:
Use the Read tool on a screenshot file, or capture via browser automation if available (e.g., Playwright, Puppeteer, or an MCP browser tool). Place captured images in a local path and then read them for analysis.
Review the same page at multiple viewports:
1. Capture desktop (1440px)
2. Capture tablet (768px)
3. Capture mobile (375px)
4. Compare: layout adapts correctly?
5. Check: no content hidden or truncated?
6. Check: touch targets large enough on mobile?
## Screenshot Review: {filename or URL}
**Viewport**: {desktop/tablet/mobile/unknown}
**Overall**: {Polished | Minor Issues | Needs Work | Major Problems}
### Visual Design
**Spacing**: {✓ Balanced | ⚠ Inconsistent | ✗ Cramped/Sparse}
- {finding}
**Color**: {✓ Cohesive | ⚠ Minor issues | ✗ Inconsistent}
- {finding}
**Typography**: {✓ Clear hierarchy | ⚠ Minor issues | ✗ Unclear}
- {finding}
**Components**: {✓ Consistent | ⚠ Variations | ✗ Inconsistent}
- {finding}
### Issues Found
#### Critical
- {issue visible in screenshot, with description of location}
#### Minor
- {polish item}
### Comparison with Reference {if provided}
- Spacing: {matches/off by approximately X}
- Color: {matches/discrepancy}
- Missing: {elements in spec not in implementation}
- Added: {elements in implementation not in spec}
### Recommendations
1. {highest priority fix}
2. {second fix}
imagery/review skill