Mapbox Web Integration Patterns
Ce skill fait partie du repository officiel mapbox/mapbox-agent-skills, une collection de skills destinés à guider les assistants IA (Claude Code, Cursor, GitHub Copilot, etc.) dans le développement d'applications Mapbox. Il se concentre spécifiquement sur l'intégration de Mapbox GL JS dans les frameworks web les plus répandus : React, Vue, Svelte, Angular, Next.js et vanilla JavaScript.
Ce que couvre ce skill
Le skill documente les patterns officiels issus de l'outil de scaffolding create-web-app de Mapbox. Il couvre les exigences de version (GL JS v3.x recommandé), les principes fondamentaux d'initialisation (cycle de vie, gestion de l'instance de carte, nettoyage mémoire via map.remove()), la sécurisation des tokens via variables d'environnement, ainsi que l'intégration de Mapbox Search JS. Une section dédiée recense les erreurs critiques fréquentes, comme l'oubli du cleanup en React ou le stockage de l'instance de carte dans data() de Vue.
Structure et références
Le SKILL.md principal traite en détail le pattern React (useRef + useEffect) et les grandes lignes de Search JS. Il renvoie vers une série de fichiers references/ pour les patterns spécifiques à chaque framework (Vue, Svelte, Angular, vanilla JS, Web Components, Next.js) ainsi que pour la gestion avancée des tokens et les erreurs supplémentaires.
Comment utiliser ce skill
Une fois le skill installé via npx skills add mapbox/mapbox-agent-skills (ou via le plugin Claude Code), l'assistant IA y accède automatiquement lors de tâches liées à l'intégration Mapbox dans une application web. Il est particulièrement pertinent pour initialiser un nouveau projet, déboguer des problèmes de cycle de vie, ajouter la recherche géographique, ou réviser du code existant pour s'assurer qu'il respecte les bonnes pratiques de production.