From mapbox
Provides tested Mapbox style patterns for common mapping scenarios: restaurant finders, navigation, data visualization, real estate, and logistics. Includes layer configurations and recipes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mapbox:mapbox-style-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides battle-tested style patterns and layer configurations for common mapping scenarios.
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:
npx claudepluginhub mapbox/mapbox-agent-skills --plugin mapboxExpert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective maps with Mapbox. Use when designing map styles or choosing colors.
Style and render geographic data using ArcGIS renderers, symbols, and visual variables for thematic maps, heatmaps, class breaks, unique values, labels, and 3D visualization.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.