From mapbox
Guides Mapbox map design with principles of visual hierarchy, color theory, typography, accessibility, and palettes for light/dark/high-contrast themes.
npx claudepluginhub mapbox/mapbox-agent-skills --plugin mapboxThis skill uses the workspace's default tool permissions.
This skill provides expert cartographic knowledge to help you design effective, beautiful, and functional maps using Mapbox.
Provides Mapbox style patterns and layer configs for mapping scenarios like POI finders, real estate, data viz, navigation, and logistics.
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 expert cartographic knowledge to help you design effective, beautiful, and functional maps using Mapbox.
Maps must guide the viewer's attention to what matters most:
Implementation:
Color Harmony:
Color Psychology:
Accessibility:
Color Palette Templates:
Light Theme (Day/Professional):
{
"background": "#f5f5f5",
"water": "#a0c8f0",
"parks": "#d4e7c5",
"roads": "#ffffff",
"buildings": "#e0e0e0",
"text": "#333333"
}
Dark Theme (Night Mode):
{
"background": "#1a1a1a",
"water": "#0d47a1",
"parks": "#2e7d32",
"roads": "#3a3a3a",
"buildings": "#2d2d2d",
"text": "#ffffff"
}
Road color rule for dark themes: Roads must use neutral dark gray (
#3a3a3a), visibly distinct from the background but not colored. Never style roads with amber, blue, or other hues — reserve color for app data layers (routes, markers). Colored base roads and colored data layers will compete visually. Local roads that blend into the background (#1e1e1eon#1a1a1a) create a "floating labels" problem where street names appear with no visible road beneath them.
High Contrast (Accessibility):
{
"background": "#000000",
"water": "#0066ff",
"parks": "#00ff00",
"roads": "#ffffff",
"buildings": "#808080",
"text": "#ffffff"
}
Vintage/Retro:
{
"background": "#f4e8d0",
"water": "#b8d4d4",
"parks": "#c8d4a4",
"roads": "#d4c4a8",
"buildings": "#e4d4c4",
"text": "#4a3828"
}
Font Selection:
Text Sizing:
Place labels (cities, POIs): 11-14px
Street labels: 9-11px
Feature labels (parks): 10-12px
Map title: 16-20px
Attribution: 8-9px
Label Placement:
Zoom 0-4 (World to Continent):
Zoom 5-8 (Country to State):
Zoom 9-11 (Metro Area):
Zoom 12-15 (Neighborhood):
Note: Mapbox's hosted Streets style defaults to showing most POIs around zoom 14. For custom styles, start POIs at zoom 12 — this is the neighborhood scale where density is manageable and users are browsing. Zoom 14 is late; zoom 10 (metro-area scale) is far too early and creates severe icon clutter.
Zoom 16-22 (Street Level):
Layer Ordering (bottom to top):
Common mistake: Developers often put their app's route line or active markers below POI symbols, reasoning that "POIs must stay visible." This is backwards — user-generated content (your route, selected location, user position) is the most important layer and must render above everything, including POIs. A route line that covers a POI icon is acceptable; a route obscured by POI icons is not.
Know Your Audience:
Platform Considerations:
Use Case Optimization:
For detailed guidance on specific topics, load these references as needed:
references/scenarios.md — Common scenario guidance (Restaurant Finder, Real Estate, Data Visualization, Navigation)references/performance-testing.md — Performance optimization, testing checklist, and common mistakes to avoidInvoke this skill when: