Iron rule: without real rendering evidence, you cannot declare a UI change complete.
Workflow
- Step 1: Development environment self-check ⚠️ REQUIRED
- 1.1 First confirm whether the target service is already started, to avoid starting the development server again.
- 1.2 Clarify the page to be visited, the component demo path, or the interaction entry point.
- Step 2: Perform browser verification ⚠️ REQUIRED
- 2.1 Check at least the default theme and dark mode.
- 2.2 Check mobile and desktop viewports when necessary.
- 2.3 Perform clicks, hovers, input, or state toggles for key interactions.
- Step 3: Keep evidence
- 3.1 Prefer screenshots, accessibility snapshots, or computed style values as evidence.
- 3.2 Record the conditions under which the problem occurs, rather than just saying "the style is wrong".
- Step 4: Regression conclusion
- 4.1 Clarify which scenarios pass and which still have problems.
- 4.2 If a regression is found, feed it back to the frontend implementation stage for handling.
Key checks
- light / dark mode.
- desktop / mobile layout.
- Key interaction states.
- Contrast, spacing, border radius, hierarchy, overflow, and disabled states.
Anti-patterns
- Not opening the page and declaring the UI is fine just by reading the code.
- Looking at only one screenshot without verifying interaction states.
- Not specifying the conditions under which the problem occurs and the viewport size.
Pre-delivery checklist
- Key scenarios have been verified on the real page.
- Screenshot, snapshot, or style value evidence has been kept.
- At least two themes or key viewports have been covered.
- The conclusion clearly states the passing items and remaining issues.