From wicked-garden
Visual design and UI consistency review — design system adherence, spacing tokens, typography, color usage, component patterns, and responsive polish. Use when: "design critique", "polish the UI", "design system adherence", "responsive design", "visual polish", "review the design", "UI inconsistency"
npx claudepluginhub mikeparcewski/wicked-garden --plugin wicked-gardenThis skill uses the workspace's default tool permissions.
Deep visual design and UI implementation review.
refs/common-issues-animation-issues.mdrefs/common-issues-color-issues.mdrefs/common-issues-component-issues.mdrefs/design-systems-components.mdrefs/design-systems-governance.mdrefs/design-systems-tokens.mdrefs/quick-wins-1-5.mdrefs/quick-wins-6-10.mdrefs/quick-wins-workflow.mdrefs/report-template-actions.mdrefs/report-template-findings.mdrefs/responsive-guide-mobile-first-philosophy.mdrefs/responsive-guide-responsive-tables.mdrefs/responsive-guide-responsive-typography.mdrefs/review-criteria-accessibility.mdrefs/review-criteria-components.mdrefs/review-criteria-visual.mdrefs/scoring-guide-examples.mdrefs/scoring-guide-methodology.mdProvides 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.
Deep visual design and UI implementation review.
Visual Consistency:
Component Patterns:
Responsive Design:
Visual Polish:
Full review criteria: See Visual Consistency, Components & Responsive, and Accessibility & Scoring
# Scan for components
sh "${CLAUDE_PLUGIN_ROOT}/scripts/_python.sh" "${CLAUDE_PLUGIN_ROOT}/scripts/product/component-inventory.py" src/
# Find patterns
wicked-garden:search "className=" --type jsx
wicked-garden:search "styled\." --type ts
# Find hardcoded colors (violations)
wicked-garden:search "#[0-9a-fA-F]{3,6}" --type css
# Find magic number spacing
wicked-garden:search "[0-9]+px" --type css
| Category | Score | Notes |
|---|---|---|
| Colors | {✓⚠✗} | {brief note} |
| Typography | {✓⚠✗} | {brief note} |
| Spacing | {✓⚠✗} | {brief note} |
| Components | {✓⚠✗} | {brief note} |
| Responsive | {✓⚠✗} | {brief note} |
Scoring guide: See refs/scoring-guide-methodology.md and refs/scoring-guide-examples.md
❌ Hardcoded colors: `color: #3b82f6` vs `color: var(--primary)`
❌ Magic numbers: `margin: 17px` vs `margin: var(--space-4)`
❌ Missing states: No `:hover` or `:focus` styles
❌ Non-responsive: Fixed widths without media queries
❌ Component duplication: Multiple similar button implementations
❌ Inaccessible contrast: Light gray on white
Fix examples: See Color Issues, Component Issues, Animation Issues
## Design Review
**Consistency**: {✓ Ship it | ⚠ Minor issues | ✗ Needs work}
### Component Inventory
- Buttons: {count}
- Inputs: {count}
- Cards: {count}
### Issues
#### Critical
- {Issue breaking design}
- Location: {file:line}
- Fix: {code change}
#### Major
- {Inconsistency}
- Location: {file:line}
- Recommendation: {improvement}
### Recommendations
1. {High-priority fix}
2. {Design system improvement}
Full report template: See refs/report-template-findings.md and refs/report-template-actions.md
If project has a design system:
If no design system:
Design system guide: See Tokens & Foundations, Components, Governance
Fast improvements with high impact:
Implementation guide: See Quick Wins 1-5, Quick Wins 6-10, and Workflow & Planning
Tools:
# Screenshots: Use the Read tool on a screenshot file, or capture via browser automation if available.
# Color contrast
sh "${CLAUDE_PLUGIN_ROOT}/scripts/_python.sh" "${CLAUDE_PLUGIN_ROOT}/scripts/product/contrast-check.py" "#666" "#fff"
# Track design debt via native TaskCreate
# TaskCreate(
# subject="UI: {issue}",
# metadata={
# "event_type": "task",
# "chain_id": "design-review.root",
# "source_agent": "design-review",
# "priority": "P2"
# }
# )
Collaboration:
Detailed guides in refs/: