Claude Code Plugins

Community-maintained marketplace

Feedback

Use when building interactive map tools - Explains MapLibre setup, tiles, and common UI patterns.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name maps
description Use when building interactive map tools - Explains MapLibre setup, tiles, and common UI patterns.

MapLibre basics

  • Include MapLibre's CSS before your styles and load the script from https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js.
  • Keep the map container absolutely positioned to fill the viewport (see #map styles in tools/map-explorer/index.html).
  • Use the OpenFreeMap Liberty style (https://tiles.openfreemap.org/styles/liberty) unless a different basemap is required.
  • Add navigation controls with map.addControl(new maplibregl.NavigationControl(), 'top-right');.
  • Guard against missing globals: if typeof maplibregl === 'undefined', disable map-dependent UI and show an error.

Geolocation pattern

  • Provide a dedicated button for navigator.geolocation.getCurrentPosition.
  • Disable the button while locating, apply a loading state, and reset it in success/error callbacks.
  • On success, create or update a maplibregl.Marker and map.easeTo the new center.
  • On errors, surface user-friendly messages for permission, availability, and timeout cases.

Overlay & interaction tips

  • Keep status text in small, unobtrusive elements and update it via helper functions.

Accessibility & layout

  • Generally prefer maps that take up the whole viewport, with UI controls and panels overlayed
  • Footer links in an overlay too.