From mapbox
Provides Mapbox style patterns and layer configs for mapping scenarios like POI finders, real estate, data viz, navigation, and logistics.
npx claudepluginhub mapbox/mapbox-agent-skills --plugin mapboxThis skill uses the workspace's default tool permissions.
This skill provides battle-tested style patterns and layer configurations for common mapping scenarios.
Guides Mapbox map design with principles of visual hierarchy, color theory, typography, accessibility, and palettes for light/dark/high-contrast themes.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
This skill provides battle-tested style patterns and layer configurations for common mapping scenarios.
Use case: Consumer app showing restaurants, cafes, bars, or other points of interest
Visual requirements:
Recommended layers:
{
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#f5f5f5"
}
},
{
"id": "water",
"type": "fill",
"source": "mapbox-streets",
"source-layer": "water",
"paint": {
"fill-color": "#d4e4f7",
"fill-opacity": 0.6
}
},
{
"id": "landuse-parks",
"type": "fill",
"source": "mapbox-streets",
"source-layer": "landuse",
"filter": ["==", "class", "park"],
"paint": {
"fill-color": "#e8f5e8",
"fill-opacity": 0.5
}
},
{
"id": "roads-minor",
"type": "line",
"source": "mapbox-streets",
"source-layer": "road",
"filter": ["in", "class", "street", "street_limited"],
"paint": {
"line-color": "#e0e0e0",
"line-width": {
"base": 1.5,
"stops": [
[12, 0.5],
[15, 2],
[18, 6]
]
}
}
},
{
"id": "roads-major",
"type": "line",
"source": "mapbox-streets",
"source-layer": "road",
"filter": ["in", "class", "primary", "secondary", "tertiary"],
"paint": {
"line-color": "#ffffff",
"line-width": {
"base": 1.5,
"stops": [
[10, 1],
[15, 4],
[18, 12]
]
}
}
},
{
"id": "restaurant-markers",
"type": "symbol",
"source": "restaurants",
"layout": {
"icon-image": "restaurant-15",
"icon-size": 1.5,
"icon-allow-overlap": false,
"text-field": ["get", "name"],
"text-offset": [0, 1.5],
"text-size": 12,
"text-allow-overlap": false
},
"paint": {
"icon-color": "#FF6B35",
"text-color": "#333333",
"text-halo-color": "#ffffff",
"text-halo-width": 2
}
}
]
}
Key features:
Question 1: What is the primary content?
Question 2: What is the viewing environment?
Question 3: What is the user's primary action?
Question 4: What is the platform?
{
"id": "roads",
"type": "line",
"source": "mapbox-streets",
"source-layer": "road",
"filter": [
"step",
["zoom"],
["in", "class", "motorway", "trunk"],
8,
["in", "class", "motorway", "trunk", "primary"],
12,
["in", "class", "motorway", "trunk", "primary", "secondary"],
14,
true
],
"paint": {
"line-width": {
"base": 1.5,
"stops": [
[4, 0.5],
[10, 1],
[15, 4],
[18, 12]
]
}
}
}
Additional patterns and configurations are available in the references/ directory. Load the relevant file when a specific pattern is needed.
| File | Contents |
|---|---|
| references/real-estate.md | Pattern 2: Real Estate Map -- property boundaries, price color-coding, amenity markers |
| references/data-viz-base.md | Pattern 3: Data Visualization Base Map -- minimal grayscale base for choropleth/heatmap overlays |
| references/navigation.md | Pattern 4: Navigation/Routing Map -- route display, user location, turn arrows |
| references/dark-mode.md | Pattern 5: Dark Mode / Night Theme -- near-black background, reduced brightness |
| references/delivery-logistics.md | Pattern 6: Delivery/Logistics Map -- real-time tracking, zones, driver markers, ETA badges |
| references/expressions-clustering.md | Data-driven expression patterns + clustering for dense POIs |
| references/common-modifications.md | 3D Buildings, Terrain/Hillshade, Custom Markers |
Loading instructions: Read the reference file that matches the user's use case. For example, if implementing a delivery tracking map, load references/delivery-logistics.md.
Invoke this skill when: