Imported from AdityaPagare/cycle-wala (.claude/skills/web-design/globe-gl/SKILL.md). Install upstream with npx skills add AdityaPagare/cycle-wala --skill globe-gl. Copyright stays with the author.

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?