frontend-visual-qa

# Frontend Visual QA ## Purpose Verify a rendered frontend implementation against a `Design Implementation Spec`, Design Direction Contract, and supplied visual references when the task needs browser-rendered visual evidence. This skill is not a general style-inspection tool. It exists for screenshot comparison, responsive rendering, visual regression evidence, visible state verification, and bounded repair loops when the implementation task includes fixes. ## When To Use - After implementation when visual acceptance requires comparing the rendered page with supplied screenshots or visual references. - When the user asks to run visual QA, capture desktop/mobile screenshots, or compare rendered output to a design reference. - When the issue is visibly rendered: responsive layout, wrapping, overflow, clipping, occlusion, viewport fit, visible interaction states, or screenshot-backed visual regression. - When console or runtime errors must be checked because they affect the rendered UI during visual QA. - When a loop contract says to repair material visual deviations and rerun rendered evidence. ## When Not To Use - Documentation-only, skill-only, backend-only, or static code review tasks. - Design intake before implementation. Use `design-screenshot-spec`. - Live Figma inspection or Figma MCP workflows. - Font-family, font-size, font-weight, line-height, color, spacing, CSS variable, or token checks when values can be read from source files, copied inspect values, or the...