Agent skill
heatmap-analysis
Analyze user interaction heatmaps for attention patterns and click behavior
Install this agent skill to your Project
npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/ux-ui-design/skills/heatmap-analysis
SKILL.md
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 }
});
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
gsd-tools
Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).
model-profile-resolution
Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.
verification-suite
Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.
state-management
STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.
git-integration
Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.
frontmatter-parsing
YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.
Didn't find tool you were looking for?