Back to Skills

mapbox-cartography

Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.

71stars13forksUpdated 8/16/2026

Security Assessment

Safe(96/100)
Security Score96/100

About mapbox-cartography

mapbox-cartography is an expert-guidance skill for designing effective, beautiful, and functional maps with Mapbox. It concentrates cartographic craft — visual hierarchy, color theory, typography, and best practices — into actionable rules so map styles read clearly and guide the viewer's attention to what matters, rather than looking cluttered or inconsistent.

The skill teaches how to build visual hierarchy (primary POIs and routes versus secondary roads and labels versus tertiary and background layers) using size, contrast, and color intensity. It covers color harmony (analogous, complementary, monochromatic), color psychology for map features, and accessibility (4.5:1 WCAG AA text contrast, not relying on color alone, colorblind testing, avoiding red/green for critical distinctions). It ships ready-to-use JSON color-palette templates for light, dark, high-contrast, and vintage themes, along with pointed rules such as keeping dark-theme roads a neutral gray so colored base roads don't compete with app data layers, and avoiding the 'floating labels' problem where street names sit over invisible roads. It also addresses typography at map scale and lists common mistakes like neglecting performance and mobile testing.

It targets designers, developers, and GIS practitioners building map styles with Mapbox who want principled cartographic decisions rather than ad-hoc color picking. It is pure design guidance with example style JSON and no code execution or credential handling, making it a benign reference.

FAQ

How do I decide what stands out on a map?

Establish a visual hierarchy: primary features (POIs, user location, route highlights) get high contrast, larger symbols, and bold colors, while background features (water, land use, terrain) stay muted, low-contrast, and smaller.

Does it help with accessible color choices?

Yes. It recommends a 4.5:1 contrast ratio for text (WCAG AA), not relying on color alone, testing with colorblind simulators, and avoiding red/green combinations for critical distinctions.

Are there ready-made palettes?

Yes. It provides JSON color-palette templates for light/day, dark/night, high-contrast accessibility, and vintage/retro themes, with specified colors for background, water, parks, roads, buildings, and text.

Why does it warn against colored roads in dark themes?

Roads should be a neutral dark gray, distinct from the background but not colored, so colored base roads don't compete with app data layers like routes and markers; roads that blend into the background create a floating-labels problem.

Who is this skill for?

Anyone designing Mapbox map styles or making cartographic decisions — designers, developers, and GIS practitioners — who want principled guidance on hierarchy, color, and typography.

All Files

5 files
references/performance-testing.md1.3 KB
View
evals/evals.json3.1 KB
View
SKILL.md7.1 KB
View
AGENTS.md4.9 KB
View
references/scenarios.md1.5 KB
View

Install mapbox-cartography

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill