Update to Mapbox

{
  "name": "mapbox-style-patterns",
  "description": "Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.",
  "included_files": [
    {
      "relative_path": "AGENTS.md",
      "size_in_bytes": 6828
    },
    {
      "relative_path": "evals/evals.json",
      "size_in_bytes": 5126
    },
    {
      "relative_path": "references/common-modifications.md",
      "size_in_bytes": 1398
    },
    {
      "relative_path": "references/dark-mode.md",
      "size_in_bytes": 2512
    },
    {
      "relative_path": "references/data-viz-base.md",
      "size_in_bytes": 2332
    },
    {
      "relative_path": "references/delivery-logistics.md",
      "size_in_bytes": 8201
    },
    {
      "relative_path": "references/expressions-clustering.md",
      "size_in_bytes": 1164
    },
    {
      "relative_path": "references/interactions.md",
      "size_in_bytes": 5432
    },
    {
      "relative_path": "references/navigation.md",
      "size_in_bytes": 3549
    },
    {
      "relative_path": "references/real-estate.md",
      "size_in_bytes": 2672
    }
  ],
  "skill_md_contents": "---\nname: mapbox-style-patterns\ndescription: Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.\n---\n\n# Mapbox Style Patterns Skill\n\nThis skill provides battle-tested style patterns and layer configurations for common mapping scenarios.\n\n## Pattern Library\n\n### Pattern 1: Restaurant/POI Finder\n\n**Use case:** Consumer app showing restaurants, cafes, bars, or other points of interest\n\n**Visual requirements:**\n\n- POIs must be immediately visible\n- Street context for navigation\n- Neutral background (photos/content overlay)\n- Mobile-optimized\n\n**Recommended layers:**\n\n```json\n{\n  \"layers\": [\n    {\n      \"id\": \"background\",\n      \"type\": \"background\",\n      \"paint\": {\n        \"background-color\": \"#f5f5f5\"\n      }\n    },\n    {\n      \"id\": \"water\",\n      \"type\": \"fill\",\n      \"source\": \"mapbox-streets\",\n      \"source-layer\": \"water\",\n      \"paint\": {\n        \"fill-color\": \"#d4e4f7\",\n        \"fill-opacity\": 0.6\n      }\n    },\n    {\n      \"id\": \"landuse-parks\",\n      \"type\": \"fill\",\n      \"source\": \"mapbox-streets\",\n      \"source-layer\": \"landuse\",\n      \"filter\": [\"==\", \"class\", \"park\"],\n      \"paint\": {\n        \"fill-color\": \"#e8f5e8\",\n        \"fill-opacity\": 0.5\n      }\n    },\n    {\n      \"id\": \"roads-minor\",\n      \"type\": \"line\",\n      \"source\": \"mapbox-streets\",\n      \"source-layer\": \"road\",\n      \"filter\": [\"in\", \"class\", \"street\", \"street_limited\"],\n      \"paint\": {\n        \"line-color\": \"#e0e0e0\",\n        \"line-width\": {\n          \"base\": 1.5,\n          \"stops\": [\n            [12, 0.5],\n            [15, 2],\n            [18, 6]\n          ]\n        }\n      }\n    },\n    {\n      \"id\": \"roads-major\",\n      \"type\": \"line\",\n      \"source\": \"mapbox-streets\",\n      \"source-layer\": \"road\",\n      \"filter\": [\"in\", \"class\", \"primary\", \"secondary\", \"tertiary\"],\n      \"paint\": {\n        \"line-color\": \"#ffffff\",\n        \"line-width\": {\n          \"base\": 1.5,\n          \"stops\": [\n            [10, 1],\n            [15, 4],\n            [18, 12]\n          ]\n        }\n      }\n    },\n    {\n      \"id\": \"restaurant-markers\",\n      \"type\": \"symbol\",\n      \"source\": \"restaurants\",\n      \"layout\": {\n        \"icon-image\": \"restaurant-15\",\n        \"icon-size\": 1.5,\n        \"icon-allow-overlap\": false,\n        \"text-field\": [\"get\", \"name\"],\n        \"text-offset\": [0, 1.5],\n        \"text-size\": 12,\n        \"text-allow-overlap\": false\n      },\n      \"paint\": {\n        \"icon-color\": \"#FF6B35\",\n        \"text-color\": \"#333333\",\n        \"text-halo-color\": \"#ffffff\",\n        \"text-halo-width\": 2\n      }\n    }\n  ]\n}\n```\n\n**Key features:**\n\n- Desaturated base map (doesn't compete with photos)\n- High-contrast markers (#FF6B35 orange stands out)\n- Clear road network (white on light gray)\n- Parks visible but subtle\n- Text halos for readability\n\n## Pattern Selection Guide\n\n### Decision Tree\n\n**Question 1: What is the primary content?**\n\n- User-generated markers/pins -> **POI Finder Pattern**\n- Property data/boundaries -> **Real Estate Pattern**\n- Statistical/analytical data -> **Data Visualization Pattern**\n- Routes/directions -> **Navigation Pattern**\n- Real-time tracking/delivery zones -> **Delivery/Logistics Pattern** (customer markers should include a pulse animation via second circle layer + requestAnimationFrame + setPaintProperty; see references/delivery-logistics.md)\n\n**Question 2: What is the viewing environment?**\n\n- Daytime/office -> Light theme\n- Night/dark environment -> **Dark Mode Pattern**\n- Variable -> Provide theme toggle\n\n**Question 3: What is the user's primary action?**\n\n- Browse/explore -> Focus on POIs, rich detail\n- Navigate -> Focus on roads, route visibility\n- Track delivery/logistics -> Real-time updates, zones, status\n- Analyze data -> Minimize base map, maximize data\n- Select location -> Clear boundaries, context\n\n**Question 4: What is the platform?**\n\n- Mobile -> Simplified, larger touch targets, less detail\n- Desktop -> Can include more detail and complexity\n- Both -> Design mobile-first, enhance for desktop\n\n## Layer Optimization Patterns\n\n### Performance Pattern: Simplified by Zoom\n\n```json\n{\n  \"id\": \"roads\",\n  \"type\": \"line\",\n  \"source\": \"mapbox-streets\",\n  \"source-layer\": \"road\",\n  \"filter\": [\n    \"step\",\n    [\"zoom\"],\n    [\"in\", \"class\", \"motorway\", \"trunk\"],\n    8,\n    [\"in\", \"class\", \"motorway\", \"trunk\", \"primary\"],\n    12,\n    [\"in\", \"class\", \"motorway\", \"trunk\", \"primary\", \"secondary\"],\n    14,\n    true\n  ],\n  \"paint\": {\n    \"line-width\": {\n      \"base\": 1.5,\n      \"stops\": [\n        [4, 0.5],\n        [10, 1],\n        [15, 4],\n        [18, 12]\n      ]\n    }\n  }\n}\n```\n\n## Reference Files\n\nAdditional patterns and configurations are available in the `references/` directory. Load the relevant file when a specific pattern is needed.\n\n| File                                                                         | Contents                                                                                             |\n| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |\n| [references/real-estate.md](references/real-estate.md)                       | Pattern 2: Real Estate Map -- property boundaries, price color-coding, amenity markers               |\n| [references/data-viz-base.md](references/data-viz-base.md)                   | Pattern 3: Data Visualization Base Map -- minimal grayscale base for choropleth/heatmap overlays     |\n| [references/navigation.md](references/navigation.md)                         | Pattern 4: Navigation/Routing Map -- route display, user location, turn arrows                       |\n| [references/dark-mode.md](references/dark-mode.md)                           | Pattern 5: Dark Mode / Night Theme -- near-black background, reduced brightness                      |\n| [references/delivery-logistics.md](references/delivery-logistics.md)         | Pattern 6: Delivery/Logistics Map -- real-time tracking, zones, driver markers, ETA badges           |\n| [references/expressions-clustering.md](references/expressions-clustering.md) | Data-driven expression patterns + clustering for dense POIs                                          |\n| [references/common-modifications.md](references/common-modifications.md)     | 3D Buildings, Terrain/Hillshade, Custom Markers                                                      |\n| [references/interactions.md](references/interactions.md)                     | `addInteraction` vs `setFeatureState` vs `appearances` -- how they fit together and when to use each |\n\n**Loading instructions:** Read the reference file that matches the user's use case. For example, if implementing a delivery tracking map, load `references/delivery-logistics.md`.\n\n## Testing Patterns\n\n### Visual Regression Checklist\n\n- [ ] Test at zoom levels: 4, 8, 12, 16, 20\n- [ ] Verify on mobile (375px width)\n- [ ] Verify on desktop (1920px width)\n- [ ] Test with dense data\n- [ ] Test with sparse data\n- [ ] Check label collision\n- [ ] Verify color contrast (WCAG)\n- [ ] Test loading performance\n\n## When to Use This Skill\n\nInvoke this skill when:\n\n- Starting a new map style for a specific use case\n- Looking for layer configuration examples\n- Implementing common mapping patterns\n- Optimizing existing styles\n- Need proven recipes for typical scenarios\n- Debugging style issues\n- Learning Mapbox style best practices\n"
}