Original Theme Verification

For a requested theme queue, preserve its reported order and audit one theme at a time. Within each theme, verify browser branding and favicon first, then the header, hero, every subsequent section in page order, and finally the footer. Finish each section's applicable verification matrix before advancing; explicitly report blocked sections as unverified.

When the user instructs skipping themes that cannot be continued, resolve problems within the available access and authorized scope first. Skip only when a reference, required resource, repair connection, or other necessary dependency remains unavailable. Record the actual blocker and checks performed without marking the theme verified or complete. Solvable visual discrepancies and runtime errors remain findings to correct.

When reproducing an existing theme in a site or theme, verify every section from top to bottom and every element within it against the exact original version. Verification is a matrix: every element or section multiplied by every property below, every applicable interaction state, and every applicable responsive or contextual variant. Do not treat a matching default desktop screenshot as completion.

Reference conditions: record the original URL or source version, page, browser and version, operating system, viewport width and height, zoom, device pixel ratio, locale, content, scroll position, motion preferences, document visibility, and state. Bring each page to the foreground before exercising interactions or measuring motion, and confirm that scroll events, animation frames, and state updates have run; background-tab throttling is not evidence of the original behavior. When using operating-system pointer input, verify native window dimensions, viewport overrides, browser chrome offsets and the actual pointer coordinates before accepting a cursor comparison. Wait for foreground animation frames after pointer movement and scrolling; timer delays alone do not establish that browser hit testing or cursor rendering has updated. Compare under the same conditions with the original fonts, images, and styles fully loaded. If the reference or an asset cannot be inspected, mark that check unverified and report it; never infer an exact match.

For each element and section, check all of the following:

1. Geometry: margin and padding on every side, width and height, minimum and maximum dimensions, aspect ratio, box sizing, borders and border radius, container and site-wide width, grid and flex layout, gaps and gutters, alignment, positioning, offsets, stacking order, overflow, clipping, and the distance to adjacent elements.

2. Surface and color: background colors, images and gradients, foreground and text colors, opacity and transparency, overlays, border colors, shadows including offset, blur, spread, inset and opacity, and the colors of descendants and pseudo-elements.

3. Typography: the actual loaded font family, weight and style, font size, line height, letter and word spacing, alignment, capitalization, decoration, wrapping, truncation, and text baseline. Check selected text and its selection background, foreground and contrast separately from ordinary text and from the current navigation item.

4. Media and icons: the correct image, logo or icon, intrinsic and rendered dimensions, crop, aspect ratio, object fit and position, resolution, SVG view box, visible glyph bounds, stroke width, caps and joins, miter limits, dash patterns and offsets, fill rules, vector effects, fill, color, rotation, baseline and placement. An icon box matching in size does not prove that its visible shape matches. Preserve the required dynamic media and font infrastructure and reusable SVG components.

5. Motion: animation and transition properties, duration, delay, easing, direction, travel distance, transforms, start and end states, opening and closing behavior, slide interval, autoplay, pause and resume behavior, and reduced-motion variants. Inspect intermediate frames and interactions during motion; endpoint screenshots alone cannot verify animation. Measure input-to-visible-state latency for first and repeated interactions, including cold or lazy-loaded handlers; matching normalized animation timelines does not verify response latency. Wait for the intended state and paused animations to become ready before comparing controlled frames, and record any normalization separately from real input timing.

6. Interaction geometry and behavior: click and touch targets, pointer movement from parent items into submenus including pauses and diagonal movement across gaps, hover retention, opening and closing triggers, keyboard focus and activation, focus order, scrolling, sticky and fixed behavior, and overflow while overlays, menus or sliders are active.

7. Scrollbars: vertical and horizontal visibility, width and height, track and thumb colors, shape and radius, hover and active appearance, corner appearance, scroll position, reserved gutter and resulting layout shifts. Check both page and nested scrolling regions.

8. Browser branding: favicon and supported icon variants, the actual icon displayed in the browser tab, document title, logo identity, dimensions and aspect ratio, and light or dark variants when the original provides them. Verify resource loading, browser icon selection, and the rendered result, not just the presence of an icon link.

9. Cursor: compare the actual computed cursor and visible pointer over every element, its descendants, pseudo-elements, and the entire interaction target, including buttons, links, carousel next and previous controls, draggable areas, and disabled controls. Check inherited cursors, custom cursor assets and hotspots, and cursor changes during hover, focus, pressing, dragging, loading, and disabled states. Verify the cursor remains correct while moving between the control background, text, and icon; do not infer it from click behavior or the HTML element type. Apply the same dynamic asset policy to custom cursor images.

10. Accessible interaction contract: compare exposed roles, names, control relationships, focusability, focus order, and expanded, selected, checked, pressed, disabled or validation states in the browser accessibility tree. Verify state changes during opening and closing motion as well as at the endpoints. Referenced controls must exist and identify the intended content. Equivalent atomic composition may use different DOM structures and generated identifiers while preserving the original accessible behavior.

Apply the entire property checklist in each applicable state: default, hover, focus, focus-visible, focus-within, active or pressed, current navigation item, selected or checked, expanded and collapsed, open and closed, enabled and disabled, visited, loading, empty, error and validation states. Include text selection and combinations of states; checking the color of a link wrapper does not verify the visible child text.

Apply the entire property and state matrix in each variant supported by the original: mobile, tablet, desktop, XL and larger screens; immediately below, at and above every relevant breakpoint, including fractional CSS viewport widths produced by native zoom or window resizing and any gaps between inclusive and exclusive breakpoint rules; portrait and landscape; supported zoom and pixel densities; light and dark appearances; locales and text directions; short, long and missing content; mouse, keyboard and touch input; and initial, scrolled, sticky and fixed positions. Check section-specific variants and initial, intermediate and final animation states. Explicitly identify inapplicable checks instead of silently skipping them.

Verification evidence: compare screenshots, rendered bounding boxes and computed styles for the actual visible elements, their descendants and pseudo-elements. Use the original CSS and asset geometry to resolve differences, and exercise the real interactions. Verify the browser applied the intended properties after server rendering and hydration; source attribute or prop spelling alone is not evidence. Confirm rendered markup and runtime resource versions correspond to the revision under test; discard evidence from stale cached HTML or bundles. Confirm audit captures and pointer targets are not covered by development controls or other unintended overlays. Declare any unavoidable rendering tolerance before accepting it; do not dismiss a few pixels when they alter alignment, appearance or pointer access. Fix each discrepancy, repeat its affected property, state and variant checks, and verify the published page with its real runtime resources. Mark a section complete only when its applicable matrix passes; record remaining mismatches and unverified checks explicitly.

Keep a durable per-theme verification record with the reference conditions, section inventory, checks performed, evidence locations, discrepancies, fixes, and unverified or inapplicable checks. Report each theme separately. A theme state of homePageCompleted requires explicit user approval; an audit, implementation fix, successful build, or publication does not authorize that state change.

Fix

Build the element-by-property-by-state-by-variant checklist from the original, compare each cell with evidence, correct the responsible styles or shared behavior, and recheck the affected cells locally and after publication before reporting completion.