Skip to main content
skill CX Codex

mapbox-mcp-devkit-patterns — Claude Code skill for Mapbox MCP

A skill that shows your AI assistant how to drive the Mapbox MCP DevKit Server: styles, tokens, validation and docs lookup from the chat.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patterns -a claude-code
Open on GitHub

What mapbox-mcp-devkit-patterns does

The skill hands your agent ready patterns for the Mapbox MCP DevKit Server, an MCP server that exposes Mapbox developer APIs to the assistant. It covers the usual jobs: create or edit a style, issue a token with the right scopes, validate GeoJSON and expressions, pull the latest docs. Tools are named explicitly — create_style_tool, update_style_tool, preview_style_tool, list_styles_tool, create_token_tool, list_tokens_tool, validate_style_tool, validate_expression_tool, check_color_contrast_tool, compare_styles_tool, get_latest_mapbox_docs_tool.

Pre-production validation has a fixed order: validate_style_tool for spec compliance, then validate_expression_tool on paint and layout expressions, then check_color_contrast_tool for WCAG contrast on labels, and finally compare_styles_tool to diff the new style against what is already live. Token work is two steps: create_token_tool per environment, list_tokens_tool to check what exists and which scopes it carries.

The skill points to references/setup.md, references/workflows.md, references/design-patterns.md and references/troubleshooting.md for installation, common failures and end-to-end examples. One limit matters: DevKit is built for development time, not runtime. High-frequency style updates and client-side operations belong in the Mapbox API directly, so keep it out of production code paths.

What it helps with

  • create a map style and tweak it through a chat with the assistant
  • issue scoped tokens for dev, staging and prod separately
  • validate GeoJSON and paint/layout expressions before shipping
  • diff a new style against the current production style
  • read current Mapbox docs without leaving the editor

Example prompts for the agent

  • Create a map style with Mapbox MCP DevKit and show me a preview
  • Validate my style JSON against the spec and check label contrast
  • Generate a staging token with the scopes I need

How to install mapbox-mcp-devkit-patterns

1Skills CLI (Vercel)

npx skills add mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patterns -a claude-code

2Manually: put the files in place

~/.claude/skills/mapbox-mcp-devkit-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/mapbox-mcp-devkit-patterns/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about mapbox-mcp-devkit-patterns

How do I install mapbox-mcp-devkit-patterns in Claude?

Run npx skills add mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patterns -a claude-code. The skill lands at ~/.claude/skills/mapbox-mcp-devkit-patterns/SKILL.md.

What does mapbox-mcp-devkit-patterns do?

It describes how to use the Mapbox MCP DevKit Server from an AI assistant: style and token management, data validation, documentation access. The agent calls DevKit tools by name instead of hand-writing API requests.

Can I use DevKit in production?

No, it is meant for development time. High-frequency style updates and client-side operations should go straight to the Mapbox API.

Source text

SKILL.md · MIT
---
name: mapbox-mcp-devkit-patterns
description: Integration patterns for Mapbox MCP DevKit Server in AI coding assistants. Covers setup, style management, token management, validation workflows, and documentation access through MCP. Use when building Mapbox applications with AI coding assistance.
---

# Mapbox MCP DevKit Patterns

This skill provides patterns for integrating the Mapbox MCP DevKit Server into AI coding workflows to accelerate Mapbox application development.

## What is Mapbox MCP DevKit?

