Visual Polish QA
Principle
Inspect affected rendered output after implementation. Fix observed weaknesses within authorization and recheck affected behavior; stop when acceptance is met. An analysis-only review reports findings without edits.
Required Loop
- Start or locate the dev server when the project needs one.
- Open the site in a browser or capture screenshots when tooling is available.
- Check the accepted target viewports; route a systematic breakpoint problem to
responsive-visual-polish-qa.
- Inspect hero, navigation, major sections, interactive states, forms, media, and footer.
- Fix obvious visual defects and weak polish.
- Run relevant required checks; repeat or broaden only after changes, failures or an unresolved risk.
- Report what was checked and what could not be checked.
What To Look For
- Text overflow, awkward line breaks, cramped labels, clipped buttons.
- Elements overlapping or drifting outside their intended layout.
- Hero media that is too dark, blurry, cropped, generic, or disconnected from the subject.
- Repetitive card grids and generic spacing.
- Typography that lacks hierarchy or scale discipline.
- Weak button states, missing focus styles, inert hover states.
- Motion that is too fast, too busy, inaccessible, or unrelated to hierarchy.
- Mobile layouts that simply stack without composition.
- Desktop layouts that stretch content too wide.
- Forms that look unstyled or have poor error/empty/loading states.
Fix Biases
- Prefer fewer, stronger visual moves.
- Tighten spacing before adding decoration.
- Improve copy specificity before adding sections.
- Use real media, generated bitmap imagery, or purposeful 3D when visuals matter.
- Make controls clear with icons and labels where appropriate.
- Preserve accessibility while polishing motion and visual style.
Verification
Use Playwright, browser tools, screenshots, or the in-app browser when available. For canvas/WebGL/Three.js work, verify that the canvas is nonblank, framed correctly, and active across desktop and mobile.
Read references/polish-checklist.md for the detailed pass.
Scope and evidence
Inspect affected visual finish using relevant viewports and states from the shared evidence matrix. A four-viewport matrix is a useful broad-review starting point, not mandatory for every local edit. Route breakpoint defects to $responsive-visual-polish-qa.
1---2name: visual-polish-qa3description: Refine rendered finish at accepted viewports.4---56# Visual Polish QA78## Principle910Inspect affected rendered output after implementation. Fix observed weaknesses within authorization and recheck affected behavior; stop when acceptance is met. An analysis-only review reports findings without edits.1112## Required Loop13141. Start or locate the dev server when the project needs one.152. Open the site in a browser or capture screenshots when tooling is available.163. Check the accepted target viewports; route a systematic breakpoint problem to `responsive-visual-polish-qa`.174. Inspect hero, navigation, major sections, interactive states, forms, media, and footer.185. Fix obvious visual defects and weak polish.196. Run relevant required checks; repeat or broaden only after changes, failures or an unresolved risk.207. Report what was checked and what could not be checked.2122## What To Look For2324- Text overflow, awkward line breaks, cramped labels, clipped buttons.25- Elements overlapping or drifting outside their intended layout.26- Hero media that is too dark, blurry, cropped, generic, or disconnected from the subject.27- Repetitive card grids and generic spacing.28- Typography that lacks hierarchy or scale discipline.29- Weak button states, missing focus styles, inert hover states.30- Motion that is too fast, too busy, inaccessible, or unrelated to hierarchy.31- Mobile layouts that simply stack without composition.32- Desktop layouts that stretch content too wide.33- Forms that look unstyled or have poor error/empty/loading states.3435## Fix Biases3637- Prefer fewer, stronger visual moves.38- Tighten spacing before adding decoration.39- Improve copy specificity before adding sections.40- Use real media, generated bitmap imagery, or purposeful 3D when visuals matter.41- Make controls clear with icons and labels where appropriate.42- Preserve accessibility while polishing motion and visual style.4344## Verification4546Use Playwright, browser tools, screenshots, or the in-app browser when available. For canvas/WebGL/Three.js work, verify that the canvas is nonblank, framed correctly, and active across desktop and mobile.4748Read `references/polish-checklist.md` for the detailed pass.4950## Scope and evidence5152Inspect affected visual finish using relevant viewports and states from the shared evidence matrix. A four-viewport matrix is a useful broad-review starting point, not mandatory for every local edit. Route breakpoint defects to `$responsive-visual-polish-qa`.
TheGoat395