Skills
.Work. You
Rest

leaflet-expert

Community

Build accessible Leaflet maps fast

Software Engineering#leaflet#geojson#react-leaflet#map accessibility#tile attribution#map performance#interactive web maps
Authordavid-nossebro
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you research, design, implement, and debug interactive web maps using Leaflet (or React Leaflet) so they render correctly, handle data and interactions properly, and remain accessible and compliant.

Core Features & Use Cases

  • Map stack triage: quickly determine whether you’re using Leaflet or React Leaflet, where CSS is loaded, whether SSR is involved, and whether the container has a valid height.
  • Correct primitive selection: choose the right rendering approach for the dataset size and geometry (Marker vs CircleMarker vs GeoJSON, layer groups, panes, overlays, WMS/TMS).
  • Production-grade UX and safety: ensure meaningful initial bounds/viewports, keep tile attribution visible, and treat popup HTML as unsafe by default.

Quick Start

Use the leaflet-expert skill to fix your blank or broken interactive map in React Leaflet by checking CSS, container height, SSR/client-only loading, and then selecting the correct Leaflet primitives for your data size.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: leaflet-expert
Download link: https://github.com/david-nossebro/agent-commons/archive/main.zip#leaflet-expert

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.