syncfusion-react-heatmap — скилл для Claude Code
Помогает собрать тепловую карту на React с осями, легендой и подсказками. Пригодится, когда нужно показать матрицу данных цветом.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a claude-codeЧто делает syncfusion-react-heatmap
Скилл ведёт агента по компоненту HeatMapComponent из пакета @syncfusion/ej2-react-heatmap. Внутри — справочники по установке, привязке данных, осям, легенде, оформлению, выделению ячеек и событиям. Отдельный файл посвящён доступности и разбору типичных ошибок, включая переход с EJ1 на EJ2.
Данные подаются как двумерный массив или JSON, оси бывают числовые, категориальные и по датам. Цвет задаётся градиентом или фиксированной палитрой, режим отрисовки переключается между SVG и Canvas. Есть пузырьковая тепловая карта и методы вроде export, print, clearSelection.
Для работы нужен React-проект с установленным пакетом Syncfusion и подключёнными стилями темы, например @syncfusion/ej2-base/styles/material.css. Без импорта CSS карта отрисуется без оформления, так что проверьте этот шаг до первого запуска.
Какие задачи решает
- показать матрицу значений цветом без ручной вёрстки ячеек
- настроить числовые, категориальные и датовые оси
- добавить легенду с градиентом и подсказки при наведении
- обработать выбор ячейки и повесить свои события
- ускорить отрисовку большой тепловой карты
Примеры запросов агенту
- Сделай тепловую карту активности по дням недели и часам на
HeatMapComponent - Настрой градиентную палитру и легенду справа для этой матрицы
- Добавь обработчик выбора ячейки и выведи значение в консоль
Как установить syncfusion-react-heatmap
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-heatmap/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-heatmap/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-heatmap/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-heatmap/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-heatmap2Вручную: положить файлы
.github/skills/syncfusion-react-heatmap/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-heatmapВручную: положить файлы
.devin/skills/syncfusion-react-heatmap/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-heatmap
Как установить syncfusion-react-heatmap в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap -a claude-code. Файл скилла окажется по пути ~/.claude/skills/syncfusion-react-heatmap/SKILL.md.
Что делает syncfusion-react-heatmap?
Подсказывает агенту, как собрать тепловую карту на React: привязка двумерных данных, оси, палитра, легенда, подсказки и события выбора ячеек.
Что нужно подготовить до работы со скиллом?
React-проект с пакетом @syncfusion/ej2-react-heatmap и подключёнными стилями темы. Скилл также описывает переход с EJ1 на EJ2 и проверку доступности.
