syncfusion-react-treemaps — скилл для Claude Code: визуализация данных
Скилл помогает создавать и настраивать древовидные карты на Syncfusion React TreeMap. Пригодится для иерархических данных, цветового кодирования и перехода между уровнями.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a claude-codeЧто делает syncfusion-react-treemaps
Скилл подсказывает, как подключить @syncfusion/ej2-react-treemap и связать компонент с плоскими или иерархическими данными. Размер прямоугольников можно привязать к значению поля, а для многоуровневой структуры настроить группировку и переход к вложенным категориям. Это пригодится, например, для карты разделов каталога или структуры папок.
В руководстве разобраны варианты раскладки, цветовые шкалы и категории, подписи, легенды, подсказки, выделение и настройка листовых элементов. Также описаны доступность с клавиатурной навигацией, RTL, локализация, печать и экспорт. Если проекту нужна временная диаграмма или граф связей, руководство предлагает другие типы визуализаций; TreeMap здесь рассчитана на сравнение категорий по площади.
Какие задачи решает
- подключить TreeMap к React-проекту
- связать карту с плоскими или многоуровневыми данными
- настроить переход между уровнями иерархии
- окрасить категории по значениям или диапазонам
- добавить подписи, легенду и подсказки
Примеры запросов агенту
- Покажи, как подключить
@syncfusion/ej2-react-treemapи вывести карту по моим данным. - Настрой переходы по уровням Country, State и City в TreeMap.
- Подбери раскладку и цветовое кодирование для этой иерархической карты.
Как установить syncfusion-react-treemaps
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-treemaps/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-treemaps/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-treemaps/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-treemaps/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-treemaps2Вручную: положить файлы
.github/skills/syncfusion-react-treemaps/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-treemapsВручную: положить файлы
.devin/skills/syncfusion-react-treemaps/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-treemaps
Как установить syncfusion-react-treemaps в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps -a claude-code. Файл скилла находится по пути ~/.claude/skills/syncfusion-react-treemaps/SKILL.md.
Что делает syncfusion-react-treemaps?
Скилл помогает реализовать Syncfusion React TreeMap для иерархических данных. Он охватывает привязку данных, раскладки, цветовое кодирование и интерактивные функции.
Можно ли с помощью скилла настроить drill-down?
Да. Руководство разбирает enableDrillDown, уровни группировки, обработчики событий и навигацию назад.
