mikeparcewski/wicked-garden-product-screenshot
skills/product/screenshot/SKILL.md
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: reviewing a UI screenshot for visual design, comparing rendered output against design system rules, or auditing layout from an image file.
$ install --global
skillsauthnpx skillsauth add mikeparcewski/wicked-garden wicked-garden-product-screenshotInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 13, 2026, 8:06 AM333.6s1 file scanned
SKILL.md
- name:
- wicked-garden-product-screenshot
- description:
- |
- Use when:
- reviewing a UI screenshot for visual design, comparing rendered
- portability:
- portable
- phase_relevance:
- ["clarify", "design", "review"]
- archetype_relevance:
- ["*"]
Screenshot Skill
Analyze UI design directly from screenshot images using Claude's multimodal vision capabilities. No code needed — review what users actually see.
How to Use Read on Images
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.
What to Analyze
Layout and Spacing
- Is whitespace consistent and intentional?
- Do elements align to a visible grid?
- Are margins/padding proportional and balanced?
- Is content grouped logically (proximity principle)?
- Does the layout breathe, or feel cramped?
Color and Contrast
- Is the color palette cohesive (limited, intentional palette)?
- Do text and background combinations have sufficient contrast?
- Are colors used semantically (red for errors, green for success)?
- Is there visual hierarchy through color weight?
Typography
- Is there a clear heading hierarchy (H1 > H2 > body)?
- Are font sizes proportional and readable?
- Is line spacing comfortable (not too tight or loose)?
- Consistent font family usage — not too many typefaces?
Component Consistency
- Do similar elements look the same (all buttons styled identically)?
- Are interactive elements visually distinguishable from static ones?
- Are states (active, selected) visually distinct?
Responsiveness Clues
- Does the layout look designed for this viewport size?
- Are there elements that appear truncated or overflowing?
- Would this layout adapt to mobile without breaking?
Comparison with Reference Designs
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:
- Spacing fidelity (does built match spec proportions?)
- Color accuracy (same palette?)
- Typography match (weights, sizes, hierarchy)
- Component faithfulness (icons, buttons, inputs)
- Missing or added elements
Screenshot Capture
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.
Multi-View 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?
Output Format
## 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}
Integration
- visual-review skill: Use for code-based analysis; screenshot for image-based
- accessibility skill: Color contrast visible in screenshots
- mockup skill: Screenshots of implementations vs mockup specs
- Browser automation: Capture screenshots from live URLs via Playwright, Puppeteer, or an MCP browser tool if available
- imagery/review skill: For AI-powered visual analysis of screenshots, see the
imagery/reviewskill
Related Skills
mikeparcewski/wicked-garden-engineering-conformance-reviewer
development
VerifiedTrustedCommunity
Pattern-conformance agent-half: evaluates a produced artifact or diff against a set of architectural/design pattern rules from the conformance-rule store (wicked_governance schema). Returns structured findings with rule ID, severity, and rationale — the deterministic half (mechanical rule recall) is done by the guard pipeline; this is the semantic evaluation step. Triggered by: the guard_pipeline `outgov_pattern` check (session-close), or explicitly by an engineering review when WICKED_OUTGOV_RULES_DIR is populated. NOT a replacement for the full `engineering` review skill — focuses only on conformance to stored Pattern rules; architecture and code-quality checks live in the `engineering` skill. Semantic evaluation reuses `wicked-garden-qe-semantic-reviewer` as the designated agent-half evaluator (per garden#983 spec). This skill is the orchestrating wrapper that loads applicable Pattern rules and delegates the per-rule semantic judgment to qe-semantic-reviewer.
8SKILL.mdUpdated Jul 22, 2026
mikeparcewski/wicked-garden-domain
tools
VerifiedTrustedCommunity
The FOUNDATIONAL domain-model capability: extract a codebase's domain — testable business rules (with confidence + provenance), entities, requirements — as a schema-conformant model on the estate graph. The workers annotate the store; wicked-core reads it and builds the requirements graph, coverage-gating fail-closed. Steers three fork workers. A shared substrate, not a modernization tool. The `modernize` archetype DERIVES from it; build / migrate / review / specify / explore consume the SAME domain model — none OWN it. Understanding a codebase's domain is upstream of almost everything else garden does. Use when: "extract the business rules / domain model from this codebase", "build a requirements graph from the code", "what does this system actually require", "reverse-engineer the domain before we build/port/migrate". Works on ANY codebase (modern or legacy) — the value is the domain model, not the porting. NOT the code transform itself (that is the archetype consuming this model). This skill produces the DOMAIN MODEL, not new code.
8SKILL.mdUpdated Jul 15, 2026
mikeparcewski/wicked-garden-domain-modeler
development
VerifiedTrustedCommunity
Domain-graph fork worker for the modernize archetype. Groups the estate's Louvain communities into business domains, attaches each requirement to its cluster (advisory cluster_id provenance), and invokes wicked-core's domain-graph build (which reads the annotated estate store, recomputes coverage fail-closed, and builds the requirements graph) — then validates core's output against the vendored schema. Use when: dispatched by wicked-garden-domain after rule extraction to turn a flat rule set into cluster-keyed domains; "group these into domains", "build the requirements graph", "translate clusters into a domain model". NOT for mining the rules themselves (that is domain-extractor) or threat-modeling (that is domain-coverage).
8SKILL.mdUpdated Jul 15, 2026
mikeparcewski/wicked-garden-domain-extractor
tools
VerifiedTrustedCommunity
Rule-extraction fork worker for the FOUNDATIONAL domain-model capability. Mines testable business rules from a codebase — each with a numeric confidence and a provenance{source, ref, source_kinds} — and annotates them into the estate store so wicked-core can build the domain-model requirements graph (coverage-gated). This is a substrate, not a modernization tool: the `modernize` archetype DERIVES from it, and build / migrate / review / specify / explore can consume the same domain model — none OWN it. Use when: dispatched by wicked-garden-domain to mine the business_rules of a codebase (or a module); "extract the domain rules", "what does this system require", building the requirements half of a domain model. NOT for grouping into domains (that is domain-modeler) or judging coverage (that is domain-coverage — a seat-distinct evaluator).
8SKILL.mdUpdated Jul 15, 2026