skills.rest
anouar1991
anouar1991COMMUNITY
Explore all skills by this author →
GitHub

viewport-exposure-map

Track element visibility during full-page scrolls and generate exposure heatmaps.

1|Updated Jan 9, 2026
Search Tags:#analytics#usability#web-performance#viewport#exposure#heatmap#intersectionobserver
One-click install
npx skills add https://github.com/anouar1991/binaryPetsClaude --skill viewport-exposure-map
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: viewport-exposure-map
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/viewport-exposure-map
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill viewport-exposure-map

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Track how long each significant element stays visible in the viewport during a full scroll and generate an exposure heatmap to reveal which content users actually see.

Core Features & Use Cases

  • IntersectionObserver-based exposure tracking for key page elements.
  • Automated scroll simulation and heatmap overlay generation.
  • Use cases include auditing landing pages, optimizing CTAs, and comparing variants for visual attention.

Quick Start

Start exposure tracking on the loaded page and generate a heatmap report showing per-element exposure times.

Frequently Asked Questions about viewport-exposure-map

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I track element visibility and generate an exposure heatmap for a landing page?▼

You track element visibility by using the IntersectionObserver API to measure how long significant elements remain visible in the viewport during a full-page scroll, generating a quantitative exposure heatmap report for layout optimization.

What is viewport exposure tracking and how does it work for usability validation?▼

Viewport exposure tracking identifies how long each significant element remains visible in the browser viewport during a full-page scroll, computing per-element exposure metrics to validate CTA visibility and layout optimization.

Can I use this exposure tracking tool on authenticated pages requiring a login session?▼

Yes, exposure tracking works with authenticated sessions, as the tool requires a browser context that can access either a public page or an authenticated session to run the IntersectionObserver API and generate the heatmap.

What's the best way to measure CTA visibility during a full-page scroll?▼

The best way to measure CTA visibility is to run an automated scroll simulation that tracks element visibility with the IntersectionObserver API, producing a quantitative exposure heatmap that reveals exactly what users view on the page.

Does viewport exposure tracking work for comparing A/B testing variants?▼

Yes, viewport exposure tracking supports comparing A/B testing variants by generating quantitative exposure heatmaps for each version, revealing differences in visual attention and CTA visibility to inform layout optimization decisions.

Related Skills

Explore More Data & Analytics Skills→
documensodocumenso
14.3k

agent-browser

Automate browser interactions for navigation, form filling, screenshots, and content extraction.

Official
Advanced
imehrimehr
1

Amplifier Learner Tools

Log AI executions and learn from feedback using JSONL logs and JSON recommendations.

Community
Intermediate
HsienWHsienW
63

performance-optimization

Analyze web application performance bottlenecks using Lighthouse and web-vitals metrics.

Community
Advanced
claude-office-skillsclaude-office-skills
368

YouTube Automation

Automate YouTube video uploads, metadata optimization, scheduling, and analytics via MCP.

Official
Advanced