>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3588757. --> Reported by: [ajv009](https://www.drupal.org/user/3653917) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The site-analyzer captures element-bounded screenshots without first scrolling target elements into view. On any modern site using <code>IntersectionObserver</code>-based lazy loading (Squarespace, WordPress, Webflow, most modern CMSes) the below-fold content has not rendered yet, so the resulting screenshot is a blank solid-color rectangle.</p> <p>In a recorded session, three of five component screenshots captured at 1440px were completely blank: <code>cta-section/screenshot-1440.png</code> (1,846 bytes &mdash; solid navy), <code>site-footer/screenshot-1440.png</code> (2,362 bytes &mdash; solid navy). Only <code>site-header/screenshot-1440.png</code> (14,343 bytes) rendered correctly. Two of the three blanks were also obscured by the cookie banner (1-01), making the combined corruption rate for reference material very high. The 375px <code>blog-grid</code> screenshot was "90% grey" &mdash; the top 10% had content but element height extended far below rendered content.</p> <p>Component-builder agents received these blank/grey files as their primary visual references and had to compensate with DOM inspection alone &mdash; a known quality gap. The fix was applied ad-hoc in a later session via Storybook QA re-render, but the site-analyzer agent definition was never updated, so the next fresh migration run will repeat the same blanks.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Run the migrate-site skill against any site with lazy-loaded below-fold content.</li> <li>Inspect <code>docs/migration/components/&lt;below-fold-section&gt;/screenshot-1440.png</code> file sizes.</li> <li>Observe: files for below-fold sections are typically &lt; 5KB and visually blank/solid-colored.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Add an ELEMENT SCREENSHOT PROTOCOL block to <code>.claude/agents/site-analyzer.md</code> after the cookie-dismiss preflight (1-01) and before any capture:</p> <pre>ELEMENT SCREENSHOT PROTOCOL: Before capturing any element-bounded screenshot: 1. Scroll element into viewport center: agent-browser eval "el.scrollIntoView({block:'center'})" 2. Wait for networkidle + 500ms: agent-browser wait --load networkidle 3. Capture screenshot 4. CHECK FILE SIZE: if &lt; 5KB, retry once with 1500ms wait 5. If still blank after retry, fall back to full-page screenshot and crop to element bounds 6. Log blank-capture warnings to plan.md: "BLANK_SCREENSHOT: &lt;section&gt; at &lt;viewport&gt;"</pre><p>The 5KB threshold is the diagnostic signal &mdash; the failing captures (1,846 and 2,362 bytes) both fall under it, while the correctly-captured header (14,343 bytes) does not.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Add the ELEMENT SCREENSHOT PROTOCOL block to <code>.claude/agents/site-analyzer.md</code>.</li> <li>If <code>.claude/skills/bundle-capture/SKILL.md</code> exists as a separate file, add the same file-size check and scroll-into-view instruction.</li> <li>If <code>scripts/capture-component-bundle.mjs</code> calls the screenshot API directly, add <code>element.scrollIntoView({block: 'center'})</code> + 500ms wait + file-size validation in the script too.</li> <li>Verify all generated <code>screenshot-1440.png</code> files are &gt; 5KB after a fresh run.</li> <li>Verify on a site with no lazy loading: scroll-into-view step does not introduce delay or error.</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>None.</p> <h3 id="summary-api-changes">API changes</h3> <p>None.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>New optional warning lines in <code>plan.md</code>: <code>BLANK_SCREENSHOT: &lt;section&gt; at &lt;viewport&gt;</code>.</p> <h3 id="summary-internal-references">Internal references</h3> <ul> <li>Source markdown: <code>RESEARCH-2026-04-28/99-final/ISSUES/Sprint-1-Foundations/02-P0-2-blank-screenshots-lazy-loading.md</code> (id: P0-2)</li> <li>Deep analysis: <code>RESEARCH-2026-04-28/00-existing-issues/prior-deep-analysis-key-points.md</code> (HIGH finding on blank screenshots &mdash; exact filenames and sizes)</li> <li>Workaround evidence: <code>RESEARCH-2026-04-28/06-jamie-demo-old/95q5i-77cf5bb9-half2/what-was-fixed-in-second-session.md</code> (ADDRESSED VIA STORYBOOK QA &mdash; agent definition not updated)</li> <li>Recommended verbatim text: <code>RESEARCH-2026-04-28/99-final/migrate-site-skill-recommendations.md</code> (<code>.claude/agents/site-analyzer.md</code> &mdash; ELEMENT SCREENSHOT PROTOCOL)</li> <li>Downstream impact: <code>RESEARCH-2026-04-28/06-jamie-demo-old/95q5i-77cf5bb9-half1/findings.md</code> (F6)</li> <li>Pattern: <code>RESEARCH-2026-04-28/07-cross-cutting/patterns.md</code> &sect; A1</li> <li>Anti-pattern: <code>RESEARCH-2026-04-28/07-cross-cutting/session-anti-patterns.md</code> &sect; AP1 (Retry Storm)</li> </ul> <h3 id="summary-open-questions">Open questions</h3> <ul> <li>Verify that <code>agent-browser eval</code> supports arbitrary JS like <code>el.scrollIntoView({block:'center'})</code> or whether a different syntax is needed.</li> <li>Does <code>scripts/capture-component-bundle.mjs</code> call the screenshot API directly or delegate to <code>agent-browser</code>? If direct, the <code>scrollIntoView</code> call must be in the script too, not just agent instructions.</li> </ul>