Skip to content
Get packs

Globe.GL 3D Globe Visualization

Build interactive 3D globe data visualizations with globe.gl in plain HTML or React

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

Once installed, the agent knows how to set up globe.gl, a JavaScript library that draws an interactive 3D Earth in a web page. It can write starter code for showing data on the globe as points, arcs, polygons, labels and similar layers, and it gives tips on sizing and performance. The skill only shapes the agent's written answers and code; it does not run anything on your machine by itself.

Great for

  • Front-end developers building a data map or globe visualization for a website
  • Designers prototyping an interactive globe with overlays such as flight routes or city markers
  • Data people who want a quick 3D view of geographic datasets

Skip it if

  • Flat 2D maps or charts, where a library like Leaflet or D3 is simpler (globe.gl is only for 3D globes)
  • Production work that needs guaranteed mobile performance without testing, since the skill itself warns that large point counts can be slow on phones
  • Anyone expecting the skill to handle non-web environments; it targets plain HTML or React only

Try asking

  • “Create a plain HTML page with a globe.gl globe showing city points from my CSV”
  • “Add arcs between these airports on a dark neon-style globe”
  • “Set up react-globe.gl in my Next.js dashboard with polygon country highlights”
  • “Make the globe fill a responsive container and reduce point count for mobile”
Step-by-step guide: how to use Globe.GL 3D Globe VisualizationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    globe-gl.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip globe-gl.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip globe-gl.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Tell the agent up front whether you use plain HTML, ESM bundling, or React so it picks the right snippet.
  • Describe the exact layers and fields you need (for example lat, lng, value) so the code matches your data.
  • Ask for a darker globe texture if you want neon-style overlays, and test the page on a phone before shipping.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.