A professional library of battle-tested Mapbox style patterns and layer configurations designed for common industry mapping scenarios.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install mapbox-style-patterns
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install mapbox-style-patterns using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Mapbox Style Patterns?
The Mapbox Style Patterns skill is a comprehensive resource for developers using Openclaw Skills to build high-quality, performant map interfaces. It provides a robust collection of pre-configured layer definitions, visual recipes, and mobile-optimized patterns that ensure your maps are both functional and aesthetically pleasing. Whether you are building a restaurant finder or a complex logistics dashboard, this skill offers the technical foundation needed to implement industry-standard mapping features quickly.
By leveraging these Openclaw Skills, developers can bypass the tedious trial-and-error phase of map styling. The skill emphasizes clean code, high-contrast visual hierarchy, and performance-minded configurations like zoom-based layer simplification. It serves as a bridge between raw Mapbox GL JS capabilities and the specific UI/UX requirements of modern web and mobile applications.
Mapbox Style Patterns Use Cases
- Creating high-contrast POI finders for consumer-facing apps like restaurant or cafe locators.
- Developing real estate platforms that require clear property boundaries and price-based color coding.
- Building minimal, grayscale base maps for complex data visualizations, heatmaps, and choropleths.
- Implementing navigation and logistics dashboards with real-time tracking, route display, and ETA badges.
- Optimizing map performance using zoom-dependent layer filtering and simplified geometry.
How Mapbox Style Patterns Works
- Analyze the primary content and user intent (e.g., exploring POIs vs. analyzing data) using the internal decision tree.
- Select the appropriate visual pattern based on the viewing environment (Light, Dark, or Toggle) and target platform.
- Implement the recommended layer configurations, including background, water, landuse, and specific data layers.
- Apply performance optimizations such as zoom-based filtering to ensure smooth rendering across all devices.
- Validate the implementation using the visual regression checklist across multiple zoom levels and screen resolutions.
Mapbox Style Patterns Setup
To integrate these mapping patterns into your project using Openclaw Skills, you can reference the core configurations directly in your style object:
# Example: Initializing a project with Mapbox patterns
npm install mapbox-gl
# Use Openclaw Skills to fetch specific pattern references from the library
Ensure you have your Mapbox Access Token configured in your environment variables to load the underlying Mapbox Streets and Terrain sources.
Mapbox Style Patterns Data Schema & Taxonomy
The skill organizes its patterns and metadata into a structured taxonomy for easy retrieval:
| Category | Pattern Type | Key Features |
|---|---|---|
| UI Patterns | POI Finder | Desaturated base, high-contrast symbols, text halos |
| Analytical | Data-Viz | Grayscale base, minimal distraction, optimized for overlays |
| Operational | Logistics | Pulse animations, driver markers, zone overlays |
| Optimization | Zoom-Filtering | Step-based layer visibility to improve FPS |
Reference files are stored in the references/ directory, categorized by specific use cases like real-estate.md or navigation.md.
Mapbox Style Patterns Advanced Features
- Dynamic Data-Driven Expressions: Pre-configured GL JS expressions for clustering dense points of interest.
- Animation Hooks: Integration-ready snippets for
requestAnimationFrameto create pulsing delivery markers. - 3D & Terrain Support: Advanced recipes for 3D building extrusions and hillshade terrain rendering.
- Cross-Platform Optimization: Mobile-first design patterns that automatically scale for desktop complexity.
- WCAG Compliance: Built-in color contrast patterns to ensure map accessibility for all users.
SKILL.md
Loading
Related Openclaw Skills
BTC Momentum Trader
An automated trading skill that executes Polymarket Bitcoin 5-minute sprint bets based on real-time BTC price momentum from Binance.
Polla Central Kurdish Translator
An expert translation engine for converting English Information Technology terms and documentation into pure Central Kurdish (Sorani) using authoritative linguistic sources.
Mapbox Web Integration Patterns
A comprehensive guide to implementing Mapbox GL JS across modern JavaScript frameworks using official production-ready integration patterns.
panda-git-commit
A smart Git commit message generator that ensures compliance with Conventional Commits while automatically detecting monorepo scopes and splitting complex changes.
Mapbox Style Quality
An expert AI skill for validating Mapbox expressions, auditing color contrast for WCAG compliance, and optimizing map style performance.
Mapbox Store Locator Patterns
A professional-grade framework for building interactive store locators and mapping search tools using Mapbox and Openclaw Skills.
Featured*
