visual-design

Visual design system toolkit with UX/usability expert review. Consultant skill for establishing design systems via interview or site extraction with page discovery, parallel fingerprinting, fluid responsive detection, and custom component motion discovery; codebase reverse-engineering mode derives tokens and component specs from the repo with chrome-devtools-mcp route inspection (spec at docs/design-system/codebase-reverse-spec-*.md, section-by-section approval, per-file delete confirmation). Component-context skill plus opus component-context agent: minimal one spec + motion when exact or high-confidence fuzzy; auto top-3 specs + synthesis + motion when ambiguous; gap inference otherwise. Design-reviewer skill and agent for live visual quality gate testing via chrome-devtools-mcp — includes Nielsen's 10 Usability Heuristics framework with UX scoring (0-100), diff mode for follow-up reviews, consultant synergy (review-checklist.md), functional/behavior-change escalation tags on fix suggestions, and Categories A-F split into phase files. Fully report-only with categorized fix suggestions. Uses opus agent with haiku sub-agent for cost-efficient mechanical inspection dispatch. Update-component-index skill for regenerating the component compendium index.