Community生產力與協作github.com

mapbox/mapbox-web-integration-patterns

Mapbox GL JS 在主流網頁框架(React、Vue、Svelte、Angular)中的官方整合模式。涵蓋設定、生命週期管理、Token 處理、搜尋整合及常見陷阱。基於 Mapbox 的 create-web-app 脚手架工具。

mapbox-web-integration-patterns 是什麼?

此技能提供 Mapbox GL JS 在 React、Vue、Svelte 和 Angular 等現代網頁框架中的官方整合模式。開發者可以透過它學習如何正確設定地圖、管理元件生命週期(避免記憶體洩漏或重複渲染)、安全處理 Access Token、整合地理編碼搜尋功能,並避開常見的實作誤區。技能內容基於 Mapbox 官方推出的 create-web-app 脚手架工具,確保模式最佳且與最新 API 相容。它支援多種框架,但核心原則保持一致,讓團隊能在不同專案間統一開發風格。無論是初次整合地圖或是想要優化現有實作,這份指南都能節省大量除錯與試錯時間。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mapbox/mapbox-agent-skills/tree/main/skills/mapbox-web-integration-patterns

Installed? Explore more 生產力與協作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

mapbox-web-integration-patterns 是做什麼的?

Mapbox GL JS 在主流網頁框架(React、Vue、Svelte、Angular)中的官方整合模式。涵蓋設定、生命週期管理、Token 處理、搜尋整合及常見陷阱。基於 Mapbox 的 create-web-app 脚手架工具。

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

mapbox/mapbox-cartography

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.

mapbox/mapbox-data-visualization-patterns

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.

mapbox/mapbox-geospatial-operations

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

mapbox/mapbox-search-integration

Complete workflow for implementing Mapbox search in applications - from discovery questions to production-ready integration with best practices

mapbox/mapbox-style-patterns

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.

mapbox/mapbox-style-quality

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.

mapbox/mapbox-token-security

Security best practices for Mapbox access tokens, including scope management, URL restrictions, rotation strategies, and protecting sensitive data. Use when creating, managing, or advising on Mapbox token security.

mapbox/mapbox-web-performance-patterns

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.

相關技能