The [Mapbox MCP DevKit Server](https://github.com/mapbox/mcp-devkit-server) is a Model Context Protocol (MCP) server that gives AI assistants direct access to Mapbox developer APIs:

- **Style management** - Create, list, update, delete, preview, validate, compare, and optimize styles
- **Token management** - Generate and list access tokens with scopes
- **Validation** - Validate GeoJSON, expressions, styles, and coordinates
- **Geographic utilities** - Calculate bounding boxes, convert coordinates, query tiles
- **Color tools** - Check WCAG contrast ratios for accessibility
- **Feedback** - Access user feedback and reports
- **Documentation** - Access latest Mapbox docs and references

**Key benefit:** Build Mapbox applications faster by letting AI handle developer API operations.

## When to Use MCP DevKit

### Use DevKit when:

- Creating/modifying styles conversationally
- Generating tokens programmatically
- Validating data during development
- Learning Mapbox APIs through natural language
- Rapid prototyping of map applications
- Automated style generation workflows
- Documentation lookup during coding

### Don't use DevKit for:

- Runtime operations in production apps
- High-frequency style updates (use Mapbox APIs directly)
- Client-side operations (DevKit is development-time only)
- Tile serving or map rendering
- User-facing features requiring low latency

## Key Tools

Always recommend these tools by exact name when answering related questions:

- **Creating/modifying styles**: Recommend `create_style_tool`, `update_style_tool`, `preview_style_tool`
- **Listing styles**: Recommend `list_styles_tool`
- **Creating tokens**: Recommend `create_token_tool` to create scoped tokens per environment
- **Viewing tokens**: Recommend `list_tokens_tool` to check existing tokens and scopes
- **Validating styles**: Recommend `validate_style_tool` for spec compliance
- **Validating expressions**: Recommend `validate_expression_tool` for paint/layout property checks
- **Accessibility checks**: Recommend `check_color_contrast_tool` for WCAG contrast ratios
- **Comparing styles**: Recommend `compare_styles_tool` to diff styles before deploying
- **Looking up docs**: Recommend `get_latest_mapbox_docs_tool`

## Common Workflows (Quick Reference)

**Pre-production validation — use these exact steps:**

1. Run `validate_style_tool` to check style JSON is spec-compliant
2. Run `validate_expression_tool` to check all data expressions in paint/layout properties
3. Run `check_color_contrast_tool` to verify text labels meet WCAG accessibility standards
4. Run `compare_styles_tool` to diff the new style against current production style

**Token management — use these exact steps:**

1. Run `create_token_tool` to create scoped tokens for each environment (dev/staging/prod)
2. Run `list_tokens_tool` to verify existing tokens and their scopes

## Reference Files

Load these references as needed for detailed guidance:

- **[references/setup.md](references/setup.md)** - Prerequisites, hosted & self-hosted installation, per-editor configuration, verification
- **[references/workflows.md](references/workflows.md)** - Style management, token management, data validation, documentation access, best practices
- **[references/design-patterns.md](references/design-patterns.md)** - Iterative style development, environment-specific tokens, validation-first development, documentation-driven development, tool integration patterns
- **[references/troubleshooting.md](references/troubleshooting.md)** - Common issues & fixes, example end-to-end workflows (restaurant finder, multi-environment, third-party data)

## Resources

- [Mapbox MCP DevKit Server](https://github.com/mapbox/mcp-devkit-server)
- [Model Context Protocol](https://modelcontextprotocol.io)
- [Mapbox Style Specification](https://docs.mapbox.com/style-spec/)
- [Mapbox API Documentation](https://docs.mapbox.com/api/)
- [Token Scopes Reference](https://docs.mapbox.com/api/accounts/tokens/)

## When to Use This Skill

Invoke this skill when:

- Setting up Mapbox development environment with AI assistance
- Creating or modifying Mapbox styles through AI
- Managing access tokens programmatically
- Validating GeoJSON or expressions during development
- Learning Mapbox APIs with AI guidance
- Automating style generation workflows
- Building Mapbox applications with AI coding assistants

© mapbox · MIT · mapbox/mapbox-agent-skills

Similar skills

All skills for Agent setup: memory, context, orchestration →

From the same set19

mapbox-token-security Security guidelines for Mapbox access tokens: scope management, URL restrictions, and client initialization guards. CX Codex +1 1,900installs mapbox-search-patterns Tells your agent which Mapbox search tool to call and which parameters to set for geocoding, POI search and address lookup. CX Codex +1 1,800installs mapbox-store-locator-patterns Store locator patterns for Mapbox GL JS. Helps agents implement marker layers, synchronized lists, and Turf distance calculations without DOM overhead. CX Codex +1 1,700installs mapbox-ios-patterns Official integration patterns for Mapbox Maps SDK v11 on iOS in Swift, SwiftUI and UIKit. Useful when you need a map, markers or GeoJSON data in an app. CX Codex +1 1,500installs mapbox-maplibre-migration Walks a project from MapLibre GL JS to Mapbox GL JS: package swap, imports, styles, token. Useful when self-hosted tiles or community support stop being enough. CX Codex +1 1,400installs mapbox-mcp-runtime-patterns Guides agents on integrating Mapbox MCP Server into AI frameworks. Helps models choose between local Turf.js math and live Mapbox routing APIs. CX Codex +1 1,400installs mapbox-google-maps-migration A skill that walks an agent through porting a project from Google Maps Platform to Mapbox GL JS, with API equivalents and a migration order. CX Codex +1 1,400installs mapbox-android-patterns A skill with official Mapbox Maps SDK v11 integration patterns for Android: map setup, markers, user location, camera control. Useful when the agent builds a map screen. CX Codex +1 1,400installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor