Heatmap analysis

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/heatmap-analysis

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill heatmap-analysis

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Analyze user interaction heatmaps for attention patterns and click behavior

SKILL.md

3.0 KB, as published. Nobody here has run it

Heatmap Analysis Skill

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 }
});