Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-heatmap — Claude Code skill: React heatmaps

Walks the agent through building a React heatmap with axes, legend and tooltips. Handy when a matrix of values needs colour.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a claude-code
Open on GitHub

What syncfusion-react-heatmap does

The skill guides an agent through HeatMapComponent from @syncfusion/ej2-react-heatmap. Reference files cover setup, binding data, axes, legend, styling, cell selection and events. One file deals with accessibility and common problems, including moving from EJ1 to EJ2.

Data arrives as a 2D array or JSON. Axes can be numerical, categorical or datetime, colours come from a gradient or a fixed palette, and rendering switches between SVG and Canvas. Bubble heatmaps are covered too, along with methods such as export, print and clearSelection.

You need a React project with the Syncfusion package installed and a theme stylesheet imported, for instance @syncfusion/ej2-base/styles/material.css. Skip that import and the chart renders unstyled, so wire it up before the first run.

What it helps with

  • show a matrix of values as coloured cells
  • set up numerical, categorical or datetime axes
  • add a gradient legend and hover tooltips
  • handle cell selection and custom events
  • keep a large heatmap rendering smoothly

Example prompts for the agent

  • Build a weekday-by-hour activity heatmap with HeatMapComponent
  • Apply a gradient palette and put the legend on the right
  • Wire a cell selection handler and log the value

How to install syncfusion-react-heatmap

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-heatmap/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-heatmap/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-heatmap

How do I install syncfusion-react-heatmap in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a claude-code. The skill file lands at ~/.claude/skills/syncfusion-react-heatmap/SKILL.md.

What does syncfusion-react-heatmap do?

It tells the agent how to build a React heatmap: binding 2D data, configuring axes, palettes, legend, tooltips and cell selection events.

What do I need before using this skill?

A React project with @syncfusion/ej2-react-heatmap and a theme stylesheet imported. The skill also covers the EJ1 to EJ2 migration and accessibility checks.

Similar skills

All skills for Frontend and UI →
react-and-nextjs-data-visualization official OpenAI Patterns for embedding charts and diagrams into React and Next.js: SSR boundaries, hydration safety, URL-backed state, and isolated rendering layers. CX Codex GP ChatGPT 13installs Predictive Eye Tracking Heatmap Generator ilkerulusoy A prompt that turns a UI screenshot into a thermal heatmap: where the eye lands, and what gets scrolled past. GP ChatGPT ★ 174,676repo stars globe-gl MengTo Sets up 3D globe visualizations using globe.gl with WebGL and ThreeJS. Helps configure data layers like points, arcs, and polygons in plain HTML or React. CX Codex +1 1,500installs recharts andy-spike This skill guides React chart work with Recharts. Use it for line, bar, area, pie, scatter, and mixed visualizations. CX Codex +1 1,100installs Semiotic nteract MCP server for creating and checking React charts with AI assistants. Useful for interactive dashboards and streaming views. CX Codex +1 ★ 2,716repo stars coordinated-data-views dembrandt A coding-agent skill that explains how to show a table next to its map, diagram or chart and keep selection synced both ways. CX Codex +1 668installs

From the same set57

syncfusion-react-popups A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components. CX Codex +1 663installs syncfusion-react-appbar This skill helps build React navigation and action bars with AppBar. Use it for top, bottom, sticky, or responsive headers with controls and sidebars. CX Codex +1 661installs syncfusion-react-3d-chart This skill walks your agent through Syncfusion 3D column and bar charts in a React app. Handy when a chart needs axes, a legend and export. CX Codex +1 661installs syncfusion-react-notifications A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. Useful when you need status indicators without digging through docs. CX Codex +1 659installs syncfusion-react-breadcrumb A skill that walks your coding agent through building and configuring the Syncfusion Breadcrumb component in React: routes, icons, overflow. Useful when you need a navigation trail without digging through docs. CX Codex +1 658installs syncfusion-react-carousel This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. Use it for galleries, product displays, or slideshows. CX Codex +1 657installs syncfusion-react-sidebar Build responsive Syncfusion React sidebars for navigation layouts. Use this skill for drawer menus, nested navigation, and mobile-friendly panels. CX Codex +1 656installs syncfusion-react-timeline Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. Useful for roadmaps, shipping tracking and activity feeds. CX Codex +1 655installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor