mapbox/mapbox-agent-skills
17 skills14.9k installs1.1k starsGitHub
Install
npx skills add https://github.com/mapbox/mapbox-agent-skillsSkills in this repo
1Mapbox Web Integration Patternsmapbox-web-integration-patterns is an agent skill that gives solo builders a compact integration guide for Mapbox GL JS across major web frameworks. Shipping a map in a SPA is easy to get wrong: duplicate Map instances leak GPU memory, state-driven effects recreate the map on every prop change, and layers added before `load` silently fail. This skill encodes the fix—single initialization with cleanup, empty dependency arrays for construction, and follow-on effects that mutate an existing map instance. It documents React `useRef` guards, the mandatory `load` callback before `addSource`/`addLayer`, and parallel notes for Vue, Svelte, Angular, and Next.js so you do not translate patterns by guesswork. Use it while implementing dashboards, delivery trackers, real-estate explorers, or field-service UIs where Mapbox is the rendering layer. You still need a Mapbox access token and style URL from your account; the skill does not replace Mapbox billing or token rotation policy. Intermediate complexity reflects framework fluency plus GL JS event model, not advanced custom shaders.1.2kinstalls2Mapbox Style Patternsmapbox-style-patterns is a compact reference skill for solo builders and small teams shipping Mapbox-powered maps in web or mobile clients. Rather than a multi-step workflow, it catalogs common layer type choices and expression recipes—category coloring with match, numeric sizing with interpolate, and zoom-gated visibility with step—so an agent does not hallucinate invalid style syntax. Use it during frontend build when you are wiring GeoJSON or tile sources and need consistent patterns for parks, roads, labels, heatmaps, 3D extrusions, or raster overlays. It assumes familiarity with Mapbox GL style specification concepts but lowers the trial-and-error cost for data-driven paint and layout properties. Pair it with your map initialization skill or codebase context so the agent applies patterns to the correct layer IDs and source layers.1.2kinstalls3Mapbox Web Performance PatternsMapbox Web Performance Patterns is an agent skill that turns Mapbox GL JS optimization into an ordered fix list for solo builders shipping location-heavy web or hybrid apps. It focuses on the failures users feel first: sequential map-then-data loading, oversized bundles, and DOM markers that collapse under real marker counts. The guide prescribes concrete JavaScript changes—starting fetches before map load, code-splitting geocoder and CSS, and choosing symbol layers when counts exceed roughly a hundred markers. It is meant during Ship when Lighthouse, RUM, or support tickets show slow first paint or janky pan/zoom, not when choosing Mapbox versus another basemap provider. Assumes you already integrate Mapbox GL JS and want measurable load and interaction wins without rewriting the whole map stack.1.2kinstalls4Mapbox Geospatial Operationsmapbox-geospatial-operations is an agent skill for Mapbox MCP workflows: when to call isochrone_tool once and batch containment with point_in_polygon_tool, when optimization_tool beats directions_tool for reordering stops, and when matrix_tool fits travel-time tables only. Solo builders adding delivery-radius features, last-mile routing, or store-locator logic use it to avoid expensive anti-patterns like hundreds of directions calls. The bundled evals frame real prompts—500 customers in a 30-minute Austin zone, eight NYC stops from a depot—so agents recommend efficient hybrid geometry-plus-routing strategies. It complements Mapbox token setup and UI map skills by focusing on operational MCP tool choice for backend and agent automation.1.1kinstalls5Mapbox CartographyMapbox Cartography is an expert-guidance agent skill for solo builders and small teams shipping map experiences with Mapbox. It encodes cartographic principles—visual hierarchy, color theory, typography, and landcover semantics—so agents do not produce illegible or emotionally wrong basemaps. Invoke it when you are designing or revising Mapbox styles, debating palette contrast for dark mode, or prioritizing what should read as primary versus background on navigation and discovery products. It is guidance rather than a deploy pipeline: pair it with Mapbox implementation skills for layers, sources, and runtime SDK setup. Strong hierarchy and restrained palettes reduce user confusion and support brand trust in location-heavy SaaS and mobile apps.1kinstalls6Mapbox Data Visualization Patternsmapbox-data-visualization-patterns is a concise Mapbox reference for solo builders who need to choose visualization approaches without rereading the entire GL JS docs. It centers on a decision matrix: regional polygons become choropleth fills, dense points become heatmaps or clusters, magnitude points become scaled circles, volume-like data uses fill-extrusion, and flows use lines. The skill explains how GeoJSON features carry custom properties and how Mapbox style expressions read those fields at render time. It fits indie SaaS dashboards, logistics apps, civic maps, and mobile map screens that already use Mapbox. Use it during Build when you are wiring layers, tuning paint/layout rules, or aligning design with the shape of your dataset. It is pattern-oriented rather than a full SDK bootstrap—pair it with your Mapbox setup and data pipeline skills.992installs7Mapbox Style QualityMapbox Style Quality is an agent skill that gives solo builders a concise quality gate for Mapbox style JSON and map UX. It is for anyone embedding Mapbox GL maps in a web or mobile product who needs styles that validate against the v8 specification, remain readable under WCAG contrast rules, and do not fail solely on color for colorblind users. The guide stresses required elements—sources, layers, and correct property references—and shows fix patterns for typical mistakes like dangling source IDs or invalid paint colors. Accessibility sections cover haloed labels, safe palettes, and simulators, while performance and testing themes help you avoid shipping a beautiful but unusable basemap. Invoke the skill while iterating on theme layers or before a release review when stakeholders care about inclusive map readability.980installs8Mapbox Search Integrationmapbox-search-integration is an agent skill that tells solo builders how to implement Mapbox place search in web apps, especially React maps with a typeahead. It steers you toward the Search Box API when you need addresses and POIs together, and toward Search JS React when you want a fast integrated UI with retrieve callbacks that drive map.flyTo(). When you need full control of dropdown styling and keyboard navigation, it points to Search JS Core so you do not reimplement debouncing and billing-related session token behavior by calling HTTP endpoints directly. The skill is for indie developers shipping location features without becoming Mapbox API experts overnight. Use it during frontend build when search UX is on the critical path, after you have a Mapbox token strategy but before you freeze component APIs.895installs9Mapbox Token Securitymapbox-token-security is a concise agent skill that teaches solo builders how Mapbox access tokens differ and which mistakes leak billing and data risk. It documents public pk tokens for client maps with URL restrictions, secret sk tokens strictly server-side, and temporary tk tokens for short-lived operations. The guide contrasts anti-patterns—hardcoding, console logging, committing .env—with environment variables, domain restrictions in the Mapbox dashboard, and keeping secrets in API routes only. Multi-phase use is real: you create tokens during Build integrations, but the skill’s canonical home is Ship security when you verify nothing sensitive ships to GitHub or the browser bundle. Pair it before any Search JS or GL JS work so autocomplete features do not accidentally embed sk tokens. It is reference-grade procedural knowledge, not an automated scanner.895installs10Mapbox Search Patternsmapbox-search-patterns teaches coding agents how to route user location questions to the correct Mapbox search capability instead of defaulting to one geocoder call. It contrasts search_and_geocode_tool for named places, brands, and street addresses with category_search_tool for generic types like coffee shops or EV chargers, and reverse_geocode_tool when the input is GPS coordinates needing human-readable context. Each section lists trigger phrases and anti-patterns so agents avoid category search for Starbucks-by-name or geocode search for plural museum queries. Solo builders embedding Mapbox in delivery apps, travel planners, or internal ops tools install this skill so agent tool choice matches Mapbox’s intended APIs, improving hit rate and fewer empty result sets. It is procedural knowledge for assistants already holding Mapbox MCP or agent tools—not a substitute for Mapbox account setup, tokens, or map rendering. Use during feature build and again when tuning prompts after user complaints about wrong search mode.848installs11Mapbox Store Locator Patternsmapbox-store-locator-patterns is a quick-reference agent skill for solo builders adding retail or service location finders on Mapbox. It defines a six-component architecture—map, GeoJSON data, interactive list, search and filter, user geolocation with distance, and optional turn-by-turn directions—so you do not assemble locators ad hoc in chat. The skill standardizes GeoJSON point features with storefront metadata and documents when to use HTML markers versus symbol layers versus clustered sources, which directly affects frame rate once you pass roughly one hundred pins. Snippets cover looping features into mapboxgl.Marker popups and adding symbol layers on load. Use it while scoping a brick-and-mortar or franchise directory, validating map performance before launch, or refactoring a naive “one marker per store” implementation that will not scale.764installs12Mapbox Ios Patternsmapbox-ios-patterns is a quick-reference agent skill for Mapbox Maps SDK v11 on iOS. Solo and indie builders shipping location features in SwiftUI or UIKit use it when wiring packages, access tokens, basic cameras, and point annotations without re-reading the full SDK docs. The skill compresses installation via Swift Package Manager, plist token configuration, and minimal working Map and MapViewController snippets into copy-paste anchors your coding agent can extend toward clustering, styles, and navigation later. It fits the build phase for mobile SaaS, consumer apps, and field tools where maps are a first-class screen. Expect reference-level guidance rather than a full app scaffold—pair it with your own architecture for networking, permissions, and offline behavior.673installs13Mapbox Google Maps Migrationmapbox-google-maps-migration is a Mapbox agent skill that gives solo builders a concise reference for replacing Google Maps JavaScript API with Mapbox GL JS. It highlights philosophical shifts—from imperative map objects to declarative GeoJSON-driven layers—and the coordinate order trap that breaks migrations (lat,lng versus lng,lat). The checklist walks through token setup, package install, marker strategy (HTML markers only at small scale; Symbol layers and clustering at volume), and Mapbox Geocoding API swaps. Code snippets cover map initialization, markers, lines, bounds fitting, and common event patterns so an agent can rewrite an existing Google-centric codebase incrementally. Ideal for indie SaaS dashboards, delivery apps, and location widgets where Google billing or performance ceilings pushed you toward Mapbox. Use during Build when you have a working Google map and need equivalent Mapbox behavior before Ship perf testing and Launch SEO pages that embed maps.645installs14Mapbox Mcp Devkit PatternsMapbox MCP DevKit Patterns is a quick-reference skill for solo builders embedding Mapbox into AI-assisted workflows. The DevKit MCP server exposes Mapbox developer APIs—style management, token creation, validation, and documentation—to assistants via the Model Context Protocol. Hosted setup is recommended: point Claude Desktop at mcp-remote, Claude Code and Cursor at the HTTP MCP URL, or VS Code Copilot at the same endpoint in mcp.json. Advanced users can self-host from the public GitHub repo. Use this when you are integrating maps into a SaaS or mobile agent project and want the agent to configure Mapbox assets correctly instead of guessing API steps. It is patterns and wiring, not a full cartography curriculum.644installs15Mapbox Android PatternsMapbox Android Patterns is an agent skill that encodes official Mapbox documentation into repeatable integration steps for solo and indie builders shipping location features on Android. It targets the build phase when you need Mapbox Maps SDK v11 configured correctly—access tokens in resources, annotations, user location, custom GeoJSON, style and camera control, and interaction handlers—without guessing APIs. The skill supports Kotlin, Jetpack Compose, and the traditional View system, and points to Mapbox guides and the mapbox-maps-android examples repo. Use it when your product shape is a mobile or hybrid SaaS app that depends on maps, and you want your coding agent to follow vendor-aligned patterns instead of hallucinated SDK calls. It does not replace Mapbox account setup, billing, or offline tile strategy; it accelerates correct first integration and common map UX patterns so you can ship map screens faster and reduce rework during ship and operate.640installs16Mapbox Maplibre MigrationMapbox MapLibre Migration is a quick-reference agent skill for solo builders who already ship maps with MapLibre GL JS and want official Mapbox hosting, Studio styles, and ecosystem APIs without rewriting every layer and event handler. The SKILL body frames migration as packaging and configuration change first: replace the npm package, add a Mapbox public token, point styles at mapbox:// URIs, and adopt hosted tiles instead of self-managed OSM or custom endpoints. Because the runtimes are roughly ninety-five percent API-compatible, the skill emphasizes what stays the same—sources, layers, cameras, and most interaction hooks—versus what must change for compliance, billing, and premium terrain or globe features. Use it when validate prototype maps need production-grade coverage, or during build when you are hardening a SaaS or mobile client before ship. It does not replace geocoding or directions product design; it orients the GL JS cutover so your agent can apply diffs consistently across one codebase.629installs17Mapbox Mcp Runtime PatternsMapbox MCP Runtime Patterns is a compact integration guide for solo and indie builders shipping location-aware agents. It explains how the Mapbox MCP server exposes geospatial capabilities through the Model Context Protocol so Claude Code, Cursor, and similar clients can call tools instead of hand-rolled HTTP glue. The skill groups tools into three bands: offline Turf.js operations that run locally at no API charge; Mapbox-hosted APIs where usage billing applies; and lightweight utility helpers for versioning and category listing. You reach for it during Build when you are selecting which MCP tools to enable, estimating cost exposure, and aligning agent prompts with stable tool names. It does not replace Mapbox account setup or token management, but it shortens the gap between “we need maps in the agent” and a production-safe tool surface that agents can invoke repeatedly.608installs