What problem does it solve? Visual defects like doubled seams, off-grid hairlines, inconsistent state treatments, and theme parity issues slip through code review because they only exist in rendered pixels. This Skill performs a rigorous visual QA pass over components, pages, or sweeps of several targets, judging the rendered output against design principles and fixing what has one right answer. ## Core Features & Use Cases - Rendered-pixel inspection: Captures every variant and state in both light and dark themes, magnifies joins, corners, dividers, and focus rings to find seam defects invisible at 1x. - Principle-based rubric: Judges arrangements against proximity, alignment, repetition, contrast, and spacing, plus component-scale craft checks for geometry, states, theme parity, and system fidelity. - Classified findings and fix loop: Labels each finding as Defect, Polish, or Direction, fixes defects and polish items at the source, re-renders before/after crops, and reports open taste calls with recommendations. - Use Case: After building a new React component in Storybook, run a design QA pass to catch a doubled border in its split variant, verify dark-mode parity, and compare it against sibling components before registration. ## Quick Start Ask the assistant to design QA the Button component and fix any visual defects it finds.
