Guide · Agent skill
How to use the Globe.GL 3D Globe skill for agents
Updated · written with AI from the project's own documentation and checked against our catalogue data
The globe-gl agent skill teaches an AI agent how to build interactive 3D Earth visualizations with globe.gl, a JavaScript library that draws a globe in a web page. It is aimed at front-end developers, designers and data people who want a 3D map with data layers such as points, arcs, polygons and labels. After this guide you will know what the skill does, how to install it, how to ask for a globe in plain language, and what to check before you ship the result.
Globe.GL 3D Globe VisualizationMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the globe-gl ZIP from this page and unzip it so you have a globe-gl folder with SKILL.md.
- 2Place the skill folder. Move the folder into ~/.claude/skills/ for personal use, or into .claude/skills/ in your project. You can also upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Describe your globe. Tell the agent the layers you need (points, arcs, polygons or labels), your data, and whether you use plain HTML or React.
- 4Answer setup questions. The agent may ask about desktop and mobile sizes and whether the globe should be draggable or static.
- 5Provide a texture and data. Give a globe texture image URL and the dataset to visualize.
- 6Add the code to a container. Place the generated snippet in a page with a sized container element and load globe.gl from npm or the CDN link the agent uses.
- 7Test in a browser. Open the page, check sizing, and test performance with your real data, especially on mobile.
What the globe-gl skill makes the agent do
Agent skills are folders of instructions that an AI agent loads when a task matches the skill's description. This skill's description says it applies when you implement globe.gl for 3D globe data visualization with WebGL/Three.js, including setup, data layers and integration in plain HTML or React.
Once installed, the agent follows a short workflow from the skill: it confirms your environment (plain HTML, framework or React bindings) and the data layers you need, provides a minimal quick-start snippet, adds extra interactions only if you ask, and calls out container sizing and performance concerns.
- Writes starter code that creates a globe with a globe texture image and a dataset
- Explains the fields needed for each layer type
- Gives tips on container sizing and performance
- The skill only shapes the agent's written answers and code; it does not run anything on your machine by itself
Install the globe-gl skill
Download the ZIP for agent-skills/web-design/globe-gl from this page, then unzip it. The skill folder contains SKILL.md, plus demo/index.html and demo/PROMPT.md.
For a personal install, place the unzipped folder in ~/.claude/skills/. To scope it to one project, place it in that project's .claude/skills/ folder.
Alternatively, in the Claude apps go to Settings → Capabilities → Skills and upload the skill there.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need to type the skill name every time. The agent matches your request against the skill description, which mentions globe.gl, 3D globe, WebGL, Three.js, points, arcs, polygons, labels, plain HTML and React. Requests that use those words are the most likely to load it.
If the agent does not pick up the skill, name it directly. The demo prompts in the source use the form $globe-gl followed by your request.
- "Use globe-gl to show my customer locations as points on a 3D globe."
- "Draw flight routes between these airports as arcs on a globe, plain HTML."
- "Build a React component with react-globe.gl that highlights countries as polygons."
Examples of what to ask for
Good requests name the layer type, the data and the environment. The skill asks clarifying questions if these are missing: which layers you need, the globe size on desktop versus mobile, whether you want drag and rotate or a static globe, and whether you are using plain HTML or React.
The minimal quick-start the skill provides loads globe.gl either as an ES module import or from a script tag on cdn.jsdelivr.net, creates the globe on an element, sets globeImageUrl and pointsData, and leaves the rest to you.
- City markers: give a list of latitude, longitude and name, and ask for points.
- Routes: give origin and destination coordinates, and ask for arcs.
- Regions: give GeoJSON-style polygon data, and ask for a polygon layer.
- Labels: ask for text placed at coordinates on the globe.
<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<script>
const myGlobe = new Globe(document.getElementById('globe'))
.globeImageUrl(myImageUrl)
.pointsData(myData);
</script>Set up sizing, textures and performance
The globe fills its parent element, so size the container with CSS. Give the parent a defined width and height, otherwise the globe may not show as you expect.
You need a globe texture image URL. The skill notes that a darker texture suits neon-style data overlays. For performance, reduce the point count or point size, especially on mobile phones.
- Set the container's width and height in CSS
- Supply a globe texture image URL
- Use a darker texture for neon-style overlays
- Test large datasets on real phones before release
What people use it for
- Showing customer or office locations as points on an interactive globe for a company website.
- Drawing flight or shipping routes as arcs between cities for a travel or logistics landing page.
- Highlighting countries or regions with polygon layers from a geographic dataset.
- Prototyping a designer's overlay of city markers and labels on a 3D Earth.
- Giving data analysts a quick 3D view of geographic records before building a full dashboard.
Frequently asked questions
Is the globe-gl skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the download for the full terms.
What do I need to use the globe-gl skill?
You need a web browser to view the output, and either Node/npm or a CDN link to load globe.gl from cdn.jsdelivr.net. You also need a globe texture image URL and a dataset, plus React and react-globe.gl if you want the React variant.
Does the skill run scripts on my computer?
No. The skill does not run scripts, but it does use the network, since the code it writes loads globe.gl and may load textures from URLs. Review any code before you run it.
Where do I put the skill folder?
Put it in ~/.claude/skills/ for personal use, or in .claude/skills/ inside a project to limit it to that project. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Can the skill make a 2D map or chart?
No. It is only for 3D globes. For flat 2D maps, a library such as Leaflet or D3 is simpler, according to this skill's guidance.
Will a globe with many points run well on phones?
Not guaranteed. The skill warns that large point counts can be slow on mobile, so reduce points or point size and test on real devices before launch.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the globe-gl skill if you are building a 3D globe for a website in plain HTML or React and want an agent to write the starter code and layer setup. Pick something else if you need a flat map or chart, a non-web environment, or guaranteed mobile performance without your own testing.
Download the skill