From wicked-garden
Systematic visual design analysis for UI consistency, design system adherence, spacing, typography, color, and component patterns. Use when: "visual checklist", "score the UI", "spacing audit", "typography check", "color palette review", "component pattern audit", "evidence-based design review"
npx claudepluginhub mikeparcewski/wicked-garden --plugin wicked-gardenThis skill uses the workspace's default tool permissions.
Systematic, evidence-based visual design analysis. Complements `product/design-review`
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.
Systematic, evidence-based visual design analysis. Complements product/design-review
(which focuses on critique) by providing structured checklists and scoring.
| Category | Check | Result |
|---|---|---|
| Spacing | 4/8px grid used | ✓ / ⚠ / ✗ |
| Spacing | No magic number values | ✓ / ⚠ / ✗ |
| Typography | Heading levels sequential | ✓ / ⚠ / ✗ |
| Typography | Font stack from tokens | ✓ / ⚠ / ✗ |
| Color | No hardcoded hex | ✓ / ⚠ / ✗ |
| Color | Semantic tokens used | ✓ / ⚠ / ✗ |
| Components | States defined | ✓ / ⚠ / ✗ |
| Components | No duplicates | ✓ / ⚠ / ✗ |
| Responsive | Mobile-first media queries | ✓ / ⚠ / ✗ |
| Responsive | Touch targets sized | ✓ / ⚠ / ✗ |
Spacing violations:
margin: 17px → margin: var(--space-4)
padding: 12px 20px → padding: var(--space-3) var(--space-5)
Color violations:
color: #3b82f6 → color: var(--color-primary)
background: #f9fafb → background: var(--color-surface)
Typography violations:
font-size: 13px → font-size: var(--text-sm)
font-weight: 600 → font-weight: var(--font-semibold)
| Score | Meaning |
|---|---|
| 5 — Ship it | All tokens used, consistent patterns, no violations |
| 4 — Minor polish | 1–3 minor violations, no systematic issues |
| 3 — Needs work | Inconsistent token usage, some components non-conforming |
| 2 — Significant issues | Systematic violations across multiple categories |
| 1 — Redesign needed | No design system adherence, inconsistent throughout |
## Visual Review: {target}
**Score**: {1–5}
**Verdict**: {Ship it | Minor polish | Needs work | Significant issues | Redesign}
### Findings by Category
#### Spacing
- {finding with file:line and fix}
#### Typography
- {finding with file:line and fix}
#### Color
- {finding with file:line and fix}
#### Components
- {finding with file:line and fix}
#### Responsive
- {finding with file:line and fix}
### Top 3 Fixes
1. {highest impact fix}
2. {second fix}
3. {third fix}
wicked-garden:search "#[0-9a-fA-F]{3,6}" finds hardcoded colorsimagery/review skill