mcpField
G
globe-gl

globe-gl

github.com/mengtoData & databases7.1k1.5k installsUpdated 3d ago
Repository

About globe-gl

A skill that guides implementation of data visualizations with globe.gl. It helps developers choose globe layers, start with a minimal example, and account for sizing and performance.

Key features

  1. 01Identify environment and data layers
  2. 02Provide minimal setup examples
  3. 03Cover common globe layers
  4. 04Address sizing and performance

Use cases

  1. 01Start a globe.gl visualization
  2. 02Choose layers for a data globe
  3. 03Adapt globe sizing for mobile

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mengto/skills --skill globe-gl

After installing, type/globe-glin Claude Code to confirm it loaded.

Bundled filesdemo/index.htmldemo/PROMPT.md

Details

From the project README

Globe.GL Skill

Workflow

  1. Confirm environment (plain HTML, framework, React bindings) and the data layers needed.
  2. Provide a minimal quick-start snippet plus the layer-specific fields.
  3. Add interactions or extra layers only if requested.
  4. Call out container sizing and performance considerations.

Quick start (ESM)

<script type="module">
  import Globe from 'globe.gl';

  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

Quick start (script tag)

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<script>
  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

Common layers to mention

  • Points
  • Arcs
  • Polygons
  • Paths
  • Heatmaps and hex bins
  • Labels or HTML elements
  • 3D objects and custom layers

Practical tips

  • Size the container with CSS; the globe fills its parent element.
  • Reduce point count or size for performance on mobile.
  • Use a darker globe texture for neon-style data overlays.

Questions to ask when specs are missing

  • Which layers do you need (points, arcs, polygons, labels)?
  • What should the globe size be on desktop vs mobile?
  • Do you want drag/rotate interactions or a static globe?
  • Is this plain HTML, React (react-globe.gl), or another framework?

Comments

Markdown supported