[skills] Add mapbox-integration-patterns skill

Adds comprehensive framework integration patterns based on create-web-app:

New Skill: mapbox-integration-patterns
- React pattern (useRef + useEffect + cleanup)
- Vue pattern (mounted + unmounted)
- Svelte pattern (onMount + onDestroy)
- Angular pattern (ngOnInit + ngOnDestroy + SSR handling)
- Vanilla JS patterns (with and without bundler)
- Next.js patterns (App Router and Pages Router)

Key Topics:
- Framework-specific lifecycle management
- Proper cleanup to prevent memory leaks
- Token management across different bundlers
- Mapbox Search JS integration
- Common mistakes and how to avoid them
- SSR handling for Angular and Next.js
- Testing patterns for maps

Based on official patterns from:
https://github.com/mapbox/create-web-app

This complements existing skills:
- mapbox-cartography: Design principles
- mapbox-token-security: Security best practices
- mapbox-style-patterns: Common style configurations

🤖 Generated with Claude Code

Author: mattpodwysocki

README.md

@@ -462,6 +462,7 @@ This repository includes [Agent Skills](https://agentskills.io) that provide dom
 - **🎨 mapbox-cartography**: Map design principles, color theory, visual hierarchy, typography
 - **🔐 mapbox-token-security**: Token management, scope control, URL restrictions, rotation strategies
 - **📐 mapbox-style-patterns**: Common style patterns and layer configurations for typical scenarios
+- **🔧 mapbox-integration-patterns**: Framework-specific integration patterns for React, Vue, Svelte, Angular, and vanilla JS
 
 Skills complement the MCP server by providing expertise (how to think about design) while tools provide capabilities (how to execute actions).
 

skills/README.md

@@ -83,6 +83,34 @@ Use this skill when:
 
 [View skill →](./mapbox-style-patterns/SKILL.md)
 
+### 🔧 mapbox-integration-patterns
+
+**Official integration patterns for Mapbox GL JS across popular web frameworks including React, Vue, Svelte, Angular, and vanilla JavaScript.**
+
+Use this skill when:
+
+- Setting up Mapbox GL JS in a new project
+- Integrating Mapbox into a specific framework
+- Adding Mapbox Search functionality
+- Implementing proper cleanup and lifecycle management
+- Debugging map initialization issues
+- Converting between frameworks
+- Reviewing code for integration best practices
+
+**Key topics:**
+
+- Framework-specific patterns (React, Vue, Svelte, Angular, Next.js)
+- Token management (environment variables across frameworks)
+- Lifecycle management and cleanup (preventing memory leaks)
+- Mapbox Search JS integration
+- Common mistakes and how to avoid them
+- SSR handling (Angular Universal, Next.js)
+- Testing patterns for maps
+
+**Based on:** Mapbox's official `create-web-app` scaffolding tool
+
+[View skill →](./mapbox-integration-patterns/SKILL.md)
+
 ## How Skills Work with the MCP Server
 
 The Mapbox MCP DevKit Server and Agent Skills work together: