mikeparcewski/visual-review
skills/product/visual-review/SKILL.md
Use when auditing visual design for consistency — design system adherence, spacing tokens, typography scale, color palette, component patterns, and responsive polish. Structured checklist + scoring. NOT for UX flows or user research (use ux-review) or accessibility code audits (use product/accessibility).
$ install --global
skillsauthnpx skillsauth add mikeparcewski/wicked-garden visual-reviewInstall 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: May 8, 2026, 5:55 AM183.3s1 file scanned
SKILL.md
- name:
- visual-review
- description:
- |
- portability:
- portable
- phase_relevance:
- ["clarify", "design", "review"]
- archetype_relevance:
- ["*"]
Visual Review Skill
Systematic, evidence-based visual design analysis. Provides structured checklists and scoring.
What This Evaluates
Spacing and Alignment
- Grid system adherence (4px/8px grid)
- Consistent padding/margin within and between components
- Alignment: elements on a shared baseline or grid column
- Gutters and whitespace proportions
Typography Hierarchy
- Type scale (heading levels, body, caption, label)
- Font weight usage (bold for emphasis, not decoration)
- Line height and letter spacing consistency
- Responsive type scaling
Color Consistency
- All colors sourced from design tokens or CSS variables
- No hardcoded hex values outside token definitions
- Semantic color usage (error = red, success = green, etc.)
- Dark mode / theme variant coverage
Component Patterns
- Reuse of existing components before creating new ones
- Consistent state handling: default, hover, focus, active, disabled, error
- Variant naming follows design system conventions
- No one-off component duplications
Responsive Layout
- Mobile-first breakpoint structure
- No fixed widths that break at narrow viewports
- Touch targets ≥44×44px
- Images and media have max-width constraints
Review Checklist
| 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 | ✓ / ⚠ / ✗ |
Common Violations
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)
Scoring
| 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 |
Output Format
## 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}
Integration
- screenshot skill: Capture visuals for before/after comparison
- accessibility skill: Color contrast overlaps with a11y
- product/ux-review: For UX flows, user research, and usability evaluation
- wicked-garden:search:
wicked-garden:search "#[0-9a-fA-F]{3,6}"finds hardcoded colors - imagery/review skill: For comprehensive image analysis with quality gates (brand, accessibility, production, sensitivity), see the
imagery/reviewskill
Related Skills
mikeparcewski/skills/engineering/large-scale-migration
development
VerifiedTrustedCommunity
--- name: large-scale-migration description: How to execute a LARGE MECHANICAL change across any codebase with LEVERAGE instead of an agent-grind or hand-edits — a cross-cutting migration, refactor, rename, dialect/framework/DB port, library adoption, or bulk transform. The map→transform→gate pattern: a deterministic transform driven by a source-of-truth map, proven by a differential-equivalence gate. Use when the work is "migrate all X to Y", "rename Z everywhere", "port to a new DB/dialect/fra
8SKILL.mdUpdated Jun 3, 2026
mikeparcewski/wicked-garden:classify
testing
VerifiedTrustedCommunity
v11 LLM-based work-shape classifier. Replaces the regex archetype detector with the model's own reasoning. Reads the user's prompt, picks the right archetype(s) from the catalog, identifies signals (blast_radius, novelty, reversibility, etc.), and persists to SessionState so subsequent turns steer correctly. Use when: the prompt_submit hook emitted a `<wg classify-due />` directive, OR explicitly invoked at session start, OR when re-classifying after the user changes scope mid-session.
8SKILL.mdUpdated May 26, 2026
mikeparcewski/wicked-garden:archetype
tools
VerifiedTrustedCommunity
v11 work-shape archetype runner. When a prompt has been routed to one of the 9 archetypes (triage, explore, specify, decide, ship, review, incident, build, migrate), this skill is the entry point. It picks the right per-archetype playbook from refs/ and executes the phase shape declared in `.claude-plugin/archetypes.json`. Use when: a `<wg archetype="X">` or `<wg archetypes>` system-reminder tag appears, an explicit "let's run the X archetype" request, or when one of the per-archetype slash commands resolves to this skill.
8SKILL.mdUpdated May 8, 2026
mikeparcewski/intent
development
VerifiedTrustedCommunity
Show or set the session intent variable. Intent gates how loud the framework is — simple-edit (silent), feature/research (synthesis directive), rigor (full crew context). Auto-detected on turn 1; this skill overrides explicitly. Sticky for the session. Use when: "set intent", "intent override", "/wicked-garden:intent", "make the framework quiet", "force rigor", "what's my intent".
8SKILL.mdUpdated May 6, 2026