Heatmap Analysis Skill

SkillDev tools

Analyze user interaction heatmaps for attention patterns and click behavior

Use Heatmap Analysis Skill in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Heatmap Analysis Skill and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Heatmap Analysis Skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Heatmap Analysis SkillStart free

What this skill tells your AI

The instructions your AI receives, as published by a5c-ai/babysitter in library/specializations/ux-ui-design/skills/heatmap-analysis/SKILL.md and read by Ahel’s review.

Purpose

Analyze user interaction heatmaps to identify attention patterns, click concentrations, and scroll depth insights for UX optimization.

Capabilities

Parse heatmap data from analytics platforms
Identify attention hotspots and cold zones
Analyze click concentration patterns
Measure scroll depth and engagement
Generate attention flow visualizations
Compare heatmaps across variants

Target Processes

user-research.js
user-journey-mapping.js
usability-testing.js
information-architecture.js

Integration Points

Hotjar API
Crazy Egg API
Microsoft Clarity
Custom heatmap data formats

Input Schema

{
  "type": "object",
  "properties": {
    "dataSource": {
      "type": "string",
      "enum": ["hotjar", "crazyegg", "clarity", "custom"],
      "description": "Heatmap data source"
    },
    "heatmapType": {
      "type": "string",
      "enum": ["click", "move", "scroll", "attention"],
      "default": "click"
    },
    "dataPath": {
      "type": "string",
      "description": "Path to heatmap data file or API endpoint"
    },
    "pageUrl": {
      "type": "string",
      "description": "URL of the analyzed page"
    },
    "segmentation": {
      "type": "object",
      "properties": {
        "device": { "type": "string" },
        "dateRange": { "type": "object" }
      }
    },
    "thresholds": {
      "type": "object",
      "properties": {
        "hotspot": { "type": "number", "default": 0.7 },
        "coldZone": { "type": "number", "default": 0.1 }
      }
    }
  },
  "required": ["dataSource", "dataPath"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "hotspots": {
      "type": "array",
      "description": "High-engagement areas"
    },
    "coldZones": {
      "type": "array",
      "description": "Low-engagement areas"
    },
    "scrollDepth": {
      "type": "object",
      "description": "Scroll depth percentiles"
    },
    "clickPatterns": {
      "type": "array",
      "description": "Click concentration analysis"
    },
    "recommendations": {
      "type": "array",
      "description": "UX improvement recommendations"
    },
    "visualizationPath": {
      "type": "string",
      "description": "Path to generated visualization"
    }
  }
}

Usage Example

const result = await skill.execute({
  dataSource: 'hotjar',
  heatmapType: 'click',
  dataPath: './heatmap-export.json',
  pageUrl: 'https://example.com/landing',
  thresholds: { hotspot: 0.7, coldZone: 0.1 }
});

Signals

GitHub stars: 2k
Forks: 113
Last commit: Sep 2026

Advanced

Item type: skill
Key: heatmap-analysis
Source: github.com/a5c-ai/babysitter

github.com/a5c-ai/babysitter