heatmap-generator
Skill36 starsChanged 14 days agoMITView on GitHub
Generate click and interaction heatmaps from session data — visualize where users click, tap, and hover on any page. Use when asking "what do users click on most", "are users clicking non-clickable elements", or "where should we place the CTA".
In this repository45 other files it gives its agents.
- a11y-analyzerSkill
- annotation-opsSkill
- anomaly-detectorSkill
- api-monitorSkill
- benchmark-analyzerSkill
- campaign-trackerSkill
- changelog-detectiveSkill
- cohort-compassSkill
- comparisonsSkill
- customer-360Skill
- dashboard-builderSkill
- deploy-radarSkill
- error-forensicsSkill
- experiment-analyzerSkill
- feature-adoptionSkill
- form-analyzerSkill
- frustration-hunterSkill
- funnel-doctorSkill
- general-analysisSkill
- incident-responderSkill
- jira-bug-reporterSkill
- journey-builderSkill
- lifecycle-analyzerSkill
- metric-auditorSkill
- mobile-analyzerSkill
- nps-proxySkill
- onboarding-tutorSkill
- page-performanceSkill
- persona-builderSkill
- predictive-alertsSkill
- privacy-auditorSkill
- query-translatorSkill
- quick-statsSkill
- report-deckSkill
- retention-analyzerSkill
- revenue-impactSkill
- scroll-depth-analyzerSkill
- segment-wizardSkill
- session-playlistSkill
- session-reviewSkill
- session-searchSkill
- slack-reporterSkill
- user-journeySkill
- webhook-healthSkill
- weekly-digestSkill
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 25
Use free fullstory:discover_groups and fullstory:get_opportunity_stats for live signals.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Heatmap Generator
Generate interaction heatmaps from real session data — click density, tap zones, rage click hotspots, and dead click dead zones. No visual rendering (Fullstory doesn't expose pixel coordinates natively) — instead, element-level aggregation showing which elements get the most and least interaction.
When to Use
- "What do users click on most on the homepage?"
- "Show me a click map of the pricing page"
- "Are users clicking non-interactive elements?"
- "Where should we place the CTA on the landing page?"
- "Which elements are being ignored?"
- "Compare click patterns between new and returning users"
Mental Model
A heatmap visualizes interaction density. Hot zones = elements users interact with a lot. Cold zones = elements users ignore (or can't find). Rage click zones = elements users click repeatedly — often non-interactive elements that look clickable.
Fullstory doesn't expose cursor coordinates through the MCP, so you can't render a pixel-accurate heatmap. Instead, you generate an element-level interaction map — showing which DOM elements get clicked, how often, and in what pattern.
Use free fullstory:discover_groups and fullstory:get_opportunity_stats for live signals. Discovery accepts one scope at a time (page_id, domain, app_name, segment_id, or funnel_id); use a segment for device/user filters and the live schema for time ranges. Use computed metrics for exact custom windows.
Workflow
Step 1: Choose the page
Which page? Landing page, pricing page, product page, checkout.
Specify page: /pricing, /landing, /products/*
Step 2: Aggregate clicks by element
Build a metric for click events on the page:
fullstory:build_metric(
query="click events on /pricing by element",
output_type="top_n"
)
fullstory:compute_metric(metric_id)This returns the most-clicked elements, ranked by click count.
Step 3: Identify interaction patterns
Hot elements (high click count):
- Are these the intended CTAs? Good — users are finding them.
- Are these non-interactive elements? Bad — users think they're clickable but they're not (dead click risk).
Cold elements (low/no clicks):
- Is the primary CTA here? Bad — users aren't finding it.
- Is this decorative or secondary content? Good — expected.
Rage click zones (repeated clicks on same element):
fullstory:discover_groups → filter by page → look for rage click signals
→ "Rage clicks on 'Apply Promo' button: 412 users, concentrated on /checkout"Dead click zones (clicks on non-interactive elements):
fullstory:build_metric(
query="clicks on non-interactive elements on /pricing",
output_type="top_n"
)
→ "Dead clicks on pricing tier cards (not linked): 89 users — they think the card is clickable"Step 4: Analyze click sequence
What do users click before and after key elements?
fullstory:get_sessions(page="/pricing", limit=10)
→ session-context: "What did the user click before clicking 'Start Trial'? What did they click after?"This reveals navigation patterns: "Users click 'Compare Plans' → scroll → click 'Start Trial'" — the comparison table drives the decision.
Step 5: Segment the heatmap
Compare clicks by user type:
By device:
Desktop: CTA clicks concentrated on right-side hero button
Mobile: CTA clicks concentrated on sticky bottom bar
By source:
Organic: Users click "Features" → "Pricing" → "Start Trial"
Paid: Users click "Start Trial" immediately (or bounce)Step 6: Report
## Interaction Heatmap — /pricing (last 30 days, 8,400 visitors)
### Top Clicked Elements
1. "Start Free Trial" (hero CTA): 2,100 clicks (25% of visitors) 🔥🔥🔥
2. "Compare Plans" toggle: 1,800 clicks (21%) 🔥🔥
3. "Monthly/Annual" toggle: 1,200 clicks (14%) 🔥
4. Pricing tier cards (non-interactive!): 890 dead clicks (10.6%) ⚠️
5. FAQ accordion items: 650 clicks (7.7%)
6. "Contact Sales" (bottom): 210 clicks (2.5%) ❄️
### Critical Finding
Pricing tier cards are getting 890 dead clicks. Users think the entire card is clickable, but only the "Start Trial" button inside it works. The cards look like buttons but aren't.
### CTA Performance
- Hero CTA (above fold): 25% CTR — strong
- Bottom CTA (75% scroll depth): 2.5% CTR — nearly invisible
→ Move the "Contact Sales" CTA higher. Only 25% of visitors scroll far enough to see it.
### Rage Click Zones
- "Apply Promo" field on /checkout: hot rage click zone (separate page, but worth noting — users expect this to work)
### Segment Differences
- New visitors: 28% click hero CTA (higher — evaluating)
- Returning visitors: 18% click hero CTA (lower — already converted or not interested)
- Mobile: CTA clicks shift to sticky bottom bar (design is working as intended)
### Recommendations
1. Make pricing tier cards fully clickable (or remove the card styling that implies clickability)
2. Add a second "Contact Sales" CTA above the fold
3. Investigate "Apply Promo" rage clicks on /checkout (run `frustration-hunter`)Guidelines
- Element-level, not pixel-level. Fullstory MCP doesn't expose cursor coordinates. Be upfront about this — you're showing interaction density by element, not a visual heatmap overlay.
- Dead clicks on non-interactive elements are a top-3 UX issue on most sites. Always check for them.
- Cold CTAs are a placement problem, not a copy problem. If a CTA at the bottom of the page has 2.5% CTR, moving it up will do more than changing the button text.
- Rage click hot zones on interactive elements = the element is broken. Rage click hot zones on non-interactive elements = the element looks interactive but isn't. Different fixes.
- Cross-reference with
scroll-depth-analyzer— if an element has low clicks AND is at a scroll depth most users don't reach, the problem is placement, not the element.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

