Use browser capture, DOM/style probes, source inspection, and automatic target edits.
Use browser capture, DOM/style probes, source inspection, and automatic target edits. Audit before the first edit. Preserve target logic.
Measure and capture both. Produce a defect ledger and implementation-level CSS/component guidance. Do not claim to have changed code.
Start the apps using their existing documented commands. Avoid introducing a new build system. Freeze route, viewport, theme, data, locale, and feature flags before capture.
Compare primitives first. Build a component state matrix, then move to compound components and full pages. Prefer identical story fixtures.
Use the image as visual evidence. Measure image-space geometry when helpful, but label it as image-derived rather than DOM-measured. Inspect the target live when possible. Mark hidden/interactive reference states UNMEASURED.
Produce:
Do not invent CSS values, breakpoints, focus states, hover states, DOM structure, or data behavior.
Compare exact values first. Group recurring differences by shared ancestor/token/component. Treat values as evidence, but still verify rendered screenshots where possible because different fonts/renderers can produce visual differences from similar computed CSS.
Record data-dependent areas as UNMEASURED. Do not redesign the target around an error state that may not represent the reference's populated rendering. Build deterministic fixture hooks while waiting for a trustworthy reference payload.