How does the Viewport Exposure Map track elements?

It uses the browser's native IntersectionObserver API to monitor when elements enter or leave the viewport, calculating cumulative exposure time in milliseconds during a controlled scroll.

What counts as a 'never-seen' element?

Any element that never intersected with the viewport during the scroll session is flagged. This often indicates the element is placed too deep, is hidden by an overlay, or failed to render.

Can I see the results visually?

Absolutely. The skill includes an optional step to inject a CSS-based heatmap overlay (color-coded from Red to Green) and can trigger a full-page screenshot to document the findings.

Does this require a specific browser environment?

It works with any modern browser supported by your Playwright MCP server, as it relies on standard web APIs like IntersectionObserver and performance.now().

Does it work with lazy-loaded images and content?

Yes, it tracks elements as they are added to the DOM and become visible. However, elements that never trigger a load or remain hidden by CSS will be marked as never seen.

Viewport Exposure Map

Name: Viewport Exposure Map
Author: anouar1991

byanouar1991

•

Analytics & Monitoring

Generates visual heatmaps and detailed visibility reports by tracking how long website elements remain in the viewport during a scroll session.

The Viewport Exposure Map skill empowers developers and marketers to audit web layouts by measuring real-time element visibility. By injecting an IntersectionObserver and executing an automated smooth-scroll sequence, it captures precise data on which call-to-action (CTA) buttons, images, and content blocks are actually seen by users. It identifies visual 'dead zones,' validates 'above-the-fold' content, and provides a color-coded heatmap overlay to visualize engagement bottlenecks, making it an essential tool for conversion rate optimization (CRO) and front-end QA.

Key Features

01Automated smooth-scroll simulation for consistent visibility data collection.

02Real-time tracking of element exposure duration using IntersectionObserver.

03Detailed data harvesting including max intersection ratios and visibility thresholds.

041 GitHub stars

05Identification of never-seen CTAs and low-exposure critical content.

06Visual heatmap overlay generation directly on the target webpage.

Use Cases

01Debugging lazy-loading issues or layout shifts that hide content from users.

02Auditing landing page effectiveness to ensure key CTAs receive adequate viewport time.

03Performing A/B test validation for content visibility between different page versions.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude viewport-exposure-map

For use in Claude.ai and ChatGPT

Download Skill