К основному содержанию
скилл CX Codex

mapbox-mcp-devkit-patterns — скилл для Claude Code: Mapbox через MCP

Скилл описывает, как подключить Mapbox MCP DevKit Server к ИИ-ассистенту и работать со стилями, токенами и валидацией прямо в чате.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patterns -a claude-code
Открыть на GitHub

Что делает mapbox-mcp-devkit-patterns

Скилл даёт агенту готовые шаблоны работы с Mapbox MCP DevKit Server — это MCP-сервер, который открывает ассистенту доступ к API Mapbox. Внутри описаны типовые сценарии: создать или поправить стиль, выпустить токен с нужными скоупами, проверить GeoJSON и выражения, посмотреть свежую документацию. Агент вызывает конкретные инструменты по именам: 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.

Отдельно прописан порядок проверки перед выкладкой: сначала validate_style_tool на соответствие спецификации, потом validate_expression_tool по выражениям в paint и layout, затем check_color_contrast_tool для контраста подписей по WCAG и в конце compare_styles_tool — сравнить новый стиль с тем, что уже в продакшене. Для токенов шаги такие: create_token_tool под каждое окружение, list_tokens_tool для проверки существующих и их скоупов.

Скилл ссылается на файлы references/setup.md, references/workflows.md, references/design-patterns.md и references/troubleshooting.md — в них установка, разбор частых ошибок и сквозные примеры. Важное ограничение: DevKit задуман для разработки, а не для рантайма. Частые обновления стилей в продакшене и клиентские операции он не тянет, поэтому там нужен прямой Mapbox API. Это повод не тащить его в прод-код.

Какие задачи решает

  • создать стиль карты и поправить его через диалог с ассистентом
  • выпустить токены со скоупами отдельно для dev, staging и prod
  • проверить GeoJSON и выражения paint/layout до выкладки
  • сравнить новый стиль с текущим продакшен-стилем перед деплоем
  • посмотреть актуальную документацию Mapbox, не выходя из редактора

Примеры запросов агенту

  • Создай стиль карты через Mapbox MCP DevKit и покажи превью
  • Проверь мой style JSON на соответствие спецификации и контраст подписей
  • Выпусти токен для staging с нужными скоупами

Как установить mapbox-mcp-devkit-patterns

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/mapbox-mcp-devkit-patterns/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора18

mapbox-token-security Набор правил безопасности для токенов Mapbox: разграничение публичных и секретных ключей, ограничение по URL и защита от тихих падений карты. CX Codex +1 1 900установок mapbox-search-patterns Подсказывает агенту, какой инструмент поиска Mapbox выбрать и какие параметры выставить для геокодинга, поиска POI и адресов. CX Codex +1 1 800установок mapbox-store-locator-patterns Паттерны для поиска заведений на карте через Mapbox GL JS. Скилл учит агента выводить маркеры через WebGL, фильтровать точки и считать расстояния с @turf/turf. CX Codex +1 1 700установок mapbox-ios-patterns Официальные шаблоны интеграции Mapbox Maps SDK v11 в iOS-приложения на Swift, SwiftUI и UIKit. Пригодится, когда нужно добавить карту, маркеры или геоданные. CX Codex +1 1 500установок mapbox-maplibre-migration Ведёт миграцию с MapLibre GL JS на Mapbox GL JS: замена пакета, импортов, стилей и токена. Пригодится, если упираетесь в свои тайлы или нужна официальная поддержка. CX Codex +1 1 400установок mapbox-mcp-runtime-patterns Скилл учит агента подключать Mapbox MCP Server к ИИ-приложениям. Он помогает модели выбирать между расчётами Turf.js и сетевыми API маршрутизации. CX Codex +1 1 400установок mapbox-google-maps-migration Скилл для перевода проекта с Google Maps Platform на Mapbox GL JS: таблицы соответствий методов, событий и маркеров, порядок миграции. CX Codex +1 1 400установок mapbox-android-patterns Скилл с официальными паттернами интеграции Mapbox Maps SDK v11 в Android: инициализация карты, маркеры, геопозиция, камера. Пригодится, когда агент пишет экран с картой. CX Codex +1 1 400установок

Похожие

maplibre-mapbox-migration maplibre Помогает перевести веб-приложение с Mapbox GL JS на открытую библиотеку MapLibre GL JS. Пригодится при отказе от коммерческой лицензии и смене источников тайлов. CX Codex +1 464установок syncfusion-react-maps Syncfusion Inc Помогает агенту собрать географическую карту на React: GeoJSON, маркеры, пузыри, легенда, хороплет. Пригодится, когда данные нужно показать по регионам. CX Codex +1 702установок maplibre-cartography maplibre Скилл для MapLibre GL JS: подбирает цвета подписей и значков, выстраивает визуальную иерархию и порядок слоёв. Пригодится, когда карта читается на векторной подложке, а на снимках пропадает. CX Codex +1 419установок geospatial-and-cartographic-visualization официальный OpenAI Скилл помогает спроектировать карту: выбрать проекцию, подложку, тип визуализации и стек. Пригодится для тематических карт, маршрутов и пространственных данных. CX Codex GP ChatGPT 13установок amap kaichen Вызывает веб-API AMap через локальные скрипты для геокодинга, расчёта маршрутов, поиска POI и погоды. Помогает агенту работать с картами без MCP-сервера. CX Codex +1 552установок map-animation iart-ai Скилл для анимированных карт в стиле Vox: камера летит над картой, падают пины, рисуются маршруты. Пригодится для объясняющего видео. CX Codex +1 763установок

Рядом в теме «Настройка агента: память, контекст, субагенты»

Все скиллы по теме «Настройка агента: память, контекст, субагенты» →

Вопросы о mapbox-mcp-devkit-patterns

Как установить mapbox-mcp-devkit-patterns в Claude?

Выполните npx skills add mapbox/mapbox-agent-skills --skill mapbox-mcp-devkit-patterns -a claude-code. Скилл появится по пути ~/.claude/skills/mapbox-mcp-devkit-patterns/SKILL.md.

Что делает mapbox-mcp-devkit-patterns?

Описывает, как работать с Mapbox MCP DevKit Server из ИИ-ассистента: управление стилями и токенами, валидация данных, доступ к документации. Агент вызывает инструменты DevKit по именам вместо ручных запросов к API.

Можно ли использовать DevKit в продакшене?

Нет, он рассчитан на время разработки. Частые обновления стилей и клиентские операции делайте напрямую через Mapbox API.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой