mapbox-mcp-devkit-patterns

어떤 스킬인가요?

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

Quick reference for using Mapbox MCP DevKit Server in AI coding workflows.

## What is DevKit?

MCP server that gives AI assistants access to Mapbox developer APIs for style management, token creation, validation, and documentation.

**Repo:** <https://github.com/mapbox/mcp-devkit-server>

## Setup

### Hosted (Recommended)

Use Mapbox's hosted server - no installation needed.

**Claude Desktop:**

```json
// ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
// %APPDATA%\Claude\claude_desktop_config.json (Windows)
{
  "mcpServers": {
    "mapbox-devkit-mcp": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp-devkit.mapbox.com/mcp"]
    }
  }
}
```

**Claude Code:**

User-level (all projects) in `~/.claude.json`:

```json
{
  "mcpServers": {
    "mapbox-devkit": {
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

Or project-level (specific project) in `.mcp.json`:

```json
{
  "mcpServers": {
    "mapbox-devkit": {
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

**Cursor:**

```json
// .cursor/mcp.json or ~/.cursor/mcp.json
{
  "mcpServers": {
    "mapbox-devkit": {
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

**VS Code with Copilot:**

```json
// mcp.json
{
  "servers": {
    "mapbox-devkit": {
      "type": "http",
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

### Self-Hosted (Advanced)

```bash
git clone https://github.com/mapbox/mcp-devkit-server.git
cd mcp-devkit-server && npm install && npm run build
```

Configure in Claude Desktop config:

```json
{
  "mcpServers": {
    "MapboxDevKitServer": {
      "command": "node",
      "args": ["/Users/username/github-projects/mcp-devkit-server/dist/esm/index.js"],
      "env": {
        "MAPBOX_ACCESS_TOKEN": "some token"
      }
    }
  }
}
```

## Core Tools

### Style Management

| Tool                    | Purpose                   | Example Use                                |
| ----------------------- | ------------------------- | ------------------------------------------ |
| **create_style_tool**   | Create new style          | "Create dark mode style with 3D buildings" |
| **list_styles_tool**    | List all styles           | "Show my styles"                           |
| **retrieve_style_tool** | Get style details         | "Show details of my light style"           |
| **update_style_tool**   | Modify existing style     | "Make roads more prominent"                |
| **delete_style_tool**   | Delete a style            | "Delete my test style"                     |
| **preview_style_tool**  | Generate preview URL      | "Preview this style at downtown SF"        |
| **style_builder_tool**  | Build style from template | "Create a style for navigation"            |
| **validate_style_tool** | Check style JSON          | "Validate this style"                      |
| **compare_styles_tool** | Compare two styles        | "Compare light vs dark style"              |
| **optimize_style_tool** | Optimize style JSON       | "Optimize this style for performance"      |

### Token Management

| Tool                  | Purpose               | Example Use                  |
| --------------------- | --------------------- | ---------------------------- |
| **create_token_tool** | Generate access token | "Create token for localhost" |
| **list_tokens_tool**  | Show all tokens       | "List my tokens and scopes"  |

### Validation & Analysis

| Tool                          | Purpose                | Example Use                               |
| ----------------------------- | ---------------------- | ----------------------------------------- |
| **validate_geojson_tool**     | Check GeoJSON          | "Validate this GeoJSON"                   |
| **validate_expression_tool**  | Check expression       | "Is this expression valid?"               |
| **geojson_preview_tool**      | Preview GeoJSON on map | "Preview this GeoJSON"                    |
| **check_color_contrast_tool** | Check WCAG contrast    | "Check if #FF0000 on #FFFFFF passes WCAG" |

### Geographic Utilities

| Tool                           | Purpose                    | Example Use                         |
| ------------------------------ | -------------------------- | ----------------------------------- |
| **bounding_box_tool**          | Get bounding box for area  | "Get bbox for San Francisco"        |
| **country_bounding_box_tool**  | Get country bounds         | "Get bounding box for France"       |
| **coordinate_conversion_tool** | Convert coordinate systems | "Convert lat/lng to Web Mercator"   |
| **tilequery_tool**             | Query tile data at point   | "What features at this coordinate?" |

### Feedback & Data

| Tool                   | Purpose            | Example Use            |
| ---------------------- | ------------------ | ---------------------- |
| **get_feedback_tool**  | Get feedback item  | "Get feedback #12345"  |
| **list_feedback_tool** | List user feedback | "Show recent feedback" |

### Documentation

| Tool                            | Purpose            | Example Use                       |
| ------------------------------- | ------------------ | --------------------------------- |
| **get_latest_mapbox_docs_tool** | Access Mapbox docs | "What are fill layer properties?" |

## Common Workflows

### Create Style

```
"Create a style for a real estate app:
- Emphasize property boundaries in purple
- Show parks in green
- Muted roads
- 3D buildings at zoom 15+"
```

Returns: Style ID and preview URL

### Create Scoped Token

```
"Create a token with:
- styles:read, fonts:read
- Restricted to: localhost, example.com"
```

### Validate Data

```
"Validate this GeoJSON:
{ \"type\": \"FeatureCollection\", ... }

Check for:
- Valid coordinates
- Required properties: name, address"
```

### Iterative Development

```
1. "Create a light style for a delivery app"
2. [View preview URL]
3. "Add restaurant POIs with icons"
4. "Make delivery zones semi-transparent"
5. [Iterate until satisfied]
```

## When to Use DevKit

| Scenario                    | Use DevKit | Use Direct APIs |
| --------------------------- | ---------- | --------------- |
| Development-time operations | ✅         | —               |
| Production runtime          | —          | ✅              |
| Style creation/updates      | ✅         | —               |
| Tile serving                | —          | ✅              |
| Token generation            | ✅         | —               |
| Map rendering               | —          | ✅              |
| Data validation             | ✅         | —               |
| High-frequency updates      | —          | ✅              |
| Learning/prototyping        | ✅         | —               |
| User-facing features        | —          | ✅              |
| Documentation lookup        | ✅         | —               |
| Client-side operations      | —          | ✅              |

## Validation Patterns

```javascript
// Validate before using
"Validate GeoJSON" → Fix issues → Create style

// Validate expressions
"Is ['case', ['<', ['get', 'pop'], 1000], 'small', 'large'] valid?"

// Convert coordinates
"Convert -122.4194, 37.7749 to Web Mercator"
```

## Token Scopes

| Scope             | Grants Access To     |
| ----------------- | -------------------- |
| **styles:read**   | Read styles          |
| **styles:write**  | Create/update styles |
| **fonts:read**    | Load fonts           |
| **datasets:read** | Read datasets        |
| **tokens:write**  | Create tokens        |
| **uploads:read**  | Read uploads         |

**Best practice:** Use minimal scopes + URL restrictions

## Example: Multi-Environment Setup

```
"Create 3 environments:

Dev:
- Token: all scopes, localhost only
- Style: app-dev (debug labels enabled)

Staging:
- Token: read-only, staging.example.com
- Style: app-staging (production-like)

Prod:
- Token: minimal scopes, example.com
- Style: app-prod (optimized)"
```

## Troubleshooting

| Issue                | Solution                                        |
| -------------------- | ----------------------------------------------- |
| DevKit not found     | Check MCP config path, restart AI assistant     |
| Style creation fails | Verify token has `styles:write` scope           |
| Token creation fails | Need `tokens:write` scope                       |
| Validation errors    | Check GeoJSON spec (RFC 7946), coordinate order |

## Integration Patterns

**With Mapbox Studio:**

- DevKit: Quick creation, AI iteration
- Studio: Fine-tuning, visual editing

**With Version Control:**

```
1. "Create style and save JSON to styles/map.json"
2. Review changes in git
3. Commit to repository
```

**With CI/CD:**

```
1. Style JSON in repo
2. Validate via DevKit in CI
3. Deploy to Mapbox on merge
```

## Resources

- [DevKit Server](https://github.com/mapbox/mcp-devkit-server)
- [MCP Protocol](https://modelcontextprotocol.io)
- [Style Spec](https://docs.mapbox.com/style-spec/)
- [Token Scopes](https://docs.mapbox.com/api/accounts/tokens/)

{
  "skill_name": "mapbox-mcp-devkit-patterns",
  "evals": [
    {
      "id": 1,
      "prompt": "I want to use an AI assistant to help me create and iterate on Mapbox styles. What Mapbox MCP DevKit tools are available for style work, and what workflow do you recommend?",
      "expectations": [
        "Identifies create_style_tool for creating new styles, update_style_tool for modifying existing styles",
        "Identifies preview_style_tool or retrieve_style_tool for viewing and inspecting styles",
        "Recommends the iterative workflow: describe style in natural language → create_style_tool → preview_style_tool → update_style_tool to refine",
        "Mentions validate_style_tool or style_builder_tool for validation during development"
      ]
    },
    {
      "id": 2,
      "prompt": "I'm working on a Mapbox style and I need to create separate tokens for development and production environments with different permission scopes. How can I do this with the MCP DevKit?",
      "expectations": [
        "Recommends create_token_tool to create scoped tokens for each environment",
        "Development token: broader scopes (styles:read, styles:write, fonts:read, etc.)",
        "Production token: minimal scopes — only what the app needs (typically styles:read, fonts:read, datasets:read)",
        "Recommends list_tokens_tool to view existing tokens and their scopes"
      ]
    },
    {
      "id": 3,
      "prompt": "Before shipping a new Mapbox style to production, what validation steps should I take using the MCP DevKit tools?",
      "expectations": [
        "Recommends validate_style_tool to check the style JSON is spec-compliant",
        "Recommends validate_expression_tool to check data expressions in layer paint/layout properties",
        "Recommends check_color_contrast_tool to verify text labels meet WCAG accessibility standards",
        "Recommends compare_styles_tool or style_comparison_tool to diff the new style against the current production style before deploying"
      ]
    }
  ]
}

# Design Patterns

## Pattern 1: Iterative Style Development

**Workflow:**

1. Describe desired style in natural language
2. AI creates initial style via MCP
3. View preview URL
4. Request adjustments
5. AI updates style via MCP
6. Repeat until satisfied

**Example conversation:**

```
You: "Create a style for a real estate app - emphasize property boundaries,
     show parks prominently, muted roads"

AI: [Creates style, returns ID and preview URL]

You: "Make the property boundaries purple and thicker"

AI: [Updates style]

You: "Perfect! Now add POI icons for schools and transit"

AI: [Updates style with symbols]
```

**Benefits:**

- No manual JSON editing
- Visual feedback via preview URLs
- Rapid iteration

## Pattern 2: Environment-Specific Tokens

**Workflow:**

1. Define requirements per environment
2. AI creates tokens with appropriate scopes/restrictions
3. Store securely in environment variables

**Example:**

```
You: "Create three tokens:
1. Development - all scopes, localhost only
2. Staging - read-only scopes, staging.example.com
3. Production - minimal scopes, example.com only"

AI: [Creates three tokens with specified configurations]
```

**Benefits:**

- Least-privilege access
- Domain restrictions prevent token misuse
- Clear separation of concerns

## Pattern 3: Validation-First Development

**Workflow:**

1. Design data structure
2. Validate GeoJSON before using
3. Validate expressions before adding to style
4. Catch errors early

**Example:**

```
You: "I have GeoJSON with restaurant locations. Validate it and check for
     any missing required properties"

AI: [Validates, reports any issues]

You: "Now create a style that displays these restaurants with icons sized
     by rating. Validate the expression first."

AI: [Validates expression, then creates style]
```

**Benefits:**

- Catch errors before deployment
- Ensure data integrity
- Faster debugging

## Pattern 4: Documentation-Driven Development

**Workflow:**

1. Ask about Mapbox capabilities
2. Get authoritative documentation
3. Implement with correct patterns
4. Validate implementation

**Example:**

```
You: "How do I create a choropleth map in Mapbox GL JS?"

AI: [Retrieves docs, provides pattern]

You: "Create a style with that pattern for population density data"

AI: [Creates style following documented pattern]
```

**Benefits:**

- Always use latest best practices
- No outdated Stack Overflow answers
- Official Mapbox guidance

## Integration with Existing Tools

### With Mapbox Studio

DevKit complements, doesn't replace Studio:

- **DevKit:** Quick iterations, automated workflows, AI assistance
- **Studio:** Visual editing, fine-tuning, team collaboration

**Pattern:** Use DevKit for initial creation, Studio for refinement.

### With Mapbox APIs

DevKit wraps Mapbox APIs but doesn't replace them:

- **DevKit:** Development-time operations via AI
- **APIs:** Production runtime operations

**Pattern:** Use DevKit during development, APIs in production code.

### With Version Control

**Pattern:** Save generated styles to git for review and rollback.

```
You: "Create a new style for the home page map and save the JSON to
     styles/home-map.json"

AI: [Creates style, writes JSON to file]

You: [Review, commit to git]
```

# Setup & Installation

## Prerequisites

- Mapbox account with access token
- AI coding assistant that supports MCP (Claude Code, Cursor, Windsurf, Cline, etc.)

## Option 1: Hosted Server (Recommended)

**Easiest setup** - Use Mapbox's hosted DevKit MCP server at:

```
https://mcp-devkit.mapbox.com/mcp
```

No installation required, just configure your AI assistant.

**Authentication:** The hosted server supports OAuth, so no token configuration needed! Simply add the server URL:

### For Claude Desktop

Add to `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows):

```json
{
  "mcpServers": {
    "mapbox-devkit-mcp": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp-devkit.mapbox.com/mcp"]
    }
  }
}
```

You'll be prompted to authenticate via OAuth on first use.

### For Claude Code

Claude Code supports both user-level and project-level MCP configuration:

**User-level** (applies to all projects) - `~/.claude.json`:

```json
{
  "mcpServers": {
    "mapbox-devkit": {
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

**Project-level** (specific project, can commit to git) - `.mcp.json` in repository root:

```json
{
  "mcpServers": {
    "mapbox-devkit": {
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

See [Claude Code settings documentation](https://code.claude.com/docs/en/settings) for more details on configuration scopes.

### For Cursor

Create or edit `.cursor/mcp.json` (project-local) or `~/.cursor/mcp.json` (global):

```json
{
  "mcpServers": {
    "mapbox-devkit": {
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

After saving, restart Cursor. Click "Needs authentication" when prompted and follow the OAuth flow.

### For VS Code with Copilot

Create or edit `mcp.json`:

```json
{
  "servers": {
    "mapbox-devkit": {
      "type": "http",
      "url": "https://mcp-devkit.mapbox.com/mcp"
    }
  }
}
```

After saving, refresh the MCP service in VS Code. Requires GitHub Copilot with MCP support enabled.

### For Windsurf/Cline

Similar configuration using the hosted URL with OAuth support.

## Option 2: Self-Hosted (Advanced)

For development, debugging, or customization:

```bash
# Clone the DevKit server
git clone https://github.com/mapbox/mcp-devkit-server.git
cd mcp-devkit-server

# Install dependencies
npm install

# Build the server
npm run build
```

**Configuration for self-hosted (Claude Desktop):**

```json
{
  "mcpServers": {
    "MapboxDevKitServer": {
      "command": "node",
      "args": ["/Users/username/github-projects/mcp-devkit-server/dist/esm/index.js"],
      "env": {
        "MAPBOX_ACCESS_TOKEN": "some token"
      }
    }
  }
}
```

Replace `/Users/username/github-projects/` with your actual path.

## Verify Installation

Ask your AI assistant:

```
"List the available Mapbox DevKit tools"
```

You should see 30+ tools including:

- **Style tools**: `create_style_tool`, `list_styles_tool`, `update_style_tool`, `delete_style_tool`, `preview_style_tool`, etc.
- **Token tools**: `create_token_tool`, `list_tokens_tool`
- **Validation tools**: `validate_geojson_tool`, `validate_style_tool`, `validate_expression_tool`
- **Geographic tools**: `bounding_box_tool`, `coordinate_conversion_tool`, `tilequery_tool`
- **Documentation**: `get_latest_mapbox_docs_tool`

# Troubleshooting

## DevKit not appearing in AI assistant

**Check:**

1. MCP server running? Check logs
2. Config file in correct location?
3. Token environment variable set?
4. Path to `index.js` correct?

**Solution:** Restart AI assistant after config changes.

## Style creation fails

**Check:**

1. Access token has `styles:write` scope
2. Style name is unique
3. JSON is valid Mapbox Style Spec

**Solution:** Use `validate_style_tool` tool first.

## Token creation fails

**Check:**

1. Access token has `tokens:write` scope
2. Requested scopes are valid
3. URL restrictions are well-formed

**Solution:** Check token scope documentation via DevKit.

## Validation errors

**Check:**

1. GeoJSON follows spec (RFC 7946)
2. Coordinates are [longitude, latitude] order
3. Properties match expected schema

**Solution:** Ask AI to explain validation errors.

## Example Workflows

### Build a Restaurant Finder

```
You: "I'm building a restaurant finder app. Create:
1. A light, neutral style emphasizing restaurants
2. A token for localhost with minimal scopes
3. Validate this GeoJSON with restaurant locations: [paste]"

AI: [Creates style, token, validates data]

You: "Add filters to show only 4+ star restaurants"

AI: [Updates style with expression]

You: "Generate a preview URL"

AI: [Returns preview]
```

### Create Multi-Environment Setup

```
You: "Set up styles and tokens for dev, staging, prod:
- Dev: Full access, localhost
- Staging: Read-only, staging.example.com
- Prod: Minimal scopes, example.com

Each environment needs its own style variant."

AI: [Creates 3 styles and 3 tokens with specifications]
```

### Validate Third-Party Data

```
You: "I received GeoJSON from a vendor. Validate it, check for:
- Correct coordinate order
- Valid geometry types
- Required properties: name, address, category"

AI: [Validates, reports issues]

You: "Fix the issues and save cleaned data to data/locations.json"

AI: [Fixes, saves file]
```

# Core Workflows

## 1. Style Management

**Create a style conversationally:**

```
"Create a dark mode Mapbox style with 3D buildings, emphasize parks in green,
and use blue for water. Name it 'app-dark-mode'."
```

The AI will use `create_style_tool` tool to:

- Generate style JSON following Mapbox Style Spec
- Upload to your Mapbox account
- Return style ID and preview URL

**Update existing style:**

```
"Update style mapbox://styles/username/style-id to make roads more prominent
and reduce building opacity to 0.6"
```

**Validate style:**

```
"Validate this style JSON: [paste style]"
```

## 2. Token Management

**Create scoped token:**

```
"Create a Mapbox token with these scopes:
- styles:read
- fonts:read
- datasets:read
Restrict it to domains: localhost, example.com"
```

**List existing tokens:**

```
"Show me all my Mapbox tokens and their scopes"
```

**Use case:** Generate tokens for different environments (development, staging, production) with appropriate restrictions.

## 3. Data Validation

**Validate GeoJSON:**

```
"Validate this GeoJSON and show any errors:
{
  \"type\": \"FeatureCollection\",
  \"features\": [...]
}"
```

**Validate expressions:**

```
"Is this a valid Mapbox expression?
['case', ['<', ['get', 'population'], 1000], 'small', 'large']"
```

**Coordinate conversion:**

```
"Convert longitude -122.4194, latitude 37.7749 from WGS84 to Web Mercator"
```

## 4. Documentation Access

**Get style spec info:**

```
"What properties are available for fill layers in Mapbox GL JS?"
```

**Check token scopes:**

```
"What token scopes do I need to use the Directions API?"
```

**Streets v8 fields:**

```
"What fields are available in the 'road' layer of Streets v8?"
```

## Best Practices

### Security

- **Never commit access tokens** - Use environment variables
- **Use scoped tokens** - Minimal necessary permissions
- **Add URL restrictions** - Limit to your domains
- **Rotate tokens regularly** - Generate new tokens periodically

### Style Management

- **Version your styles** - Save JSON to source control
- **Use meaningful names** - `prod-light-mode` not `style-123`
- **Document decisions** - Add comments explaining style choices
- **Preview before deploying** - Always check preview URL

### Validation

- **Validate early** - Check data before creating styles
- **Use strict validation** - Don't skip validation steps
- **Test expressions** - Validate before adding to styles
- **Verify coordinates** - Ensure correct format and bounds

### Documentation

- **Ask specific questions** - "What are fill-extrusion properties?"
- **Reference versions** - Specify GL JS version if relevant
- **Cross-reference** - Validate AI responses against official docs

---
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