syncfusion-react-maps — Claude Code skill: React maps
Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-codeWhat syncfusion-react-maps does
The skill covers the Syncfusion React Maps component: rendering geographic data as SVG, binding GeoJSON, layers and sublayers, markers with clustering, bubbles sized by value, data labels, legends and color mapping for choropleth maps. Map providers get their own section — Bing, OpenStreetMap, Azure — plus the hybrid route where your own shapes sit on top of provider tiles.
Inside is a set of reference files: the component API, getting started, layers, markers, data visualization, legend, color mapping, navigation lines, map providers and user interactions. The agent reads the one that matches the task instead of the whole thing. Bing and Azure need an API key; OpenStreetMap does not.
Modules are injected per feature. Skip the injection for markers or legend and they will not render — that is the usual first stumble. Projections switch between Mercator, Miller and others.
What it helps with
- show sales or metrics by region on a map
- plot locations by latitude and longitude
- color regions by a data value
- draw routes between cities as navigation lines
- add zoom, panning and hover tooltips
Example prompts for the agent
- Build a US map from GeoJSON, color states by order count and add a legend
- Add warehouse markers with coordinates and hover tooltips to the map
- Use OpenStreetMap as the base layer and overlay my own GeoJSON shapes
How to install syncfusion-react-maps
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-maps/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-maps/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-maps/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-maps/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-maps2Manually: put the files in place
.github/skills/syncfusion-react-maps/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-mapsManually: put the files in place
.devin/skills/syncfusion-react-maps/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about syncfusion-react-maps
How do I install syncfusion-react-maps in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-code. The skill file then lands at ~/.claude/skills/syncfusion-react-maps/SKILL.md.
What does syncfusion-react-maps do?
It gives the agent instructions for the Syncfusion React Maps component: GeoJSON, markers, bubbles, data labels, legends, color mapping, navigation lines and map providers.
Do I need an API key for the maps?
Bing Maps and Azure Maps require a key, OpenStreetMap does not. A hybrid setup lets you combine provider tiles with your own GeoJSON shapes.
