mapbox-style-patterns

Q: How do I install mapbox-style-patterns?

Run npx skills add https://github.com/mapbox/mapbox-agent-skills --skill mapbox-style-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mapbox-style-patterns/ (personal) or .claude/skills/mapbox-style-patterns/ (project).

by mapbox OfficialAI & Agents

Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.

Installs: 2.4K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/mapbox/mapbox-agent-skills --skill mapbox-style-patterns

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads mapbox-style-patterns automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Mapbox Style Patterns Skill

This skill provides battle-tested style patterns and layer configurations for common mapping scenarios.

Pattern Library

Pattern 1: Restaurant/POI Finder

Use case: Consumer app showing restaurants, cafes, bars, or other points of interest

Visual requirements:

POIs must be immediately visible
Street context for navigation
Neutral background (photos/content overlay)
Mobile-optimized

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:

Desaturated base map (doesn't compete with photos)
High-contrast markers (#FF6B35 orange stands out)
Clear road network (white on light gray)
Parks visible but subtle
Text halos for readability

Pattern Selection Guide

Decision Tree

Question 1: What is the primary content?

User-generated markers/pins -> POI Finder Pattern
Property data/boundaries -> Real Estate Pattern
Statistical/analytical data -> Data Visualization Pattern
Routes/directions -> Navigation Pattern
Real-time tracking/delivery zones -> Delivery/Logistics Pattern (customer markers should include a pulse animation via second circle layer + requestAnimationFrame + setPaintProperty; see references/delivery-logistics.md)

Question 2: What is the viewing environment?

Daytime/office -> Light theme
Night/dark environment -> Dark Mode Pattern
Variable -> Provide theme toggle

Question 3: What is the user's primary action?

Browse/explore -> Focus on POIs, rich detail
Navigate -> Focus on roads, route visibility
Track delivery/logistics -> Real-time updates, zones, status
Analyze data -> Minimize base map, maximize data
Select location -> Clear boundaries, context

Question 4: What is the platform?

Mobile -> Simplified, larger touch targets, less detail
Desktop -> Can include more detail and complexity
Both -> Design mobile-first, enhance for desktop

Layer Optimization Patterns

Performance Pattern: Simplified by Zoom

{
  "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]
      ]
    }
  }
}

Reference Files

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
references/interactions.md	`addInteraction` vs `setFeatureState` vs `appearances` -- how they fit together and when to use each

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.

Testing Patterns

Visual Regression Checklist

When to Use This Skill

Invoke this skill when:

Starting a new map style for a specific use case
Looking for layer configuration examples
Implementing common mapping patterns
Optimizing existing styles
Need proven recipes for typical scenarios
Debugging style issues
Learning Mapbox style best practices

FAQ

What does the mapbox-style-patterns skill do?

How do I install mapbox-style-patterns?

Run npx skills add https://github.com/mapbox/mapbox-agent-skills --skill mapbox-style-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mapbox-style-patterns/ (personal) or .claude/skills/mapbox-style-patterns/ (project).

Which AI agents can use mapbox-style-patterns?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is mapbox-style-patterns safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains mapbox-style-patterns?

It is published by mapbox in mapbox/mapbox-agent-skills, and it is an official skill from the maker of the technology it covers. It has 2,355 recorded installs.

More from mapbox/mapbox-agent-skills

View all →

mapbox-web-integration-patterns

mapbox/mapbox-agent-skills

Official integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling, search integration, and common pitfalls. Based on Mapbox's create-web-app scaffolding tool.

OfficialFrontend & Design2.6K installs

mapbox-web-performance-patterns

mapbox/mapbox-agent-skills

Performance optimization patterns for Mapbox GL JS web applications. Covers initialization waterfalls, bundle size, rendering performance, memory management, and web optimization. Prioritized by impact on user experience.

OfficialCode Quality & Workflow2.5K installs

mapbox-geospatial-operations

mapbox/mapbox-agent-skills

Expert guidance on choosing the right geospatial tool based on problem type, accuracy requirements, and performance needs

OfficialAI & Agents2.2K installs

mapbox-data-visualization-patterns

mapbox/mapbox-agent-skills

Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, data-driven styling, and animated data. Covers layer types, color scales, and performance optimization.

OfficialFrontend & Design2.1K installs

mapbox-cartography

mapbox/mapbox-agent-skills

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.

OfficialFrontend & Design2.1K installs

mapbox-style-quality

mapbox/mapbox-agent-skills

Expert guidance on validating, optimizing, and ensuring quality of Mapbox styles through validation, accessibility checks, and optimization. Use when preparing styles for production, debugging issues, or ensuring map quality standards.

OfficialFrontend & Design2K installs

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs

mapbox-style-patterns

Install

Install

Describe the task

Review the result

SKILL.md

Mapbox Style Patterns Skill

Pattern Library

Pattern 1: Restaurant/POI Finder

Pattern Selection Guide

Decision Tree

Layer Optimization Patterns

Performance Pattern: Simplified by Zoom

Reference Files

Testing Patterns

Visual Regression Checklist

When to Use This Skill

FAQ

More from mapbox/mapbox-agent-skills

Popular ai & agents skills