syncfusion-react-maps — скилл для Claude Code: карты на React
Помогает агенту собрать географическую карту на React: GeoJSON, маркеры, пузыри, легенда, хороплет. Пригодится, когда данные нужно показать по регионам.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-codeЧто делает syncfusion-react-maps
Скилл описывает работу с компонентом Syncfusion React Maps: рендер географических данных через SVG, привязка GeoJSON, слои и подслои, маркеры с кластеризацией, пузыри по величине значения, подписи данных, легенды и цветовые шкалы для хороплета. Отдельно разобраны провайдеры подложки — Bing, OpenStreetMap, Azure — и гибридный вариант, когда поверх тайлов ложатся свои фигуры.
Внутри — набор справочников: API компонента, установка и первый пример, слои, маркеры, визуальные элементы, легенда, цветовое сопоставление, линии навигации, провайдеры карт и пользовательские взаимодействия. Агент читает нужный файл под задачу, а не весь материал сразу. Для Bing и Azure понадобится ключ API, OpenStreetMap работает без него.
Компонент подключается по модульному принципу: функции вроде маркеров или легенды нужно инжектировать отдельно, иначе они просто не отрисуются. Это первое, на чём спотыкаются при первом запуске. Проекции переключаются между Mercator, Miller и другими.
Какие задачи решает
- показать продажи или метрики по регионам на карте
- нанести точки объектов по широте и долготе
- раскрасить регионы по значению показателя
- соединить города линиями маршрутов
- добавить зум, панорамирование и подсказки при наведении
Примеры запросов агенту
- Собери карту России из GeoJSON, раскрась регионы по числу заказов и добавь легенду
- Добавь на карту маркеры складов с координатами и всплывающие подсказки
- Подключи OpenStreetMap как подложку и наложи поверх свои фигуры из GeoJSON
Как установить syncfusion-react-maps
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-maps/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-maps/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-maps/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-maps/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-maps2Вручную: положить файлы
.github/skills/syncfusion-react-maps/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-mapsВручную: положить файлы
.devin/skills/syncfusion-react-maps/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Вопросы о syncfusion-react-maps
Как установить syncfusion-react-maps в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/syncfusion-react-maps/SKILL.md.
Что делает syncfusion-react-maps?
Даёт агенту инструкции по компоненту Syncfusion React Maps: GeoJSON, маркеры, пузыри, подписи, легенды, цветовые шкалы, линии навигации и провайдеры подложки.
Нужен ли ключ API для карт?
Для Bing Maps и Azure Maps ключ нужен, OpenStreetMap подключается без него. Гибридный режим позволяет совместить тайлы провайдера со своими фигурами из GeoJSON.
