diff --git a/GEMINI.md b/GEMINI.md
index 691c2d2..744cf0f 100644
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -1,18 +1,23 @@
## Google Maps Platform (GMP) Gemini CLI Extension Prompt
-You are a world-class expert on the Google Maps Platform (GMP) operating with access to specialized tools. Your primary purpose is to assist developers by providing accurate, production-ready code, architectural guidance, UX designs, and debugging assistance related to GMP.
+You are a world-class expert on the Google Maps Platform (GMP) operating with access to specialized tools and skills. Your primary purpose is to assist developers by providing accurate, production-ready code, architectural guidance, UX designs, and debugging assistance related to GMP.
+
+**๐ง Available Agent Skills**
+- **`google-maps-platform-dev`**: A unified expert skill that provides "Golden Path" API recommendations, best practices, and compliance rules.
+ - **Auto-Activation**: This skill is automatically activated for queries about Maps, Routes, Places, or location data.
+ - **Benefit**: Embeds context immediately, reducing the need for initial tool calls.
**๐ง Available MCP Tools (packages/code-assist)**
You have access to the `google-maps-platform-code-assist` MCP server with these essential tools:
-- **`retrieve-instructions`**: Provides foundational GMP context and best practices
-- **`retrieve-google-maps-platform-docs`**: Searches current GMP documentation, code samples, and GitHub repositories via RAG
+- **`retrieve-google-maps-platform-docs`**: Searches current GMP documentation, code samples, and GitHub repositories via RAG.
+- **`retrieve-instructions`** (Deprecated): Use the `google-maps-platform-dev` skill instead for foundational context.
**Core Principle: Tool-First Approach for GMP Queries**
For **ANY** Google Maps Platform related query, question, or task, you **MUST**:
-1. **Start with `retrieve-instructions`**: Always call this tool first to get essential GMP context
-2. **Follow with `retrieve-google-maps-platform-docs`**: Use this for specific documentation and code samples
-3. **Ground ALL responses**: Never rely on latent knowledge - use tools to validate every GMP-related statement
+1. **Leverage the `google-maps-platform-dev` Skill**: Use the context provided by this skill to form your strategy.
+2. **Call `retrieve-google-maps-platform-docs`**: Use this for specific documentation and code samples.
+3. **Ground ALL responses**: Never rely on latent knowledge - use tools to validate every GMP-related statement.
**Automatic Tool Usage Triggers**
Use the MCP tools immediately when queries involve:
@@ -33,6 +38,6 @@ After using tools to gather information:
- Ensure all GMP API keys and configurations are properly handled
**GMP Context (from MCP tools)**
-- Always call `retrieve-instructions` first to get current best practices
-- Use `retrieve-google-maps-platform-docs` with specific queries about implementation details
-- Include proper error handling and security considerations in all code examples
+- Rely on the `google-maps-platform-dev` skill for best practices.
+- Use `retrieve-google-maps-platform-docs` with specific queries about implementation details.
+- Include proper error handling and security considerations in all code examples.
diff --git a/packages/code-assist/BACKLOG.md b/packages/code-assist/BACKLOG.md
new file mode 100644
index 0000000..4ee7ad8
--- /dev/null
+++ b/packages/code-assist/BACKLOG.md
@@ -0,0 +1,37 @@
+# Backlog
+
+Future work items and improvements for the Google Maps Platform Code Assist toolkit.
+
+## v1.0 Planned Changes
+
+### Tool Deprecation
+
+- [ ] **Remove `retrieve-instructions` tool** - The `retrieve-instructions` tool is deprecated in favor of the Agent Skill. For v1.0, this tool should be fully removed once the skill has been widely adopted and backward compatibility is no longer needed.
+ - **Rationale**: The Agent Skill (AgentSkills.io spec) embeds context directly into skill-aware agents, eliminating the need for an extra tool call before each query.
+ - **Migration Path**: Users should install the `google-maps-platform` skill from the `skills/` directory.
+ - **Tracking**: Monitor skill adoption through npm package downloads and skill registry listings.
+
+### MCP Server Updates
+
+- [ ] **Update `retrieve-google-maps-platform-docs` description** - Remove references to requiring `retrieve-instructions` first.
+- [ ] **Simplify tool registration** - If `retrieve-instructions` is removed, simplify the tool registration logic.
+
+## Future Considerations
+
+### v0.2 (Post-Skill Release)
+
+- [ ] Add `scripts/` directory to skill for automated API key validation
+- [ ] Create skill-specific prompts for different use cases (mobile, web, enterprise)
+
+### v0.3+
+
+- [ ] Explore interactive skill commands (e.g., `/gmp-help` style)
+- [ ] Add skill versioning support for multiple versions per tool
+- [ ] Investigate dynamic skill updates (hot-reload without agent restart)
+- [ ] Skill composition with other skills (e.g., Firebase skill)
+
+## Completed
+
+- [x] Create Agent Skill following AgentSkills.io specification (v0.x)
+- [x] Bundle skill with npm package
+- [x] Document skill installation in README
diff --git a/packages/code-assist/CHANGELOG.md b/packages/code-assist/CHANGELOG.md
index 52454dd..f525e4b 100644
--- a/packages/code-assist/CHANGELOG.md
+++ b/packages/code-assist/CHANGELOG.md
@@ -2,6 +2,22 @@
All notable changes to this project will be documented in this file.
+## [Unreleased]
+
+### โจ Features
+
+* **Agent Skill (AgentSkills.io):** Added a Google Maps Platform Agent Skill following the [AgentSkills.io](https://agentskills.io) specification. The skill embeds foundational context directly into skill-aware agents, reducing latency by eliminating the need for an extra `retrieve-instructions` tool call before each query.
+ * `skills/google-maps-platform/SKILL.md` - Core instructions with API selection guides, best practices, and production readiness checklist
+ * `skills/google-maps-platform/references/code-examples.md` - Platform-specific examples for Web, Android, iOS, and Flutter with proper attribution IDs
+ * `skills/google-maps-platform/references/decision-trees.md` - API selection flowcharts for Maps, Places, Routes, and Data Visualization
+ * `skills/google-maps-platform/references/eea-compliance.md` - EU Digital Markets Act requirements
+ * `skills/google-maps-platform/references/attribution.md` - Attribution ID integration guide
+* **npm Package Update:** Skills directory is now bundled with the npm package for easy distribution.
+
+### ๐ Documentation
+
+* Added Agent Skill section to `README.md` with installation instructions for Claude Code, Cursor, Windsurf, and other skill-aware agents.
+
## [0.1.7] - 2025-08-28
### โจ Features
diff --git a/packages/code-assist/README.md b/packages/code-assist/README.md
index 419f45d..58832c1 100644
--- a/packages/code-assist/README.md
+++ b/packages/code-assist/README.md
@@ -59,6 +59,81 @@ The MCP server exposes the following tools for AI clients:
-----
+
+## Agent Skill (Optional)
+
+This package includes the **Google Maps Platform Developer Skill** (`google-maps-platform-dev`), a unified and optimized skill following the [AgentSkills.io](https://agentskills.io) specification. It embeds "Golden Path" best practices, API decision trees, and compliance rules directly into your agent.
+
+### Capabilities (In Scope)
+
+The skill is designed to handle the full development lifecycle for Google Maps Platform:
+
+* **API Selection**: Automatically selects the right API (e.g., Places API (New) vs. Places UI Kit) based on cost, performance, and compliance (EEA).
+* **"Golden Path" Defaults**: Enforces modern, stable defaults like Vector Maps, Advanced Markers, and Data-driven Styling.
+* **Implementation Patterns**: Provides production-ready code patterns for React, Android (Compose), iOS (SwiftUI), and Flutter.
+* **Compliance & Licensing**: Automatically handles attribution requirements and EEA (Digital Markets Act) compliance checks.
+* **Troubleshooting**: Diagnoses common issues like API key restrictions and quota limits.
+
+### Skill Installation
+
+The skill is located in the `skills/google-maps-platform-dev/` directory.
+
+#### Gemini CLI - Local Clone (Recommended)
+
+```bash
+# From the repo root
+gemini skills install ./packages/code-assist/skills/google-maps-platform-dev
+```
+
+#### Gemini CLI - From GitHub
+
+```bash
+# Install to user scope
+gemini skills install https://github.com/googlemaps/platform-ai.git \
+ --path packages/code-assist/skills/google-maps-platform-dev
+```
+
+#### npm + Gemini CLI
+
+```bash
+# Install the npm package
+npm install @googlemaps/code-assist-mcp
+
+# Install skill from node_modules
+gemini skills install ./node_modules/@googlemaps/code-assist-mcp/skills/google-maps-platform-dev
+```
+
+#### Claude Code
+
+```bash
+cp -r $(npm root -g)/@googlemaps/code-assist-mcp/skills/google-maps-platform-dev ~/.claude/skills/
+```
+
+#### Cursor / Windsurf / VS Code
+
+Add to your workspace's `.cursor/skills/` or `.windsurf/skills/` directory:
+```bash
+cp -r node_modules/@googlemaps/code-assist-mcp/skills/google-maps-platform-dev .cursor/skills/
+```
+
+### Skill Contents
+
+| File | Description |
+|------|-------------|
+| `SKILL.md` | Core instructions, "Golden Path" rules, and best practices |
+| `references/products-overview.md` | Full hierarchy of Maps, Routes, Places, and Environment APIs |
+| `references/places-overview.md` | Decision guide for Places API (New) vs. Places UI Kit |
+| `references/routes-navigation.md` | Decision guide for Routes API vs. Navigation SDK |
+| `references/environment-apis.md` | Guide for Air Quality, Pollen, and Solar APIs |
+| `resources/getting-started.md` | "DIRT Simple" API key setup and troubleshooting |
+| `resources/platform-*.md` | Implementation patterns for React, Android, iOS, etc. |
+
+> **Note:** The skill works best when combined with the MCP server (`retrieve-google-maps-platform-docs`), which provides real-time documentation search.
+
+
+
+-----
+
## Supported MCP Transports
diff --git a/packages/code-assist/package.json b/packages/code-assist/package.json
index 6b7e437..03865a6 100644
--- a/packages/code-assist/package.json
+++ b/packages/code-assist/package.json
@@ -8,7 +8,8 @@
"code-assist-mcp": "dist/index.js"
},
"files": [
- "dist"
+ "dist",
+ "skills"
],
"scripts": {
"clean": "rm -rf dist",
diff --git a/packages/code-assist/skills/google-maps-platform-dev/SKILL.md b/packages/code-assist/skills/google-maps-platform-dev/SKILL.md
new file mode 100644
index 0000000..0156bb1
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/SKILL.md
@@ -0,0 +1,251 @@
+---
+name: google-maps-platform-dev
+description: >
+ Provides expert guidance for Google Maps Platform development (Maps, Routes, Places, Environment APIs).
+ Use when: building store locators, adding maps to apps, implementing place search/autocomplete,
+ calculating routes/directions, validating addresses, displaying weather/air quality data,
+ or building location-aware AI agents. Covers Web (JavaScript), Android (Kotlin), iOS (Swift), Flutter, and React Native.
+ Retrieves current documentation via MCP. Defaults to modern APIs (Vector Maps, Advanced Markers, Routes API, Places UI Kit).
+version: 3.7.0
+license: Apache-2.0
+author: Google Maps Platform
+compatibility:
+ # Antigravity
+ google-antigravity: ">=1.0.0"
+ # Anthropic Tools
+ claude-code: ">=1.0.0"
+ roo-code: ">=3.0.0"
+ # IDE Extensions
+ cursor: ">=0.40.0"
+ windsurf: ">=1.0.0"
+ antigravity-ide: ">=1.0.0"
+ # Google Tools
+ gemini-cli: ">=1.0.0"
+ # OpenAI Tools
+ codex: ">=1.0.0"
+ # Generic AgentSkills.io Support
+ agentskills: ">=1.0.0"
+metadata:
+ category: development
+ tags:
+ - geocoding
+ - place-search
+ - map-visualization
+ - location-data-viz
+ - address-validation
+ - geo-data-analysis
+ - routing
+ - solutioning
+ - debugging
+ - google-maps
+ - geolocation
+ - maps
+ - routes
+ - places
+ - sdk
+ homepage: https://github.com/googlemaps/mcp-code-assist
+ documentation: https://developers.google.com/maps
+allowed-tools:
+ - mcp--google-maps-platform-code-assist--retrieve-google-maps-platform-docs
+ - mcp--googleMapsMcp--search_places
+ - mcp--googleMapsMcp--compute_routes
+ - mcp--googleMapsMcp--lookup_weather
+---
+
+# Google Maps Platform Code Assist (Unified & Optimized)
+
+
+You are an expert AI assistant specializing in Google Maps Platform development. Your mission is to help developers build production-ready applications by providing evidence-based, cost-effective, and developer-friendly guidance.
+
+
+
+- **Current Year:** 2026.
+- **Pricing Model:** Starter (~$100) / Essentials (~$275) / Pro (~$1,200) / Pay-as-you-go (Nav SDK).
+- **Key Directive:** Prioritize Stable Vector Maps, Advanced Markers, and UI Kits.
+- **EEA Mandate:** **Places UI Kit is REQUIRED** for map-based results in the European Economic Area.
+
+
+
+
+**ABSOLUTE RULES - You MUST follow these without exception:**
+
+1. **Scope Boundary**: ONLY answer questions about Google Maps Platform.
+2. **Grounding Mandate**: Rely **only** on facts present in your context or retrieved via tools.
+3. **Deprecation Awareness**:
+ - **Legacy Places API** -> Use **Places API (New)**.
+ - **Legacy Directions** -> Use **Routes API**.
+ - **Legacy Markers** -> Use **Advanced Markers**.
+4. **Attribution Requirement**: All code examples MUST include `gmp_mcp_codeassist_v0.1_github` using `internalUsageAttributionIds` (do NOT use `solution-channel` URL parameter).
+5. **Tooling Efficiency**: Do **NOT** call the `retrieve-instructions` MCP tool. This skill *is* the instruction set. Move directly to documentation retrieval.
+
+
+
+
+
+1. **Analyze & Plan:**
+ - Identify User Platform (Web/Android/iOS/Flutter/React Native) and functional intent.
+ - **CRITICAL:** Is the user new? Check `resources/getting-started.md` for Magic Links.
+
+
+
+2. **Credentials Check (MANDATORY):**
+ - Check if the user has provided an API key or if one exists in the environment (e.g., `.env`, variables).
+ - **IF NO API KEY IS FOUND:** You **MUST** append the "DIRT Simple API Key Guide" (see Knowledge Base) at the **very end** of your response, **AFTER** providing the solution. Do not block the solution.
+
+
+
+3. **Modernity & Stability Check (The "Golden Path"):**
+ - **Maps:** Default to **Vector Maps (JS)**. ALWAYS use a `mapId`.
+ - **Markers:** ALWAYS default to **Advanced Markers** (`AdvancedMarkerElement`).
+ - **Search:** Default to **Places UI Kit** (Cost-effective & EEA Compliant). Use **Places API (New)** for custom UIs (allowed in US/RoW, restricted in EEA for map-based results).
+ - **Navigation:** Use **Navigation SDK** for driver apps (Pay-as-you-go, Speed Limits included).
+ - **AI Grounding:** **Lite** (MCP) for prototypes, **Vertex AI** for production RAG.
+ - *Consult `references/products-overview.md` for the full hierarchy.*
+
+
+
+4. **Hypothesis-Driven Grounding (Multi-Pass Retrieval):**
+ - **RULE:** Before writing implementation code, form hypotheses about what components/APIs are needed.
+ - **CRITICAL:** Make MULTIPLE retrieval calls to ground EACH major aspect of the solution:
+ * **Pass 1:** Retrieve docs for the primary component (e.g., "Advanced Markers implementation")
+ * **Pass 2:** Retrieve docs for supporting features (e.g., "Places UI Kit styling customization")
+ * **Pass 3:** Retrieve docs for integration patterns (e.g., "Info window with Place Details card sizing")
+ - **Minimum 2-3 retrieval calls per non-trivial implementation**
+
+
+
+5. **Component-Specific Grounding:**
+ - **Places:** Check `references/places-overview.md` for New API vs UI Kit features.
+ - **Routes/Nav:** Check `references/routes-navigation.md` for Nav SDK vs Routes API choice.
+ - **Cross-Platform:** Check `references/cross-platform.md` for Flutter/RN packages.
+ - **Environment:** Check `references/environment-apis.md` for specific history/field limits.
+ - **AI Grounding:** Check `references/maps-grounding.md`.
+
+
+
+6. **Implementation:**
+ - Use `resources/platform-*.md` patterns.
+ - **CONSTRAINT:** Always use `internalUsageAttributionIds` (e.g. ``).
+
+
+
+
+
+## 1. DIRT Simple API Key Guide (Output this if key is missing)
+"**You need an API Key.** Here is the fastest way to get one:
+1. **Click this Magic Link:** [Start Setup Wizard](https://console.cloud.google.com/google/maps-apis/start)
+2. **Create a Project:** Follow the prompts (Agree -> Continue).
+3. **Billing:** Enter payment info (Required, but you get $200/mo free credit).
+4. **Get Key:** Copy the `AIza...` string shown at the end.
+5. **Paste it:** Put it in your `.env` file as `VITE_GOOGLE_MAPS_API_KEY=AIza...`"
+
+## 2. Stable Defaults (The Golden Path)
+- **Maps:** Vector Maps (requires `mapId`).
+- **Markers:** Advanced Markers (`AdvancedMarkerElement`).
+- **Search:** Places UI Kit (``).
+- **Driver Nav:** Navigation SDK (Mobile only).
+
+## 2.5. Places Quick Reference
+- **Ref:** `references/places-overview.md`
+- **UI Kit:** Mandatory for EEA map-based results. Best for cost & speed.
+- **New API:** Use for custom UIs (if outside EEA map restrictions) or backend logic.
+- **Aggregate:** Use for heatmaps.
+
+## 2.6. Routes & Nav Quick Reference
+- **Ref:** `references/routes-navigation.md`
+- **Routes API:** Server-side, eco-friendly, 2-wheeler.
+- **Nav SDK:** Mobile driver UI, free 0-1k/mo.
+
+## 2.7. Cross-Platform Quick Reference
+- **Ref:** `references/cross-platform.md`
+- **Flutter:** `google_maps_flutter`, `flutter_navigation_sdk`.
+- **React Native:** `react-native-maps`, `react-native-navigation-sdk`.
+
+## 3. Power-Up (MCP)
+
+### Gemini CLI
+```bash
+gemini mcp add google-maps-platform-code-assist npx -y @googlemaps/code-assist-mcp@latest
+```
+
+### Claude Code / Windsurf / Cursor / Roo Code
+Edit your `claude_desktop_config.json` or equivalent agent configuration:
+```json
+{
+ "mcpServers": {
+ "google-maps-platform-code-assist": {
+ "command": "npx",
+ "args": ["-y", "@googlemaps/code-assist-mcp@latest"]
+ }
+ }
+}
+```
+
+
+
+
+ Build me a store locator.
+
+ 1. Store locator involves Map + Search + Markers + Info Windows.
+ 2. **Credentials Check:** No API key found in context.
+ 3. **Golden Path:** Vector Map + Places UI Kit + Advanced Markers.
+ 4. **Form Hypotheses:**
+ - H1: Need Advanced Markers for custom store pins
+ - H2: Need Places UI Kit for search/autocomplete
+ - H3: Need Place Details card in info window (requires sizing/styling)
+ - H4: Need to match app's CSS theme to Place Details
+ 5. **Multi-Pass Retrieval Plan:** Ground each hypothesis with docs.
+
+
+
+ retrieve-google-maps-platform-docs("Advanced Markers with custom HTML content")
+
+ retrieve-google-maps-platform-docs("Places UI Kit Autocomplete implementation")
+
+ retrieve-google-maps-platform-docs("Place Details Compact element in info window sizing and styling")
+
+
+ [After ALL Tool Outputs - synthesize grounded information]
+ For a production-ready store locator, I recommend:
+
+ **Architecture:**
+ 1. Vector Map with mapId for styling
+ 2. Advanced Markers for store locations
+ 3. Places Autocomplete for search
+ 4. Place Details Compact in info windows
+
+ **Key Implementation Details (from docs):**
+ - Info window container needs explicit sizing (320px width, 350px min-height)
+ - Override `.gm-style-iw-d { overflow: visible !important }` for proper display
+ - Use CSS custom properties to match your theme...
+
+ [... Full solution with grounded details ...]
+
+ ---
+ **You need an API Key.** [DIRT Simple Guide...]
+
+
+
+
+ I want to build a delivery driver app in Flutter.
+
+ 1. **Intent:** Driver app = Turn-by-turn navigation.
+ 2. **Platform:** Flutter.
+ 3. **Product:** **Navigation SDK** (Flutter package).
+ 4. **Pricing:** Free for first 1k destinations/mo.
+
+
+ For a delivery driver app in Flutter, you should use the official **Navigation SDK for Flutter**.
+
+ **Package:** `google_navigation_flutter`
+ **Why?**
+ - **Turn-by-Turn UI:** Native Android/iOS implementation wrapped for Flutter.
+ - **Features:** Speed limits, Lane guidance, Rerouting.
+ - **Pricing:** Pay-as-you-go (1k free destinations/mo).
+
+ **Resources:**
+ - [GitHub Repo](https://github.com/googlemaps/flutter-navigation-sdk)
+ - [Documentation](https://developers.google.com/maps/documentation/navigation/flutter)
+
+
+
\ No newline at end of file
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/attribution.md b/packages/code-assist/skills/google-maps-platform-dev/references/attribution.md
new file mode 100644
index 0000000..2c46334
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/attribution.md
@@ -0,0 +1,168 @@
+# Attribution Reference
+
+## Overview
+
+The Google Maps Platform Code Assist MCP server uses attribution IDs to track usage and enable analytics. This document describes how to properly include attribution in generated code.
+
+## Attribution ID
+
+**Current Attribution ID:** `gmp_mcp_codeassist_v0.1_github`
+
+This ID should be included in all generated code that makes requests to Google Maps Platform APIs.
+
+## Why Attribution Matters
+
+1. **Usage Analytics**: Helps Google understand how the MCP Code Assist is being used
+2. **Support Prioritization**: Enables better support for Code Assist users
+3. **Feature Development**: Informs which APIs and patterns are most commonly used
+4. **Issue Tracking**: Helps correlate issues reported with Code Assist usage
+
+## Implementation by Platform
+
+### Web (Maps JavaScript API)
+
+Include the attribution in the API loader:
+
+```html
+
+```
+
+### REST API Requests
+
+Include the attribution as a query parameter or header:
+
+```javascript
+// Using query parameter
+const url = new URL("https://places.googleapis.com/v1/places:searchText");
+url.searchParams.set("key", API_KEY);
+// Note: For REST APIs, attribution is typically tracked via the API key
+
+// Using custom header for internal tracking
+fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "X-Goog-Api-Key": API_KEY,
+ "X-Goog-FieldMask": "places.displayName,places.formattedAddress",
+ // Custom tracking header (if supported)
+ "X-Goog-Solution-Id": "gmp_mcp_codeassist_v0.1_github"
+ },
+ body: JSON.stringify({
+ textQuery: "restaurants in San Francisco"
+ })
+});
+```
+
+### Android SDK
+
+```kotlin
+// In your Application class or main activity
+class MyApplication : Application() {
+ override fun onCreate() {
+ super.onCreate()
+
+ // Initialize Places with attribution
+ Places.initializeWithNewPlacesApiEnabled(
+ this,
+ BuildConfig.MAPS_API_KEY
+ )
+
+ // Log attribution for analytics
+ Log.d("GMP", "Solution: gmp_mcp_codeassist_v0.1_github")
+ }
+}
+```
+
+### iOS SDK
+
+```swift
+// In your AppDelegate
+import GoogleMaps
+import GooglePlaces
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+ func application(
+ _ application: UIApplication,
+ didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
+ ) -> Bool {
+ // Initialize with API key
+ GMSServices.provideAPIKey("YOUR_API_KEY")
+ GMSPlacesClient.provideAPIKey("YOUR_API_KEY")
+
+ // Attribution tracking
+ print("GMP Solution: gmp_mcp_codeassist_v0.1_github")
+
+ return true
+ }
+}
+```
+
+### Flutter
+
+```dart
+// In your main.dart
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+
+void main() {
+ // Initialize with attribution logging
+ debugPrint('GMP Solution: gmp_mcp_codeassist_v0.1_github');
+ runApp(const MyApp());
+}
+```
+
+## Attribution ID Format
+
+The attribution ID follows this format:
+
+```
+gmp_mcp_codeassist_v{version}_{source}
+```
+
+| Component | Description | Example |
+|-----------|-------------|---------|
+| `gmp` | Google Maps Platform prefix | `gmp` |
+| `mcp` | MCP server identifier | `mcp` |
+| `codeassist` | Product name | `codeassist` |
+| `v{version}` | Version number | `v0.1` |
+| `{source}` | Distribution source | `github`, `npm` |
+
+## Version History
+
+| Version | Date | Notes |
+|---------|------|-------|
+| v0.1 | 2025-01 | Initial release |
+
+## Best Practices
+
+### DO:
+- โ
Include attribution in all generated code samples
+- โ
Use the exact attribution ID format
+- โ
Keep attribution IDs up to date with MCP server version
+- โ
Include attribution in comments if runtime inclusion isn't possible
+
+### DON'T:
+- โ Modify the attribution ID format
+- โ Remove attribution from generated code
+- โ Use attribution IDs from other products
+- โ Create custom attribution IDs without coordination
+
+## Verification
+
+To verify attribution is working:
+
+1. **Web**: Check Network tab in DevTools for `solutionChannel` parameter
+2. **REST**: Verify headers/parameters in request logs
+3. **Mobile**: Check console logs for attribution output
+
+## Related Documentation
+
+- [Google Maps Platform Attribution Requirements](https://developers.google.com/maps/documentation/javascript/overview#attribution_requirements)
+- [Terms of Service](https://cloud.google.com/maps-platform/terms)
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/capabilities-mapping.md b/packages/code-assist/skills/google-maps-platform-dev/references/capabilities-mapping.md
new file mode 100644
index 0000000..44f0d79
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/capabilities-mapping.md
@@ -0,0 +1,30 @@
+# Google Maps Platform: Capability Mapping (2026 Edition)
+
+## 1. Address Validation & Geocoding
+| Capability | JS | Web Services | Mobile (Android/iOS) |
+| :--- | :--- | :--- | :--- |
+| **Validate Address** | [Maps JS API](https://developers.google.com/maps/documentation/javascript/address-validation/overview) | [Address Validation API](https://developers.google.com/maps/documentation/address-validation/requests-validate-address) | Not Supported |
+| **Geocoding** | [Maps JS API](https://developers.google.com/maps/documentation/javascript/geocoding) | [Geocoding API](https://developers.google.com/maps/documentation/geocoding/requests-geocoding) | [Android](https://developers.google.com/maps/documentation/android-sdk/geocoding) / [iOS](https://developers.google.com/maps/documentation/ios-sdk/geocoding) |
+| **Address Descriptors** | Not Supported | [Geocoding API](https://developers.google.com/maps/documentation/geocoding/address-descriptors/requests-address-descriptors) | Not Supported |
+
+## 2. Maps Visualization
+| Capability | JS (Web) | Android | iOS |
+| :--- | :--- | :--- | :--- |
+| **Vector Maps** | **Default** | **Default** | **Default** |
+| **Photorealistic 3D** | [Preview](https://developers.google.com/maps/documentation/javascript/3d-maps-overview) | [Experimental](https://developers.google.com/maps/documentation/android-sdk/3d-maps) | [Experimental](https://developers.google.com/maps/documentation/ios-sdk/3d-maps) |
+
+## 3. Routes & Navigation
+| Capability | Routes API (Server) | Navigation SDK (Mobile) |
+| :--- | :--- | :--- |
+| **Turn-by-Turn UI** | โ No | โ
**Native UI** |
+| **Voice Guidance** | โ No | โ
**Included** |
+| **Speed Limits** | โ No | โ
**Included** |
+| **Lane Guidance** | โ No | โ
**Included** |
+| **Pricing** | ~$5-10 / 1k | **Free** (0-1k), ~$25 / 1k |
+
+## 4. Environment
+| Capability | Product | History Depth |
+| :--- | :--- | :--- |
+| **Weather** | [Weather API](https://developers.google.com/maps/documentation/weather) | **24 Hours** |
+| **Air Quality** | [Air Quality API](https://developers.google.com/maps/documentation/air-quality) | **30 Days** |
+| **Pollen** | [Pollen API](https://developers.google.com/maps/documentation/pollen) | None (Forecast only) |
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/cross-platform.md b/packages/code-assist/skills/google-maps-platform-dev/references/cross-platform.md
new file mode 100644
index 0000000..e8fd258
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/cross-platform.md
@@ -0,0 +1,54 @@
+# Cross-Platform Support: Flutter & React Native
+
+Google Maps Platform offers official support for modern cross-platform frameworks.
+
+## 1. Flutter (Official)
+**Main Repo:** [github.com/googlemaps/flutter-google-maps-packages](https://github.com/googlemaps/flutter-google-maps-packages)
+
+Google maintains a monorepo containing packages for Maps, Places, and related utilities.
+
+### Packages
+* **google_maps_flutter:** The core map widget.
+ * [Pub.dev](https://pub.dev/packages/google_maps_flutter)
+ * Supports: Markers, Polylines, Polygons, Tile Overlays.
+* **google_maps_flutter_android** / **google_maps_flutter_ios:** Platform implementations.
+* **google_places_flutter:** (Note: Often community maintained, check `flutter_google_places_sdk` for official wrapper or use HTTP directly for Places API New).
+
+### Navigation SDK for Flutter
+* **Status:** Available!
+* **Repo:** [github.com/googlemaps/flutter-navigation-sdk](https://github.com/googlemaps/flutter-navigation-sdk)
+* **Docs:** [developers.google.com/maps/documentation/navigation/flutter](https://developers.google.com/maps/documentation/navigation/flutter)
+
+---
+
+## 2. React Native (Community & Official)
+**Main Repo:** [github.com/react-native-maps/react-native-maps](https://github.com/react-native-maps/react-native-maps)
+
+While `react-native-maps` is the standard community library, Google provides specific support for Navigation.
+
+### Packages
+* **react-native-maps:** The de-facto standard for Map Visualization.
+ * Supports: Apple Maps (iOS) and Google Maps (iOS/Android).
+ * **Tip:** Use `provider={PROVIDER_GOOGLE}` to force Google Maps on iOS.
+
+### Navigation SDK for React Native
+* **Status:** Available!
+* **Repo:** [github.com/googlemaps/react-native-navigation-sdk](https://github.com/googlemaps/react-native-navigation-sdk)
+* **Docs:** [developers.google.com/maps/documentation/navigation/react-native](https://developers.google.com/maps/documentation/navigation/react-native)
+* **Features:** Wraps the native Android/iOS Navigation SDKs for a full turn-by-turn experience in RN.
+
+---
+
+## 3. GitHub Quick Links Index
+
+| Product | Language/Framework | Repository |
+| :--- | :--- | :--- |
+| **JS Samples** | JavaScript/TS | [googlemaps/js-api-samples](https://github.com/googlemaps/js-api-samples) |
+| **React Components** | React (Web) | [googlemaps/react-wrapper](https://github.com/googlemaps/react-wrapper) |
+| **Android Samples** | Kotlin | [googlemaps/android-samples](https://github.com/googlemaps/android-samples) |
+| **iOS Samples** | Swift | [googlemaps/maps-sdk-for-ios-samples](https://github.com/googlemaps/maps-sdk-for-ios-samples) |
+| **Flutter Maps** | Dart | [googlemaps/flutter-google-maps-packages](https://github.com/googlemaps/flutter-google-maps-packages) |
+| **Flutter Nav** | Dart | [googlemaps/flutter-navigation-sdk](https://github.com/googlemaps/flutter-navigation-sdk) |
+| **React Native Nav** | JS/TS | [googlemaps/react-native-navigation-sdk](https://github.com/googlemaps/react-native-navigation-sdk) |
+| **Node.js Client** | Node.js | [googlemaps/google-maps-services-js](https://github.com/googlemaps/google-maps-services-js) |
+| **Python Client** | Python | [googlemaps/google-maps-services-python](https://github.com/googlemaps/google-maps-services-python) |
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/decision-trees.md b/packages/code-assist/skills/google-maps-platform-dev/references/decision-trees.md
new file mode 100644
index 0000000..760119e
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/decision-trees.md
@@ -0,0 +1,271 @@
+# API Selection Decision Trees
+
+## Overview
+
+Use these decision trees to select the appropriate Google Maps Platform API for your use case. Always verify with the latest documentation via `retrieve-google-maps-platform-docs`.
+
+---
+
+## Maps Display Decision Tree
+
+```
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ โ Need to display a โ
+ โ map to users? โ
+ โโโโโโโโโโโโโฌโโโโโโโโโโโโโโ
+ โ
+ โโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโ
+ โผ โผ โผ
+ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+ โ Web โ โ Mobile โ โ Static โ
+ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ
+ โ โ โ
+ โผ โ โผ
+ โโโโโโโโโโโโโโโโโโ โ โโโโโโโโโโโโโโโโโโโโ
+ โ Maps JavaScriptโ โ โ Maps Static API โ
+ โ API โ โ โ (Image only) โ
+ โโโโโโโโโฌโโโโโโโโโ โ โโโโโโโโโโโโโโโโโโโโ
+ โ โ
+ โโโโโโโโโดโโโโโโโโ โโโโโโโดโโโโโโ
+ โผ โผ โผ โผ
+โโโโโโโโโโ โโโโโโโโโโ โโโโโโโโโโ โโโโโโโโโโ
+โ React โ โVanilla โ โAndroid โ โ iOS โ
+โ App โ โ JS โ โ App โ โ App โ
+โโโโโฌโโโโโ โโโโโฌโโโโโ โโโโโฌโโโโโ โโโโโฌโโโโโ
+ โ โ โ โ
+ โผ โผ โผ โผ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ@vis.gl/ โโDynamic โโMaps SDK โโMaps SDK โ
+โreact-google-โโLibrary โโ for โโ for โ
+โmaps โโImport โโAndroid โโ iOS โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+### Web Map Selection
+
+| Requirement | Recommended Solution |
+|-------------|---------------------|
+| Interactive map with markers | Maps JavaScript API + AdvancedMarkerElement |
+| React application | @vis.gl/react-google-maps |
+| Angular application | @angular/google-maps |
+| Vue application | @fawmi/vue-google-maps or google-maps-loader |
+| Custom data visualization | Deck.gl + Maps JavaScript API |
+| 3D map experience | Maps JavaScript API with WebGL overlays |
+| Simple embed (no code) | Maps Embed API |
+| Static image (email, PDF) | Maps Static API |
+
+### Mobile Map Selection
+
+| Platform | Primary SDK | Alternative |
+|----------|-------------|-------------|
+| Android (Kotlin/Java) | Maps SDK for Android | Maps Compose library |
+| Android (Jetpack Compose) | Maps Compose | - |
+| iOS (Swift) | Maps SDK for iOS | SwiftUI wrapper |
+| iOS (SwiftUI) | Maps SDK for iOS | - |
+| Flutter | google_maps_flutter | - |
+| React Native | react-native-maps | - |
+
+---
+
+## Places API Decision Tree
+
+```
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ โ What do you need โ
+ โ to do with places? โ
+ โโโโโโโโโโโโโฌโโโโโโโโโโโโโโ
+ โ
+ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโผโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโ
+ โผ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โSearch โ โAutocom- โ โGet โ โFind โ โGet โ
+โby text โ โplete โ โdetails โ โnearby โ โphotos โ
+โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ
+ โ โ โ โ โ
+ โผ โผ โผ โผ โผ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ Places API (New) โ
+โ places.googleapis.com โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+### Places API Endpoints
+
+| Use Case | Endpoint (New API) | Key Features |
+|----------|-------------------|--------------|
+| Text search | `searchText` | Natural language queries |
+| Nearby search | `searchNearby` | Location + radius + type |
+| Place details | `places/{placeId}` | Field masks for cost optimization |
+| Autocomplete | `places:autocomplete` | Session tokens reduce cost |
+| Place photos | `places/{placeId}/photos/{name}/media` | Max dimensions supported |
+
+### Field Mask Best Practices
+
+Always use field masks to request only needed data:
+
+```javascript
+// โ Expensive - fetches all fields
+const response = await fetch(`https://places.googleapis.com/v1/places/${placeId}`, {
+ headers: {
+ "X-Goog-Api-Key": API_KEY,
+ "X-Goog-FieldMask": "*" // Don't do this!
+ }
+});
+
+// โ
Cost-effective - only needed fields
+const response = await fetch(`https://places.googleapis.com/v1/places/${placeId}`, {
+ headers: {
+ "X-Goog-Api-Key": API_KEY,
+ "X-Goog-FieldMask": "displayName,formattedAddress,location"
+ }
+});
+```
+
+---
+
+## Routes API Decision Tree
+
+```
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ โ What routing need โ
+ โ do you have? โ
+ โโโโโโโโโโโโโฌโโโโโโโโโโโโโโ
+ โ
+ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโผโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโ
+ โผ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โSimple โ โDistance โ โMulti- โ โTurn-by- โ โFleet โ
+โAโB routeโ โmatrix โ โstop โ โturn nav โ โrouting โ
+โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ
+ โ โ โ โ โ
+ โผ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โRoutes โ โRoutes โ โRoutes โ โNavigationโ โRoute โ
+โAPI โ โAPI โ โAPI or โ โSDK โ โOptim. โ
+โcompute โ โcompute โ โRoute โ โ(mobile) โ โAPI โ
+โRoutes โ โRouteMatrixโ โOptim. โ โ โ โ โ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+```
+
+### Routes API Selection Guide
+
+| Use Case | API/Endpoint | Notes |
+|----------|--------------|-------|
+| Single route AโB | Routes API `computeRoutes` | Supports waypoints, traffic |
+| Multiple origins/destinations | Routes API `computeRouteMatrix` | Up to 625 elements |
+| Route optimization (TSP) | Route Optimization API | Optimizes waypoint order |
+| Turn-by-turn navigation | Navigation SDK | Mobile only (Android/iOS) |
+| Fleet management | Fleet Engine | Requires additional setup |
+
+### Travel Modes
+
+| Mode | Routes API Value | Notes |
+|------|-----------------|-------|
+| Driving | `DRIVE` | Default, includes traffic |
+| Walking | `WALK` | Pedestrian paths |
+| Bicycling | `BICYCLE` | Bike lanes preferred |
+| Transit | `TRANSIT` | Public transportation |
+| Two-wheelers | `TWO_WHEELER` | Motorcycles, scooters |
+
+---
+
+## Data Visualization Decision Tree
+
+```
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ โ What type of data โ
+ โ visualization needed? โ
+ โโโโโโโโโโโโโฌโโโโโโโโโโโโโโ
+ โ
+ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโผโโโโโโโโโโโโโโโโ
+ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โMarkers โ โHeatmaps โ โPolygons/โ โCustom โ
+โ(< 1000) โ โ โ โLines โ โoverlays โ
+โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ
+ โ โ โ โ
+ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โAdvanced โ โHeatmap โ โData โ โDeck.gl โ
+โMarker โ โLayer โ โLayer โ โ+ Maps โ
+โElement โ โ โ โ โ โJS API โ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+```
+
+### Visualization Library Selection
+
+| Data Volume | Visualization Type | Recommended Approach |
+|-------------|-------------------|---------------------|
+| < 100 markers | Standard markers | AdvancedMarkerElement |
+| 100-1000 markers | Clustered markers | MarkerClusterer library |
+| > 1000 points | Aggregated view | Heatmap Layer |
+| > 10000 points | WebGL rendering | Deck.gl overlay |
+| Polygons/shapes | Geographic boundaries | Data Layer |
+| Real-time updates | Streaming data | Custom WebGL overlay |
+
+---
+
+## Migration Decision Tree
+
+```
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ โ Using deprecated โ
+ โ APIs? โ
+ โโโโโโโโโโโโโฌโโโโโโโโโโโโโโ
+ โ
+ โโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโผโโโโโโโโโโโโโโโโ
+ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โgoogle. โ โPlaces โ โDirectionsโ โDistance โ
+โmaps. โ โAPI โ โService โ โMatrix โ
+โMarker โ โ(Legacy) โ โ โ โService โ
+โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ
+ โ โ โ โ
+ โผ โผ โผ โผ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+โAdvanced โ โPlaces โ โRoutes โ โRoutes โ
+โMarker โ โAPI โ โAPI โ โAPI โ
+โElement โ โ(New) โ โcompute โ โcompute โ
+โ โ โ โ โRoutes โ โRouteMatrixโ
+โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ
+```
+
+### Migration Priority
+
+| Legacy API | Modern Replacement | Migration Priority |
+|------------|-------------------|-------------------|
+| `google.maps.Marker` | `AdvancedMarkerElement` | **High** - Deprecated |
+| Places API (Legacy) | Places API (New) | **High** - New features |
+| Directions Service | Routes API | **Medium** - Better performance |
+| Distance Matrix Service | Routes API `computeRouteMatrix` | **Medium** |
+| Geocoding Service | Geocoding API (REST) | **Low** - Still supported |
+
+---
+
+## Quick Selection Matrix
+
+### By Use Case
+
+| I want to... | Use this API |
+|--------------|-------------|
+| Show a map on a website | Maps JavaScript API |
+| Show a map in a mobile app | Maps SDK (Android/iOS) |
+| Search for places by name | Places API (New) - Text Search |
+| Get place suggestions as user types | Places API (New) - Autocomplete |
+| Get directions between points | Routes API |
+| Calculate distances for multiple pairs | Routes API - computeRouteMatrix |
+| Convert address to coordinates | Geocoding API |
+| Convert coordinates to address | Geocoding API (reverse) |
+| Get a static map image | Maps Static API |
+| Validate an address | Address Validation API |
+
+### By Platform + Use Case
+
+| Platform | Map Display | Places | Routes |
+|----------|-------------|--------|--------|
+| Web (Vanilla JS) | Maps JS API | Places JS Library | Routes API (REST) |
+| Web (React) | @vis.gl/react-google-maps | Places JS Library | Routes API (REST) |
+| Android | Maps SDK | Places SDK | Routes API (REST) |
+| iOS | Maps SDK | Places SDK | Routes API (REST) |
+| Flutter | google_maps_flutter | google_places_flutter | Routes API (REST) |
+| Server-side | N/A | Places API (REST) | Routes API (REST) |
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/eea-compliance.md b/packages/code-assist/skills/google-maps-platform-dev/references/eea-compliance.md
new file mode 100644
index 0000000..b2461b2
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/eea-compliance.md
@@ -0,0 +1,147 @@
+# EEA Compliance Reference
+
+## European Economic Area (EEA) Terms of Service
+
+If a Customer's billing account address is in the European Economic Area, the Google Maps Platform EEA Terms of Service govern Customer's access to and use of Google Maps Platform Services.
+
+**Official Terms:** https://cloud.google.com/terms/maps-platform/eea/maps-service-terms
+
+## EEA Member States
+
+The EEA is composed of all European Union (EU) member states plus Iceland, Liechtenstein, and Norway:
+
+| Country | Flag | Status |
+|---------|------|--------|
+| Austria | ๐ฆ๐น | EU Member |
+| Belgium | ๐ง๐ช | EU Member |
+| Bulgaria | ๐ง๐ฌ | EU Member |
+| Croatia | ๐ญ๐ท | EU Member |
+| Cyprus | ๐จ๐พ | EU Member |
+| Czech Republic | ๐จ๐ฟ | EU Member |
+| Denmark | ๐ฉ๐ฐ | EU Member |
+| Estonia | ๐ช๐ช | EU Member |
+| Finland | ๐ซ๐ฎ | EU Member |
+| France | ๐ซ๐ท | EU Member |
+| Germany | ๐ฉ๐ช | EU Member |
+| Greece | ๐ฌ๐ท | EU Member |
+| Hungary | ๐ญ๐บ | EU Member |
+| Ireland | ๐ฎ๐ช | EU Member |
+| Italy | ๐ฎ๐น | EU Member |
+| Latvia | ๐ฑ๐ป | EU Member |
+| Lithuania | ๐ฑ๐น | EU Member |
+| Luxembourg | ๐ฑ๐บ | EU Member |
+| Malta | ๐ฒ๐น | EU Member |
+| Netherlands | ๐ณ๐ฑ | EU Member |
+| Poland | ๐ต๐ฑ | EU Member |
+| Portugal | ๐ต๐น | EU Member |
+| Romania | ๐ท๐ด | EU Member |
+| Slovakia | ๐ธ๐ฐ | EU Member |
+| Slovenia | ๐ธ๐ฎ | EU Member |
+| Spain | ๐ช๐ธ | EU Member |
+| Sweden | ๐ธ๐ช | EU Member |
+| Iceland | ๐ฎ๐ธ | EFTA/EEA |
+| Liechtenstein | ๐ฑ๐ฎ | EFTA/EEA |
+| Norway | ๐ณ๐ด | EFTA/EEA |
+
+**Important Notes:**
+- Switzerland ๐จ๐ญ is **NOT** in the EEA
+- United Kingdom ๐ฌ๐ง is **NOT** in the EEA (post-Brexit)
+
+## EEA Location Detection Process
+
+When handling user requests, follow this process:
+
+### Step 1: Scan for Locations
+Parse the user's prompt to identify any geographical entities:
+- Countries
+- Cities
+- States/Provinces
+- Regions
+- Postal codes
+- Specific addresses
+- Coordinates (lat/lng)
+
+### Step 2: Determine the Country
+For locations that are not countries:
+- "Munich" โ Germany
+- "Paris" (in European context) โ France
+- "Barcelona" โ Spain
+- Use context to resolve ambiguous city names
+
+### Step 3: Verify Against EEA List
+Check if the identified country is in the EEA member list above.
+
+### Step 4: Consider Special Territories
+These overseas territories of EEA members are also covered:
+- Canary Islands (Spain)
+- Azores and Madeira (Portugal)
+- French overseas departments (Martinique, Guadeloupe, Rรฉunion, French Guiana, Mayotte)
+
+## Places API Availability in EEA
+
+**CRITICAL:** In the EEA, **Places UI Kit is the ONLY option** for Places functionality.
+
+| Product | Available in EEA? |
+|---------|-------------------|
+| **Places UI Kit** | โ
**Yes** - Required for EEA |
+| Extended Component Library | โ No |
+| Places API (New) | โ No |
+| Places API (Legacy) | โ No |
+| Geocoding API | โ
Yes |
+| Address Validation API | โ
Yes |
+
+**What this means:**
+- If building for EEA users, you **must** use Places UI Kit for autocomplete, place details, and search
+- Places UI Kit is available as HTML Web Components (vanilla JS), React, Android Compose, and SwiftUI
+- On web, you can use Places UI Kit directly as standard HTML elements - no framework required
+
+## Compliance Actions
+
+When a user's request involves EEA locations:
+
+### 1. Acknowledge EEA Terms
+Inform the user that EEA-specific terms may apply.
+
+### 2. Rewrite Queries for Compliance
+Before calling `retrieve-google-maps-platform-docs`, append compliance context:
+
+**Original:** "I want to use Places Nearby Search API in Sweden to search for restaurants."
+
+**Rewritten:** "I want to use Places Nearby Search API in Sweden to search for restaurants, respecting 'https://cloud.google.com/terms/maps-platform/eea/maps-service-terms', provide alternatives"
+
+### 3. Suggest Compliant Alternatives
+Some API features may have restrictions in the EEA. Always check for and suggest compliant alternatives when available.
+
+## Digital Markets Act (DMA) Considerations
+
+The EU Digital Markets Act may affect how certain Google Maps Platform features operate in the EEA. Key considerations:
+
+1. **Data Portability**: Users may request export of their location data
+2. **Interoperability**: Consider integration requirements with third-party services
+3. **Consent Requirements**: Enhanced consent flows may be required for location data
+
+## Sample Compliance Check Code
+
+```typescript
+const EEA_COUNTRIES = new Set([
+ 'AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR',
+ 'DE', 'GR', 'HU', 'IS', 'IE', 'IT', 'LV', 'LI', 'LT', 'LU',
+ 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE'
+]);
+
+function isEEACountry(countryCode: string): boolean {
+ return EEA_COUNTRIES.has(countryCode.toUpperCase());
+}
+
+function getEEATermsDisclaimer(): string {
+ return `If your billing account is in the EEA, the Google Maps Platform
+EEA Terms of Service apply. See:
+https://cloud.google.com/terms/maps-platform/eea/maps-service-terms`;
+}
+```
+
+## Related Documentation
+
+- [Google Maps Platform Terms of Service](https://cloud.google.com/maps-platform/terms)
+- [EEA Service-Specific Terms](https://cloud.google.com/terms/maps-platform/eea/maps-service-terms)
+- [Google Cloud Geographic Terms](https://cloud.google.com/terms/maps-platform/eea)
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/environment-apis.md b/packages/code-assist/skills/google-maps-platform-dev/references/environment-apis.md
new file mode 100644
index 0000000..4c6bb55
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/environment-apis.md
@@ -0,0 +1,57 @@
+# Environment APIs Deep Dive (2026)
+
+This document details the specific capabilities, history depth, and fields for the Environment suite. These are **separate APIs** and must be enabled individually.
+
+## 1. Weather API
+**Primary Use:** Applications requiring atmospheric conditions.
+**Pricing:** Pay-as-you-go (part of "Environment" SKU).
+
+| Feature | Depth / Range | Key Fields |
+| :--- | :--- | :--- |
+| **Current Conditions** | Real-time | Temp, Feels Like, Humidity, UV Index, Wind, Pressure. |
+| **Forecast (Hourly)** | Up to **240 hours** (10 days) | Precip %/Type, Wind Gusts, Cloud Cover, Visibility. |
+| **Forecast (Daily)** | Up to **10 days** | Max/Min Temp, Sunrise/Sunset, Moon Phase. |
+| **History (Hourly)** | Past **24 hours** | Verified historical conditions for debugging/analysis. |
+
+**Critical Note:** Does **NOT** include Air Quality or Pollen data. You must call those APIs separately.
+
+---
+
+## 2. Air Quality API
+**Primary Use:** Health apps, jogging/outdoor planning.
+**Pricing:** Pay-as-you-go.
+
+| Feature | Depth / Range | Key Fields |
+| :--- | :--- | :--- |
+| **Current Conditions** | Real-time | Universal AQI, Dominant Pollutant, Health Recommendations. |
+| **Forecast (Hourly)** | Up to **96 hours** (4 days) | Predicted AQI trajectory. |
+| **History (Hourly)** | Past **30 days** | Historical trends for analysis. |
+| **Heatmaps** | Tile Overlay | Visual color-coded tiles for map layers. |
+
+**Pollutants Covered:** CO, NO2, O3, PM2.5, PM10, SO2.
+
+---
+
+## 3. Pollen API
+**Primary Use:** Allergy management, travel planning.
+**Pricing:** Pay-as-you-go.
+
+| Feature | Depth / Range | Key Fields |
+| :--- | :--- | :--- |
+| **Forecast (Daily)** | Up to **5 days** | Universal Pollen Index (0-5), Plant Types. |
+| **History** | **None** | *This API does not provide historical data.* |
+| **Heatmaps** | Tile Overlay | 3 Layers: TREE, GRASS, WEED. |
+
+**Plant Coverage:** 15+ species including Birch, Olive, Oak, Grass, Ragweed.
+
+---
+
+## 4. Solar API
+**Primary Use:** Rooftop solar estimation, energy savings.
+**Pricing:** High-value SKU (Building Insights vs Data Layers).
+
+| Feature | Description | Output |
+| :--- | :--- | :--- |
+| **Building Insights** | Analysis for a single building. | Roof segment stats, sunshine hours, potential energy/savings. |
+| **Data Layers** | Raw GeoTIFFs. | `DSM` (Digital Surface Model), `RGB`, `Mask`, `AnnualFlux`, `MonthlyFlux`, `HourlyShade`. |
+| **Detected Arrays** | **New (2026)** | Identification of *existing* solar installations. |
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/maps-grounding.md b/packages/code-assist/skills/google-maps-platform-dev/references/maps-grounding.md
new file mode 100644
index 0000000..dd2156d
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/maps-grounding.md
@@ -0,0 +1,76 @@
+# Maps Grounding for AI (2026 Guide)
+
+Two distinct options exist for grounding AI agents with Google Maps data. Choose based on your infrastructure (Client vs. Server) and scale.
+
+## Comparison Matrix
+
+| Feature | **Grounding Lite** (MCP) | **Grounding in Vertex AI** |
+| :--- | :--- | :--- |
+| **Best For** | Prototyping, Client-side Agents (Claude, IDEs), Low volume. | Production Enterprise Apps, Server-side RAG, High volume. |
+| **Architecture** | **Model Context Protocol (MCP)** Server. Runs locally or via proxy. | **Vertex AI Service**. Fully managed server-side integration. |
+| **Dataset** | Live Places API, Routes (Basic), Weather. | Full 250M+ Places Database, highly optimized for RAG. |
+| **Pricing** | **Free** (during Experimental phase). Quotas apply. | **Tiered.** Free daily tier (~1.5k req), then ~$25 per 1k requests. |
+| **Models** | Any LLM supporting MCP (Claude 3.5, Gemini 2.0/3.0). | Gemini Models on Vertex AI (Pro/Flash). |
+| **Setup** | `npm install @googlemaps/code-assist-mcp` | Enable via Google Cloud Console > Vertex AI. |
+
+---
+
+## 1. Grounding Lite (The "Hacker's Choice")
+
+**Status:** Experimental
+**Cost:** Free (Usage quotas apply: ~100 req/min)
+
+A lightweight MCP server that exposes specific Google Maps tools to your agent.
+
+### Capabilities
+* **Search Places:** Text search returning Place IDs, locations, and summaries.
+* **Lookup Weather:** Current, hourly, and daily forecasts.
+* **Compute Routes:** Distance and duration *only* (No turn-by-turn steps).
+
+### Installation
+**Gemini CLI:**
+```bash
+gemini mcp add google-maps-platform npx -y @googlemaps/code-assist-mcp
+```
+
+**Claude Desktop / IDEs:**
+Add to your config:
+```json
+"google-maps-platform": {
+ "command": "npx",
+ "args": ["-y", "@googlemaps/code-assist-mcp"]
+}
+```
+
+---
+
+## 2. Grounding in Vertex AI (The "Enterprise Choice")
+
+**Status:** Preview / GA
+**Cost:** Pay-as-you-go (~$0.025 per query)
+
+A managed RAG (Retrieval-Augmented Generation) service integrated directly into the Vertex AI Studio and SDKs.
+
+### Capabilities
+* **Deep RAG:** Automatically retrieves, ranks, and synthesizes data from 250 million+ places.
+* **Fact Verification:** Reduces hallucinations by grounding responses in real-world data.
+* **Vertex Integration:** Works seamlessly with `Gemini 2.5 Pro`, `Gemini 3.0`.
+
+### Python SDK Example
+```python
+from vertexai.preview.generative_models import GenerativeModel, Tool, grounding
+
+# Define the Google Maps tool
+maps_tool = Tool.from_google_maps_retrieval(
+ retrieval=grounding.GoogleMapsRetrieval()
+)
+
+model = GenerativeModel("gemini-2.5-pro-preview-0409")
+
+response = model.generate_content(
+ "Find a quiet coffee shop in Chelsea, NYC open past 8 PM",
+ tools=[maps_tool]
+)
+
+print(response.text)
+```
\ No newline at end of file
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/places-overview.md b/packages/code-assist/skills/google-maps-platform-dev/references/places-overview.md
new file mode 100644
index 0000000..b75f215
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/places-overview.md
@@ -0,0 +1,86 @@
+# Places API & UI Kit: The Complete Guide (2026)
+
+**Top-Level Documentation:** [developers.google.com/maps/documentation/places](https://developers.google.com/maps/documentation/places)
+
+## 1. The Ecosystem at a Glance
+
+| Product | Best For | Key Features |
+| :--- | :--- | :--- |
+| **Places UI Kit** | **Default.** Rapid UI implementation. | Autocomplete, Place Details, Place List. **EEA Compliant.** |
+| **Places API (New)** | Custom UIs, Backend logic. | Text Search, Nearby Search, Field Masking (Cost Control). |
+| **Places Aggregate** | Analysis & Heatmaps. | Heatmaps, density counts, "top places" ranking. |
+| **Places Library (JS)** | Legacy Web Apps. | `places` library in Maps JS API. |
+
+---
+
+## 2. Places UI Kit (Recommended)
+**Documentation:** [developers.google.com/maps/documentation/javascript/places-ui-kit](https://developers.google.com/maps/documentation/javascript/places-ui-kit/overview)
+
+A set of pre-built, customizable UI components. Available for **Web (Web Components)**, **Android (Compose)**, and **iOS (SwiftUI)**.
+
+* **Key Components:**
+ * ``: Type-ahead search.
+ * ``: Rich details card (photos, reviews, hours).
+ * ``: List of results from a search.
+* **Pricing:** Cost-efficient (optimizes session handling).
+* **Styling:** CSS variables (Web) or Native Modifiers (Mobile).
+
+---
+
+## 3. Places API (New)
+**Documentation:** [developers.google.com/maps/documentation/places/web-service/op-overview](https://developers.google.com/maps/documentation/places/web-service/op-overview)
+
+The modern backend API using **Field Masks** to control costs.
+
+### When to use this vs. UI Kit?
+* **Custom UI:** You need a completely bespoke design (e.g., a circular list, custom animations).
+* **UX Experience:** You want "search as you type" without the standard dropdown behavior.
+* **Backend Logic:** You are filtering results before showing them to the user.
+
+**โ ๏ธ EEA Warning:** In the European Economic Area (EEA), you **cannot** use the Places API (New) to display results on a Google Map. You **MUST** use the Places UI Kit or Places Library (JS) for that specific "Map + Search" use case.
+
+### New Features (2026)
+* **EV Charging:** Connector types, power output, availability.
+* **Accessibility:** Wheelchair accessible entrance/restroom/seating.
+* **Generative AI Summaries:** "Vibe" descriptions (e.g., "Cozy spot for study").
+* **Field Masking:** You **MUST** specify fields (e.g., `places.displayName,places.formattedAddress`). If you don't ask, you don't get (and don't pay).
+
+### Core Methods
+* **Text Search (New):** "Spicy Vegetarian Food in Soho". Returns a list.
+* **Nearby Search (New):** "Cafe" within 500m of user.
+* **Place Details (New):** Fetch specific fields for a Place ID.
+* **Place Photos (New):** High-res access to user photos.
+
+---
+
+## 4. Places Aggregate API
+**Documentation:** [developers.google.com/maps/documentation/places-aggregate](https://developers.google.com/maps/documentation/places-aggregate)
+
+* **Use Case:** "Where are the most Italian restaurants?"
+* **Output:** Heatmap tiles or raw counts.
+* **Not for:** Finding a specific address.
+
+---
+
+## 5. Usage Patterns
+
+### A. The "Autocomplete" Flow (Standard)
+1. User types in **Places UI Kit** Autocomplete.
+2. UI Kit handles session token automatically.
+3. User selects a result -> Returns `Place ID` + `Lat/Lng`.
+4. Show on Map (if valid) or fetch Details.
+
+### B. The "Backend Proxy" Flow (Secure)
+1. Mobile app sends search query to *your* backend.
+2. Your backend calls **Places API (New) Text Search**.
+3. **Crucial:** Backend applies Field Mask (`*`) to fetch only needed data.
+4. Return sanitized JSON to mobile app.
+
+### C. Decision Matrix
+
+| Scenario | EEA Region? | Display on Map? | Recommended Solution |
+| :--- | :--- | :--- | :--- |
+| **Standard Search** | Yes | Yes | **Places UI Kit** (Mandatory) |
+| **Standard Search** | No | Yes | **Places UI Kit** (Cheaper) or **Places API** (Custom UI) |
+| **List Only (No Map)** | Any | No | **Places API** (New) |
+| **Backend Analysis** | Any | N/A | **Places API** (New) |
\ No newline at end of file
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/places-ui-kit.md b/packages/code-assist/skills/google-maps-platform-dev/references/places-ui-kit.md
new file mode 100644
index 0000000..48305a6
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/places-ui-kit.md
@@ -0,0 +1,655 @@
+# Places UI Kit - Complete Guide
+
+## Overview
+
+The Places UI Kit provides pre-built, customizable web components for displaying place information in Google Maps applications. These components handle attribution, styling, and data fetching automatically.
+
+**Official Documentation:**
+- [Place Details](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-details)
+- [Custom Styling](https://developers.google.com/maps/documentation/javascript/places-ui-kit/custom-styling)
+- [Store Finder Architecture](https://developers.google.com/maps/architecture/ui-kit-store-finder)
+
+---
+
+## Core Components
+
+### 1. PlaceDetailsElement (`gmp-place-details`)
+Full-featured component for comprehensive place information.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 2. PlaceDetailsCompactElement (`gmp-place-details-compact`)
+Space-efficient variant for sidebars, lists, and info windows.
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Required Setup
+
+### Script Import
+```javascript
+// Load the Places library
+await google.maps.importLibrary('places');
+```
+
+### HTML Structure
+Components must be nested within the map container or be positioned appropriately for your layout.
+
+---
+
+## Sizing and Layout
+
+### Critical: Container Sizing
+
+**IMPORTANT:** The UI kit components require explicit container sizing to display properly, especially in info windows.
+
+#### PlaceDetailsElement (Full)
+- **Recommended width:** 250px - 400px
+- **Height:** Set explicitly based on content needs
+- **Minimum height:** ~300px for standard content
+
+```css
+gmp-place-details {
+ display: block;
+ width: 350px;
+ min-height: 400px;
+ max-height: 500px;
+ overflow-y: auto;
+}
+```
+
+#### PlaceDetailsCompactElement
+- **Vertical orientation:** 180px - 300px width
+- **Horizontal orientation:** 180px - 500px width
+- **Note:** Images hidden below 350px width
+
+```css
+gmp-place-details-compact {
+ display: block;
+ width: 280px;
+ min-height: 200px;
+}
+
+/* Horizontal layout */
+gmp-place-details-compact[orientation="horizontal"] {
+ width: 400px;
+ min-height: 150px;
+}
+```
+
+---
+
+## Info Window Integration
+
+### Proper Info Window Sizing
+
+Info windows with Place Details cards require proper container configuration:
+
+```css
+/* Style the info window container */
+.gm-style-iw {
+ max-width: none !important;
+}
+
+.gm-style-iw-d {
+ overflow: visible !important;
+ max-height: none !important;
+}
+
+/* Place details card in info window */
+.info-window-content {
+ width: 320px;
+ min-height: 350px;
+ padding: 0;
+}
+
+.info-window-content gmp-place-details-compact {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+```
+
+### JavaScript: Creating Info Windows with Place Details
+
+```javascript
+// Create info window with proper sizing
+const infoWindow = new google.maps.InfoWindow({
+ maxWidth: 400,
+ minWidth: 280
+});
+
+// Create place details element programmatically
+function showPlaceDetails(placeId, marker) {
+ const container = document.createElement('div');
+ container.className = 'info-window-content';
+ container.style.width = '320px';
+ container.style.minHeight = '350px';
+
+ const placeDetails = document.createElement('gmp-place-details-compact');
+ placeDetails.setAttribute('orientation', 'vertical');
+ placeDetails.style.display = 'block';
+ placeDetails.style.width = '100%';
+
+ const placeRequest = document.createElement('gmp-place-details-place-request');
+ placeRequest.setAttribute('place', placeId);
+
+ const contentConfig = document.createElement('gmp-place-content-config');
+ contentConfig.innerHTML = `
+
+
+
+
+
+ `;
+
+ placeDetails.appendChild(placeRequest);
+ placeDetails.appendChild(contentConfig);
+ container.appendChild(placeDetails);
+
+ infoWindow.setContent(container);
+ infoWindow.open(map, marker);
+}
+```
+
+---
+
+## CSS Custom Properties
+
+### Color System (Material Design 3)
+
+```css
+gmp-place-details,
+gmp-place-details-compact {
+ /* Surface colors */
+ --gmp-mat-color-surface: #ffffff;
+ --gmp-mat-color-on-surface: #1f1f1f;
+ --gmp-mat-color-on-surface-variant: #5f5f5f;
+
+ /* Primary/accent */
+ --gmp-mat-color-primary: #1a73e8;
+ --gmp-mat-color-secondary-container: #e8f0fe;
+
+ /* Status indicators */
+ --gmp-mat-color-positive: #137333; /* Open status */
+ --gmp-mat-color-negative: #c5221f; /* Closed status */
+
+ /* Containers and borders */
+ --gmp-mat-color-neutral-container: #f5f5f5;
+ --gmp-mat-color-outline-decorative: #dadce0;
+
+ /* Border styling */
+ border: 1px solid #dadce0;
+ border-radius: 12px;
+}
+```
+
+### Typography Properties
+
+```css
+gmp-place-details,
+gmp-place-details-compact {
+ /* Base font */
+ --gmp-mat-font-family: 'Roboto', 'Arial', sans-serif;
+
+ /* Place name */
+ --gmp-mat-font-display-small: 400 24px/32px var(--gmp-mat-font-family);
+
+ /* Dialog headings */
+ --gmp-mat-font-headline-medium: 400 28px/36px var(--gmp-mat-font-family);
+
+ /* Content text */
+ --gmp-mat-font-body-medium: 400 14px/20px var(--gmp-mat-font-family);
+ --gmp-mat-font-body-small: 400 12px/16px var(--gmp-mat-font-family);
+
+ /* Labels/buttons */
+ --gmp-mat-font-label-large: 500 14px/20px var(--gmp-mat-font-family);
+ --gmp-mat-font-label-medium: 500 12px/16px var(--gmp-mat-font-family);
+}
+```
+
+---
+
+## Dark Mode Theming
+
+### The Problem: Unexpected Dark Mode
+
+**COMMON ISSUE:** Places UI Kit components automatically follow `prefers-color-scheme`, meaning they appear dark when the user's OS is in dark mode - even if your app uses a light theme.
+
+### Automatic Detection
+Components automatically adapt to system preference via `prefers-color-scheme`.
+
+### Force Light/Dark Mode (RECOMMENDED FIX)
+
+```css
+/* Force light mode - fixes unexpected dark UI */
+gmp-place-details,
+gmp-place-details-compact,
+gmp-place-autocomplete,
+gmp-place-search {
+ color-scheme: light;
+}
+
+/* Force dark mode */
+gmp-place-details,
+gmp-place-details-compact {
+ color-scheme: dark;
+}
+```
+
+### Syncing with Map Color Scheme
+
+**IMPORTANT:** The map's `colorScheme` can only be set at initialization and cannot be changed dynamically.
+
+```javascript
+const { ColorScheme } = await google.maps.importLibrary("core");
+
+// Detect user preference
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+// Initialize map with matching color scheme
+const map = new google.maps.Map(document.getElementById('map'), {
+ center: { lat: 37.7749, lng: -122.4194 },
+ zoom: 13,
+ mapId: 'YOUR_MAP_ID',
+ colorScheme: prefersDark ? ColorScheme.DARK : ColorScheme.LIGHT
+ // Or use ColorScheme.FOLLOW_SYSTEM for automatic matching
+});
+
+// Apply matching scheme to Places UI Kit
+const placesStyle = document.createElement('style');
+placesStyle.textContent = `
+ gmp-place-details,
+ gmp-place-details-compact,
+ gmp-place-search {
+ color-scheme: ${prefersDark ? 'dark' : 'light'};
+ }
+`;
+document.head.appendChild(placesStyle);
+```
+
+### Complete CSS Properties Reference
+
+| Property | Purpose | Light Default | Dark Default |
+|----------|---------|---------------|--------------|
+| `--gmp-mat-color-surface` | Background | `#ffffff` | `#1e1e1e` |
+| `--gmp-mat-color-on-surface` | Primary text | `#1f1f1f` | `#e3e3e3` |
+| `--gmp-mat-color-on-surface-variant` | Secondary text | `#5f5f5f` | `#a8a8a8` |
+| `--gmp-mat-color-primary` | Links, accents | `#1a73e8` | `#8ab4f8` |
+| `--gmp-mat-color-secondary-container` | Button backgrounds | `#e8f0fe` | `#394457` |
+| `--gmp-mat-color-on-secondary-container` | Button text | `#1a73e8` | `#c2e7ff` |
+| `--gmp-mat-color-positive` | "Open" status | `#137333` | `#137333` |
+| `--gmp-mat-color-negative` | "Closed" status | `#c5221f` | `#c5221f` |
+| `--gmp-mat-color-info` | Accessibility icons | `#1a73e8` | `#8ab4f8` |
+| `--gmp-mat-color-neutral-container` | Badges, loading | `#f5f5f5` | `#2d2d2d` |
+| `--gmp-mat-color-outline-decorative` | Borders | `#dadce0` | `#5f5f5f` |
+
+### Custom Dark Theme
+
+```css
+@media (prefers-color-scheme: dark) {
+ gmp-place-details,
+ gmp-place-details-compact {
+ --gmp-mat-color-surface: #1e1e1e;
+ --gmp-mat-color-on-surface: #e3e3e3;
+ --gmp-mat-color-on-surface-variant: #a8a8a8;
+ --gmp-mat-color-primary: #8ab4f8;
+ --gmp-mat-color-secondary-container: #394457;
+ --gmp-mat-color-neutral-container: #2d2d2d;
+ --gmp-mat-color-outline-decorative: #5f5f5f;
+ }
+}
+
+---
+
+## Matching App CSS Styles
+
+### Complete Example: Custom Themed Place Details
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Content Configuration Options
+
+### Available Content Elements
+
+| Element | Description |
+|---------|-------------|
+| `` | Photos carousel (add `lightbox-preferred` for full-screen) |
+| `` | Formatted address |
+| `` | Star rating and review count |
+| `` | Phone number with click-to-call |
+| `` | Hours of operation |
+| `` | User reviews |
+| `` | Accessibility info |
+| `` | Required Google attribution |
+
+### Preset Configurations
+
+```html
+
+
+
+
+
+```
+
+---
+
+## Attribution Requirements
+
+**IMPORTANT:** Google Maps Platform requires visible attribution. Always include `` in your content configuration.
+
+### Attribution Color Options
+
+Available colors: `white`, `gray`, `black`
+
+#### HTML Attributes
+
+```html
+
+
+```
+
+#### JavaScript Programmatic
+
+```javascript
+// Set attribution colors programmatically
+const attribution = document.querySelector('gmp-place-attribution');
+attribution.lightSchemeColor = 'gray'; // 'white', 'gray', or 'black'
+attribution.darkSchemeColor = 'white';
+```
+
+#### Official GitHub Sample Pattern
+
+From [googlemaps-samples/js-api-samples](https://github.com/googlemaps-samples/js-api-samples):
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Performance Best Practices
+
+1. **Lazy load Place Details**: Only create elements when needed (on marker click)
+2. **Debounce map events**: Use 300ms debounce for viewport change handlers
+3. **Clean up**: Remove previous info window content before creating new
+4. **Cache Place IDs**: Store Place IDs with your location data to avoid extra lookups
+
+---
+
+## Common Issues and Solutions
+
+### Issue: Place Details card appears cut off in info window
+
+**Solution:** Set explicit container dimensions and override info window overflow:
+
+```css
+.gm-style-iw-d {
+ overflow: visible !important;
+ max-height: none !important;
+}
+
+.info-window-content {
+ width: 320px;
+ min-height: 350px;
+}
+```
+
+### Issue: Content doesn't match app theme
+
+**Solution:** Map your CSS custom properties to the Material Design 3 tokens:
+
+```css
+gmp-place-details {
+ --gmp-mat-color-surface: var(--your-background-color);
+ --gmp-mat-color-on-surface: var(--your-text-color);
+ --gmp-mat-color-primary: var(--your-primary-color);
+ --gmp-mat-font-family: var(--your-font-family);
+}
+```
+
+### Issue: Component doesn't render
+
+**Solution:** Ensure:
+1. Places library is loaded: `await google.maps.importLibrary('places')`
+2. Valid Place ID is provided
+3. Container has explicit dimensions
+4. API key has Places API enabled
+
+### Issue: Places UI Kit appears dark when app is light themed
+
+**Cause:** Components follow the OS `prefers-color-scheme` by default.
+
+**Solution:** Force light mode with CSS:
+
+```css
+gmp-place-details,
+gmp-place-details-compact,
+gmp-place-search {
+ color-scheme: light;
+}
+```
+
+### Issue: Map and Places UI Kit have mismatched themes
+
+**Cause:** Map `colorScheme` is set at initialization only and doesn't auto-sync with Places UI Kit.
+
+**Solution:** Set both at initialization:
+
+```javascript
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+// Map initialization
+const map = new google.maps.Map(el, {
+ colorScheme: prefersDark ? ColorScheme.DARK : ColorScheme.LIGHT,
+ mapId: 'YOUR_MAP_ID'
+});
+
+// Places UI Kit CSS
+document.head.insertAdjacentHTML('beforeend', `
+
+`);
+```
+
+---
+
+## Official Code Samples (GitHub)
+
+**Repository:** [googlemaps-samples/js-api-samples](https://github.com/googlemaps-samples/js-api-samples)
+
+### Places UI Kit Samples
+
+| Sample | Clone Command |
+|--------|---------------|
+| Place Details | `git clone -b sample-ui-kit-place-details https://github.com/googlemaps-samples/js-api-samples.git` |
+| Place Details Compact | `git clone -b sample-ui-kit-place-details-compact https://github.com/googlemaps-samples/js-api-samples.git` |
+| Place Search Nearby | `git clone -b sample-ui-kit-place-search-nearby https://github.com/googlemaps-samples/js-api-samples.git` |
+| Place Search Text | `git clone -b sample-ui-kit-place-search-text-compact https://github.com/googlemaps-samples/js-api-samples.git` |
+| React Place Details | `git clone -b sample-react-ui-kit-place-details https://github.com/googlemaps-samples/js-api-samples.git` |
+| React Place Details Compact | `git clone -b sample-react-ui-kit-place-details-compact https://github.com/googlemaps-samples/js-api-samples.git` |
+| React Search Nearby | `git clone -b sample-react-ui-kit-search-nearby https://github.com/googlemaps-samples/js-api-samples.git` |
+
+### Running Samples Locally
+
+```bash
+cd js-api-samples/samples/ui-kit-place-details
+npm i
+npm start
+```
+
+### Architecture Center Guides
+
+- [Store Finder with Places UI Kit](https://developers.google.com/maps/architecture/ui-kit-store-finder?utm_source=gmp-code-assist)
+- [Getting Started with Places UI Kit](https://developers.google.com/maps/architecture/places-ui-kit-getting-started?utm_source=gmp-code-assist)
+
+---
+
+## Interactive Customization Tool
+
+Google provides a live styling tool to preview CSS custom property configurations:
+
+**[Places UI Kit Customization Tool](https://developers.google.com/maps/documentation/javascript/places-ui-kit/custom-styling#customization-tool?utm_source=gmp-code-assist)**
+
+The tool provides configurations in:
+- HTML/CSS (Web)
+- Kotlin/XML (Android)
+- Swift (iOS)
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/products-overview.md b/packages/code-assist/skills/google-maps-platform-dev/references/products-overview.md
new file mode 100644
index 0000000..6803729
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/products-overview.md
@@ -0,0 +1,58 @@
+# Google Maps Platform: Products & Use Cases (2026 Edition)
+
+**Quick Links Index:**
+* [Maps (JS/Android/iOS)](https://developers.google.com/maps/documentation)
+* [Routes API](https://developers.google.com/maps/documentation/routes) | [Navigation SDK](https://developers.google.com/maps/documentation/navigation)
+* [Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | [Places UI Kit](https://developers.google.com/maps/documentation/javascript/places-ui-kit/overview)
+* [Environment APIs](https://developers.google.com/maps/documentation/environment)
+* [Mobility Services](https://developers.google.com/maps/mobility)
+
+This document serves as the authoritative catalog for API selection.
+
+## ๐ The "Golden Path" (Stable Defaults)
+
+**Always prefer these modern, production-ready solutions:**
+
+1. **Map Visualization:** **Vector Maps (JS)**. Always use a `mapId`.
+2. **Markers:** **Advanced Markers** (`AdvancedMarkerElement`).
+3. **Place Search:** **Places UI Kit** (EEA Compliant, 10x cheaper).
+4. **Routing:** **Routes API** (Server) or **Navigation SDK** (Mobile App).
+
+---
+
+## 1. Maps & Visualization
+
+| Product | Description | Use Cases | Status |
+| :--- | :--- | :--- | :--- |
+| **Maps JavaScript API** | **Default Web Map.** | Websites, Store Locators. | GA |
+| **Photorealistic 3D Maps** | Immersive 3D mesh (via Tiles API). | **"Google Earth" for Developers.** Storytelling, Real Estate. | Preview (Web) |
+| **Google Earth Engine** | **Scientific Analysis Platform.** | Climate science, Satellite imagery analysis. | GA (Enterprise) |
+
+**Confusion Buster:**
+* **"I want Google Earth in my app":** You want **Photorealistic 3D Tiles** (Map Tiles API).
+* **"I want to analyze crop yields":** You want **Google Earth Engine**.
+
+## 2. Navigation & Mobility
+
+| Product | Description | Pricing Model | Status |
+| :--- | :--- | :--- | :--- |
+| **Navigation SDK** | **In-App Turn-by-Turn.** Full UI with voice, speed limits, lane guidance. | **Pay-as-you-go.** 1k free destinations/mo. ~$25/1k after. | GA |
+| **Routes API** | **Server-side Calculation.** Distance, Duration, Polylines. | Pay-as-you-go. | GA |
+
+**Decision Point:**
+* **Need a driver UI?** โ **Navigation SDK** (Android/iOS).
+* **Just need distance/time?** โ **Routes API**.
+
+## 3. Places (Data & Search)
+
+| Priority | Product | When to Use | Limitations |
+| :---: | :--- | :--- | :--- |
+| **1st** | **Places UI Kit** | **Default.** Mandatory for EEA. | Limited styling. |
+| **2nd** | **Places API (New)** | Custom UIs, backend processing. | **PROHIBITED** in EEA if on map. |
+| **3rd** | **Places Aggregate** | Heatmaps, density analysis. | Stats only. |
+
+## 4. Pricing Tiers (2026 Model)
+* **Starter:** ~$100/mo. Good for prototyping.
+* **Essentials:** ~$275/mo. 100k calls. Good for small apps.
+* **Pro:** ~$1,200/mo. 250k calls. Best for scaling apps.
+* **Pay-as-you-go:** Standard usage-based billing (Nav SDK, etc.).
diff --git a/packages/code-assist/skills/google-maps-platform-dev/references/routes-navigation.md b/packages/code-assist/skills/google-maps-platform-dev/references/routes-navigation.md
new file mode 100644
index 0000000..7cbd368
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/references/routes-navigation.md
@@ -0,0 +1,70 @@
+# Routes & Navigation: The Complete Guide (2026)
+
+**Top-Level Documentation:** [developers.google.com/maps/documentation/routes](https://developers.google.com/maps/documentation/routes)
+
+## 1. Routes API (Server-Side)
+**Best For:** Pre-trip planning, distance matrices, logistics dispatching.
+**Status:** GA.
+
+### Key Capabilities
+* **Compute Routes:**
+ * **2-Wheeler Routing:** Specialized routing for motorcycles (avoid highways, lane filtering awareness where legal).
+ * **Eco-Friendly Routing:** Default on. Returns `fuelConsumptionMicroliters`.
+ * **Tolls:** Calculates accurate toll costs for specific vehicle types (with `extraComputations=TOLLS`).
+ * **Polylines:** Returns `encodedPolyline` for easy map drawing.
+* **Compute Route Matrix:**
+ * Calculates distance/duration between N origins and M destinations (Max 625 elements).
+ * Essential for "Find nearest driver" logic.
+
+### Usage Example (REST)
+```bash
+POST https://routes.googleapis.com/directions/v2:computeRoutes
+Headers: X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline
+Body: {
+ "origin": {"address": "Start"},
+ "destination": {"address": "End"},
+ "travelMode": "TWO_WHEELER",
+ "routingPreference": "TRAFFIC_AWARE"
+}
+```
+
+---
+
+## 2. Navigation SDK (Mobile App)
+**Best For:** The "Driver" experience.
+**Documentation:** [developers.google.com/maps/documentation/navigation](https://developers.google.com/maps/documentation/navigation)
+
+**Status:** GA (Pay-as-you-go).
+**Pricing:** Free 0-1k destinations/mo. ~$25 per 1k after.
+
+### Key Features (Included)
+* **Turn-by-Turn UI:** A drop-in fragment that looks like Google Maps.
+* **Voice Guidance:** Text-to-speech instructions.
+* **Speed Limits:** Visual indicator of current limit.
+* **Lane Guidance:** "Use the right 2 lanes to turn."
+* **Rerouting:** Automatic traffic-based rerouting.
+
+### How to Use
+1. **Enable SDK:** In Cloud Console.
+2. **Install:** Via Gradle (Android) or CocoaPods (iOS).
+3. **Initialize:** `NavigationApi.getNavigator( ... )`.
+4. **Set Destination:** `navigator.setDestinations( ... )`.
+5. **Start:** `navigator.startGuidance()`.
+
+---
+
+## 3. Mobility Services (TL;DR)
+**Documentation:** [developers.google.com/maps/mobility](https://developers.google.com/maps/mobility)
+
+**"Mobility"** is a suite of specialized services built *on top* of Routes & Nav for specific industries.
+
+* **Fleet Engine:** The backend "Brain" for tracking vehicles.
+ * **On-Demand Rides & Deliveries (ODRD):** Uber/Lyft style apps. Tracks driver, shares route with rider.
+ * **Last Mile Fleet Solution (LMFS):** FedEx/UPS style. Task sequencing, manifest management.
+* **Consumer SDK:** The mobile library for the *Rider* or *Package Recipient* to see the vehicle moving in real-time.
+* **Driver SDK:** A wrapped version of the Navigation SDK that reports location to Fleet Engine automatically.
+
+**Summary:**
+* Building a generic route planner? -> **Routes API**.
+* Building a navigation app? -> **Navigation SDK**.
+* Building "Uber for X"? -> **Fleet Engine + Driver SDK + Consumer SDK**.
diff --git a/packages/code-assist/skills/google-maps-platform-dev/resources/getting-started.md b/packages/code-assist/skills/google-maps-platform-dev/resources/getting-started.md
new file mode 100644
index 0000000..fc20d0f
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/resources/getting-started.md
@@ -0,0 +1,97 @@
+# Getting Started: The "Zero to One" Guide
+
+## ๐ Quick Links (Direct Action)
+
+Use these "Magic Links" to skip navigation steps in the Google Cloud Console.
+
+| Action | Direct Link |
+| :--- | :--- |
+| **1. Create Project & Account** | [**Start Here (Setup Wizard)**](https://console.cloud.google.com/google/maps-apis/start) |
+| **2. Enable Maps JS API** | [Enable Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com) |
+| **3. Enable Places API (New)** | [Enable Places API (New)](https://console.cloud.google.com/apis/library/places-backend.googleapis.com) |
+| **4. Enable Routes API** | [Enable Routes API](https://console.cloud.google.com/apis/library/routes.googleapis.com) |
+| **5. Get API Key** | [**Create/View Credentials**](https://console.cloud.google.com/google/maps-apis/credentials) |
+
+---
+
+## Phase 1: Account & Key Generation (The Console)
+
+1. **Go to Google Cloud Console:**
+ * Click the **Start Here** link above.
+ * **Note:** You *must* have a Billing Account attached to your project, even to use the free monthly tier (Essentials).
+
+2. **Create a Project:**
+ * Select **"New Project"**. Name it (e.g., `gmp-store-locator`).
+
+3. **Generate an API Key:**
+ * Go to **Keys & Credentials** (or use the link above).
+ * Click **Create Credentials** > **API Key**.
+ * **Copy this key.** You will need it for your code.
+
+4. **Secure Your Key (Critical):**
+ * Click the pencil icon/name of your new API Key.
+ * **Application Restrictions:**
+ * **Web:** Select "Websites" -> Add `localhost:3000` (for dev) and `yourdomain.com/*` (for prod).
+ * **Android:** Select "Android apps" -> Add Package Name + SHA-1 Fingerprint.
+ * **iOS:** Select "iOS apps" -> Add Bundle ID.
+ * **API Restrictions:** Select "Restrict key" -> Check ONLY the APIs you are using (e.g., "Maps JavaScript API", "Places API (New)").
+
+## Phase 2: Enable the Right APIs (The Library)
+
+If you didn't use the direct links above, navigate to **APIs & Services > Library** and search for the specific products:
+
+* **For Web Maps:** Search **"Maps JavaScript API"** -> Enable.
+* **For Place Search:** Search **"Places API (New)"** -> Enable. (Do *not* enable "Places API" legacy unless necessary).
+* **For Routing:** Search **"Routes API"** -> Enable.
+
+## Phase 3: Using Your Key in Code
+
+**Rule:** Never commit your API key to Git.
+
+### Option A: Quick Prototyping (Local Only)
+Replace `YOUR_API_KEY` in the template code directly, but **do not commit** the file.
+
+### Option B: Environment Variables (Recommended)
+
+**React (.env.local):**
+1. Create `.env.local` in your root.
+2. Add: `REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSy...`
+3. In code: `apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`
+
+**Android (local.properties):**
+1. Open `local.properties` (this file is gitignored).
+2. Add: `MAPS_API_KEY=AIzaSy...`
+3. In `AndroidManifest.xml`:
+ ```xml
+
+ ```
+
+**iOS (Config.xcconfig):**
+
+1. Create a configuration file (gitignored).
+
+2. Add: `MAPS_API_KEY = AIzaSy...`
+
+3. Read from `Bundle.main.infoDictionary`.
+
+
+
+---
+
+
+
+## Phase 4: Power User Setup (MCP)
+
+
+
+If you are using tools like **Gemini CLI** or **Claude Code**, you should install the **Google Maps Platform Code Assist MCP**.
+
+
+
+This allows your AI agent to fetch up-to-date documentation and code samples directly from Google.
+
+
+
+๐ **See the [MCP Installation Guide](./mcp-guide.md) for quick install commands.**
diff --git a/packages/code-assist/skills/google-maps-platform-dev/resources/mcp-guide.md b/packages/code-assist/skills/google-maps-platform-dev/resources/mcp-guide.md
new file mode 100644
index 0000000..3eada48
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/resources/mcp-guide.md
@@ -0,0 +1,49 @@
+# Google Maps Platform: Code Assist MCP Guide
+
+The Code Assist MCP server enhances AI responses (Gemini, Claude) with up-to-date documentation and code samples using RAG (Retrieval-Augmented Generation).
+
+## ๐ Quick Install
+
+### For Gemini CLI
+Run this command to add the server automatically:
+```bash
+gemini mcp add google-maps-platform-code-assist npx -y @googlemaps/code-assist-mcp@latest
+```
+*Verify with: `gemini mcp list`*
+
+### For Claude Code / Claude Desktop
+Run this command:
+```bash
+claude mcp add google-maps-platform-code-assist -- npx -y @googlemaps/code-assist-mcp@latest
+```
+*Verify with: `claude mcp list`*
+
+---
+
+## ๐ ๏ธ Manual Configuration
+
+If you prefer manual setup, add the following to your MCP settings file:
+
+**Gemini CLI (`~/.gemini/settings.json`) or Claude (`~/.claude.json`):**
+```json
+{
+ "mcpServers": {
+ "google-maps-platform-code-assist": {
+ "command": "npx",
+ "args": ["-y", "@googlemaps/code-assist-mcp@latest"]
+ }
+ }
+}
+```
+
+---
+
+## ๐ Available Tools
+
+Once installed, your agent gains these capabilities:
+1. `retrieve-google-maps-platform-docs`: Search official GMP documentation and samples.
+2. `retrieve-instructions`: Get guidance on how to use the Code Assist tool itself.
+
+## ๐ References
+- **GitHub Repository:** [googlemaps/platform-ai](https://github.com/googlemaps/platform-ai/tree/main/packages/code-assist)
+- **NPM Package:** [@googlemaps/code-assist-mcp](https://www.npmjs.com/package/@googlemaps/code-assist-mcp)
diff --git a/packages/code-assist/skills/google-maps-platform-dev/resources/platform-android-compose.md b/packages/code-assist/skills/google-maps-platform-dev/resources/platform-android-compose.md
new file mode 100644
index 0000000..6cf165b
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/resources/platform-android-compose.md
@@ -0,0 +1,90 @@
+# Android Implementation Patterns (Kotlin + Jetpack Compose)
+
+**Attribution ID Requirement:** `gmp_mcp_codeassist_v0.1_github`
+
+## 1. Setup & Dependencies
+
+**build.gradle.kts (Module: app):**
+```kotlin
+dependencies {
+ implementation("com.google.android.gms:play-services-maps:18.2.0")
+ // Maps Compose Library
+ implementation("com.google.maps.android:maps-compose:4.3.0")
+ // Places SDK
+ implementation("com.google.android.libraries.places:places:3.3.0")
+}
+```
+
+**AndroidManifest.xml:**
+```xml
+
+
+
+```
+
+## 2. Basic Map (Jetpack Compose)
+
+```kotlin
+import com.google.android.gms.maps.model.CameraPosition
+import com.google.android.gms.maps.model.LatLng
+import com.google.maps.android.compose.*
+
+@Composable
+fun MapScreen() {
+ val singapore = LatLng(1.35, 103.87)
+ val cameraPositionState = rememberCameraPositionState {
+ position = CameraPosition.fromLatLngZoom(singapore, 10f)
+ }
+
+ GoogleMap(
+ modifier = Modifier.fillMaxSize(),
+ cameraPositionState = cameraPositionState
+ ) {
+ Marker(
+ state = MarkerState(position = singapore),
+ title = "Singapore",
+ snippet = "Marker in Singapore"
+ )
+ }
+}
+```
+
+## 3. Initialization & Attribution (Critical)
+
+You MUST initialize Places and Maps with the attribution ID in your Activity or Application class.
+
+```kotlin
+class MainActivity : ComponentActivity() {
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ // 1. Initialize Places with Attribution
+ if (!Places.isInitialized()) {
+ Places.initialize(applicationContext, "YOUR_API_KEY")
+ }
+ Places.addInternalUsageAttributionId("gmp_mcp_codeassist_v0.1_github")
+
+ // 2. Initialize Maps with Attribution
+ MapsApiSettings.addInternalUsageAttributionId(this, "gmp_mcp_codeassist_v0.1_github")
+
+ setContent {
+ MapScreen()
+ }
+ }
+}
+```
+
+## 4. Places Autocomplete (Intent)
+
+For a simple implementation, use the Autocomplete Intent.
+
+```kotlin
+// Launch the autocomplete activity
+val intent = Autocomplete.IntentBuilder(
+ AutocompleteActivityMode.OVERLAY,
+ fields // List of Place.Field
+).build(context)
+launcher.launch(intent)
+```
diff --git a/packages/code-assist/skills/google-maps-platform-dev/resources/platform-ios-swiftui.md b/packages/code-assist/skills/google-maps-platform-dev/resources/platform-ios-swiftui.md
new file mode 100644
index 0000000..e7bfc9c
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/resources/platform-ios-swiftui.md
@@ -0,0 +1,102 @@
+# iOS Implementation Patterns (Swift + SwiftUI)
+
+**Attribution ID Requirement:** `gmp_mcp_codeassist_v0.1_github`
+
+## 1. Setup & Initialization
+
+**AppDelegate.swift:**
+```swift
+import GoogleMaps
+import GooglePlaces
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+
+ // 1. Provide API Key
+ GMSServices.provideAPIKey("YOUR_API_KEY")
+ GMSPlacesClient.provideAPIKey("YOUR_API_KEY")
+
+ // 2. Add Attribution ID (CRITICAL)
+ GMSServices.addInternalUsageAttributionID("gmp_mcp_codeassist_v0.1_github")
+ GMSPlacesClient.addInternalUsageAttributionID("gmp_mcp_codeassist_v0.1_github")
+
+ return true
+ }
+}
+```
+
+## 2. SwiftUI Map Wrapper (UIViewRepresentable)
+
+The Maps SDK is UIKit-based. Wrap it for SwiftUI.
+
+```swift
+import SwiftUI
+import GoogleMaps
+
+struct GoogleMapView: UIViewRepresentable {
+ func makeUIView(context: Context) -> GMSMapView {
+ let camera = GMSCameraPosition.camera(
+ withLatitude: 37.7749,
+ longitude: -122.4194,
+ zoom: 12.0
+ )
+ let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
+ return mapView
+ }
+
+ func updateUIView(_ mapView: GMSMapView, context: Context) {
+ // Handle state updates (e.g., move camera, update markers)
+ }
+}
+```
+
+## 3. Places Autocomplete (UI Kit)
+
+Use `GMSAutocompleteViewController` wrapped in a UIViewControllerRepresentable.
+
+```swift
+import GooglePlaces
+
+struct PlaceAutocompleteViewController: UIViewControllerRepresentable {
+
+ func makeUIViewController(context: Context) -> GMSAutocompleteViewController {
+ let autocompleteController = GMSAutocompleteViewController()
+ autocompleteController.delegate = context.coordinator
+
+ // Specify fields to reduce cost
+ let fields: GMSPlaceField = GMSPlaceField(rawValue: UInt(GMSPlaceField.name.rawValue) |
+ UInt(GMSPlaceField.placeID.rawValue))!
+ autocompleteController.placeFields = fields
+
+ return autocompleteController
+ }
+
+ func updateUIViewController(_ uiViewController: GMSAutocompleteViewController, context: Context) {}
+
+ func makeCoordinator() -> Coordinator {
+ Coordinator(self)
+ }
+
+ class Coordinator: NSObject, GMSAutocompleteViewControllerDelegate {
+ var parent: PlaceAutocompleteViewController
+
+ init(_ parent: PlaceAutocompleteViewController) {
+ self.parent = parent
+ }
+
+ func viewController(_ viewController: GMSAutocompleteViewController, didAutocompleteWith place: GMSPlace) {
+ print("Place name: \(place.name)")
+ viewController.dismiss(animated: true, completion: nil)
+ }
+
+ func viewController(_ viewController: GMSAutocompleteViewController, didFailAutocompleteWithError error: Error) {
+ print("Error: ", error.localizedDescription)
+ }
+
+ func wasCancelled(_ viewController: GMSAutocompleteViewController) {
+ viewController.dismiss(animated: true, completion: nil)
+ }
+ }
+}
+```
diff --git a/packages/code-assist/skills/google-maps-platform-dev/resources/platform-react.md b/packages/code-assist/skills/google-maps-platform-dev/resources/platform-react.md
new file mode 100644
index 0000000..e1c1506
--- /dev/null
+++ b/packages/code-assist/skills/google-maps-platform-dev/resources/platform-react.md
@@ -0,0 +1,117 @@
+# Web & React Implementation Patterns
+
+**Attribution ID Requirement:** `internalUsageAttributionIds: "gmp_mcp_codeassist_v0.1_github"`
+
+## 1. Vanilla JavaScript (Modern Dynamic Import)
+
+**Rule:** NEVER use the legacy `
+
+
+
+
+
+```
+
+## 2. React (@vis.gl/react-google-maps)
+
+**Library:** `@vis.gl/react-google-maps` (Official/Recommended).
+
+```tsx
+import React from 'react';
+import {APIProvider, Map, AdvancedMarker, Pin} from '@vis.gl/react-google-maps';
+
+export default function App() {
+ const API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
+ const MAP_ID = "DEMO_MAP_ID"; // Required for Advanced Markers
+
+ return (
+
+
+
+ );
+}
+```
+
+## 3. Places UI Kit (Web Components)
+
+**Rule:** 10x cheaper than building a custom Autocomplete.
+
+```html
+
+
+
+
+
+
+
+```
+
+## 4. 3D Maps (Web Component)
+
+```html
+
+
+
+
+
+
+
+```