Mapbox Cartography

If you're building maps with Mapbox and your color choices feel arbitrary or your POIs are fighting with your route lines for attention, this gives you actual cartographic principles to work from. It covers visual hierarchy, color theory with ready-to-use palettes for light/dark/accessible themes, typography at map scale, and zoom level strategies. The guidance is opinionated in useful ways, like why roads in dark themes must stay neutral gray instead of colored, and why your app's route layer should render above POI symbols, not below them. Especially helpful when you're past the Mapbox quickstart and need to make design decisions that don't look like you're just guessing.

skills.sh installs: 2.2K
GitHub stars: 86
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mapbox/mapbox-agent-skills --skill mapbox-cartography --agent claude-code

Installs into .claude/skills of the current project.

Files

Mapbox Cartography Skill

This skill provides expert cartographic knowledge to help you design effective, beautiful, and functional maps using Mapbox.

Core Cartographic Principles

Visual Hierarchy

Maps must guide the viewer's attention to what matters most:

Most important: POIs, user location, route highlights
Secondary: Major roads, city labels, landmarks
Tertiary: Minor streets, administrative boundaries
Background: Water, land use, terrain

Implementation:

Use size, color intensity, and contrast to establish hierarchy
Primary features: high contrast, larger symbols, bold colors
Background features: low contrast, muted colors, smaller text

Color Theory for Maps

Color Harmony:

Analogous colors: Use colors next to each other on color wheel (blue-green-teal) for cohesive designs
Complementary colors: Use opposite colors (blue/orange, red/green) for high contrast emphasis
Monochromatic: Single hue with varying saturation/brightness for elegant, minimal designs

Color Psychology:

SKILL.md on GitHub