MCPInstall

assessing-heatmaps

Assesses what a page's heatmap is telling you and recommends concrete changes. Pulls click / rageclick / scroll-depth data for a URL, names the hot elements by cross-referencing autocapture events on the same page, and can create a saved heatmap the user opens in PostHog, then summarizes the behavior and proposes improvements. TRIGGER when: user asks what a heatmap shows, why people aren't clicking something, where users rage-click, how far they scroll, what to change on a page based on heatmap/click data, or to 'analyze/assess/review the heatmap' for a URL. DO NOT TRIGGER when: the user only wants to create a saved heatmap screenshot with no analysis (use heatmaps-saved-create directly), or is asking about session replay in general (use investigating-replay).

Installs
172
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/posthog/ai-plugin --skill assessing-heatmaps
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads assessing-heatmaps automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Assessing heatmaps

A heatmap answers "where do people interact with this page?" — clicks, rage clicks, mouse movement, and how far down they scroll. The data is pure geometry: pointer_relative_x (0..1 across the viewport), pointer_y (absolute pixels down the page), and a count per spot. It does not know what was clicked. Turning "lots of clicks at (0.5, 220)" into "lots of clicks on the Pricing nav link" is the whole job, and it comes from cross-referencing autocapture on the same URL.

Core principle: coordinates + meaning

You can't see the page — there is no screenshot in your context. A good assessment fuses two sources and leans on autocapture to supply the layout/identity you can't see:

  1. Heatmap data — where interactions land and how far people scroll (heatmaps-list).
  2. Autocapture — what element sits under the hot spots, by element text / selector on the same page. This is what turns coordinates into meaning; without it you only have dots.

When the user wants to see the heatmap, create a saved heatmap (Step 4) — that renders the page with the data overlaid for them to open in PostHog. You reason from the data; they look at the picture.

The flow

Step 1: Pin the page and window

You need an exact url_exact (one page) or a url_pattern (regex, to aggregate across query strings). Confirm the URL with the user if ambiguous. Default to the last 7 days; widen to 30 if volume is low. Heatmap data is retained for 90 days.

Step 2: Pull the data

Call heatmaps-list once per signal you care about (or query the heatmaps table directly via SQL — see the querying-posthog-data skill, models-heatmaps):

  • type: "click" — the primary "what draws attention" map.
  • type: "rageclick" — repeated frustrated clicks. The single strongest "something is broken or misleading" signal. Any meaningful rageclick cluster deserves a callout.
  • type: "scrolldepth" — how far people get. Use it to find the fold and spot CTAs that sit below where most people ever scroll.

Use aggregation: "unique_visitors" when you care about how many people (not how many clicks); total_count exaggerates a few heavy clickers.

Click results come back hottest-first and are capped at limit (default 500). A busy page can have thousands of distinct coordinates, so the default page plus the fold summary is almost always enough — the hottest points are what analysis turns on. Don't ask for everything: raise limit or page with offset only when you specifically need more, and check has_more to know the list was truncated. scrolldepth ignores limit and always returns every bucket.

Step 2b: Above the fold — read the fold summary

For the click types, heatmaps-list returns a fold object alongside results:

  • pct_below_fold — share of non-fixed interactions that landed below the user's initial viewport (they had to scroll to reach them). This is one of the highest-value findings: content people actively click that sits below the fold is a prime candidate to move up.
  • below_fold_count / total_count — the raw counts behind the percentage (fixed-position elements are excluded, since they're always on screen).
  • median_viewport_height — the typical fold line in CSS pixels, to recommend against.

Report it concretely, e.g. "the fold is ~600px for most visitors, yet 35% of clicks land below it, so users scroll before interacting — that content is a candidate for the first screen." Segment by device with viewport_width_min/viewport_width_max (desktop and mobile have very different folds) and read fold per band rather than blending them.

Need a distribution rather than a single percentage (e.g. clicks bucketed by how far below the fold)? Drop to SQL on the raw heatmaps table, which has y and viewport_height in the same scaled units — see the querying-posthog-data skill, models-heatmaps.

Step 3: Name the hot elements (autocapture overlap)

For each notable cluster, find what's actually there. Query autocapture on the same URL — either via the exploring-autocapture-events skill or directly:

SELECT properties.$el_text AS text, count() AS clicks
FROM events
WHERE event = '$autocapture'
  AND properties.$current_url = 'https://example.com/pricing'
  AND timestamp >= now() - INTERVAL 7 DAY
GROUP BY text
ORDER BY clicks DESC
LIMIT 25

elements_chain gives the selector/DOM path when you need to disambiguate two elements with the same text. Match autocapture's top elements to the heatmap's hot coordinates: clicks concentrated on something that is not a link or button (plain text, an image, a disabled control) is a classic "users expect this to be clickable" finding.

Step 4: Give the user a heatmap to look at (optional)

You can't see the page, but the user can. When a visual would help them follow your findings, create a saved heatmap so they can open the rendered page with the data overlaid in PostHog:

  1. heatmaps-saved-create with the page url (type defaults to screenshot). This enqueues a headless render — it is asynchronous. Pass widths matching the viewport band you analyzed in Step 2.
  2. Poll heatmaps-saved-get (by the returned short_id) until status is completed, then tell the user it's ready to view in PostHog.

This is for the human's benefit — your own reasoning still comes from the Step 2 data and the Step 3 autocapture identity, not from the picture.

Step 5: Drill into hotspots (when you need the "why")

For a surprising cluster, heatmaps-events returns the individual sessions behind specific points. Hand the session IDs to the investigating-replay skill to watch what people actually did.

Step 6: Summarize and recommend

Produce a short, concrete report:

  • What the heatmap shows — top engaged elements, dead zones, scroll reach, and the above/below-the-fold click split (e.g. "viewport is ~600px for most visitors, yet 35% of clicks land below it").
  • Problems, ranked by signal strength — rage-click clusters first, then clicks on non-interactive elements, then important CTAs sitting below the scroll cliff, then ignored primary actions.
  • Recommendations tied to evidence — move/raise a CTA above the fold, make a clicked-but-dead element a real link, cut competing elements near a rage-click cluster, etc. Every recommendation should cite the signal it came from.

Reading the signals

SignalLikely meaningTypical recommendation
Rage clicks on an elementBroken, slow, or looks-clickable-but-isn'tFix the handler, add feedback, or make it actually interactive
Many clicks on non-link text/imageUsers expect it to be clickableMake it a link/button, or remove the affordance
Primary CTA gets few clicksBuried, low-contrast, or out-competedRaise it, increase contrast, reduce nearby noise
Scroll cliff before key contentContent/CTA is below where people stopMove it up or add a reason to scroll
High % of clicks below the foldEngaged content sits below the initial viewport — users scroll before interactingMove the most-clicked elements onto the first screen
Hot clicks on nav, cold bodyPage isn't delivering; people bail to navRe-evaluate the page's core content

Gotchas

  • Heatmaps must be opted in (Team.heatmaps_opt_in). If heatmaps-list returns nothing for a page that clearly gets traffic, capture may be off or the URL is wrong — check both before concluding "no engagement".
  • Coordinates are scaled by a factor of 16 in storage; the API already returns CSS-pixel pointer_y and relative x, so use the API/tool values directly rather than the raw table columns.
  • You can't see the screenshot. The saved-heatmap render is for the user to open in PostHog; don't claim to have looked at the page. Ground every layout claim in autocapture identity + coordinates, not vision.
  • Saved-heatmap rendering is async. After heatmaps-saved-create, poll heatmaps-saved-get until status is completed before telling the user it's viewable. Only screenshot-type heatmaps render an image; iframe and recording types do not.
  • Mind the viewport. A desktop click map and a mobile one are different pages' worth of behavior — filter with viewport_width_min/viewport_width_max rather than blending them.

FAQ

What does the assessing-heatmaps skill do?

Assesses what a page's heatmap is telling you and recommends concrete changes. Pulls click / rageclick / scroll-depth data for a URL, names the hot elements by cross-referencing autocapture events on the same page, and can create a saved heatmap the user opens in PostHog, then summarizes the behavior and proposes improvements. TRIGGER when: user asks what a heatmap shows, why people aren't clicking something, where users rage-click, how far they scroll, what to change on a page based on heatmap/click data, or to 'analyze/assess/review the heatmap' for a URL. DO NOT TRIGGER when: the user only wants to create a saved heatmap screenshot with no analysis (use heatmaps-saved-create directly), or is asking about session replay in general (use investigating-replay).

How do I install assessing-heatmaps?

Run npx skills add https://github.com/posthog/ai-plugin --skill assessing-heatmaps in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/assessing-heatmaps/ (personal) or .claude/skills/assessing-heatmaps/ (project).

Which AI agents can use assessing-heatmaps?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is assessing-heatmaps safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains assessing-heatmaps?

It is published by posthog in posthog/ai-plugin. It has 172 recorded installs.

More from posthog/ai-plugin

View all →

Add PostHog product analytics events to track user behavior. Use after implementing new features or reviewing PRs to ensure meaningful user actions are captured. Also handles initial PostHog SDK setup if not yet installed.

OfficialData & Databases593 installs

instrument-feature-flags

posthog/ai-plugin

Open the skill to read its SKILL.md instructions.

Official473 installs

Identify stale feature flags in a PostHog project and clean up the code that checks them. Use when the user wants to find, audit, or remove unused, fully rolled out, or abandoned feature flags, run a feature flag hygiene review or a weekly cleanup, reduce feature flag tech debt, or asks "which flags can I remove?". When the agent can read and edit a repository it performs the code cleanup itself: tested local changes, and one draft PR per flag when the user authorizes publishing. Agents without repository access generate a tailored cleanup prompt instead. Covers staleness detection, dependency checking, retained-path rules, and the code-first ordering. This skill does not archive or otherwise change a flag in PostHog.

OfficialCode Quality & Workflow397 installs

Audit PostHog experiments and feature flags for configuration issues, staleness, and best-practice violations. Read when the user asks to audit, health-check, or review experiments or feature flags, check flag hygiene, or verify experiment setup.

OfficialSecurity395 installs

querying-posthog-data

posthog/ai-plugin

Explains how to query PostHog data, defaulting to typed runners for supported product analytics. Read it before you write HogQL/SQL. Also read it before you call execute-sql against PostHog. Use it to find or aggregate PostHog entities. These entities include insights, dashboards, cohorts, feature flags, experiments, surveys, hog flows, warehouse data, and persons. Use it for trends, funnels, retention, lifecycle, paths, stickiness, web analytics, error tracking, logs, sessions, and LLM traces. Before you calculate a governed business or telemetry measure, check system.informationschema.metrics for an approved definition. Examples include MRR, activation, billable usage, active organizations, and failure rates. Use the approved definition before you derive a measure from raw events or use a typed domain tool. It also covers HogQL differences, system table schemas, functions, query examples, and schema discovery.

OfficialData & Databases384 installs

creating-experiments

posthog/ai-plugin

Guides agents through experiment creation: reading the project's setup with experiment-setup-context, defining the hypothesis, configuring rollout and bucketing, setting up analytics and running time, and reporting which choices are guesses. Delegates rollout decisions to configuring-experiment-rollout and metric setup to configuring-experiment-analytics. TRIGGER when: user asks to create a new experiment or A/B test, OR when you are about to call experiment-create. DO NOT TRIGGER when: user is updating an existing experiment, managing lifecycle, or only browsing experiments.

OfficialData & Databases368 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.