Guide · Agent skill

How to use the cobe.js Globe Builder agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

The cobejs skill is a set of instructions that teaches an AI agent how to add a small, animated 3D globe to a website using the cobe.js library, rather than a heavier engine like three.js. This guide explains 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. No prior experience with agent skills is needed.

cobe.js Globe BuilderMengTo/Skills · MIT Download the skill

Quick start

1Download and unzip the skill. Download the ZIP from this page and unzip it so the cobejs folder with SKILL.md is in place.
2Place it in the skills folder. Move the folder into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
4Prepare your web project. Make sure you have a web project with HTML and JavaScript, and that the cobe npm package is available. React or Next.js is optional.
5Describe the globe you want. Ask the agent for a globe in plain language, including where it goes and what markers it should show.
6Answer the agent's questions. Give the size and placement, marker locations and colours, and whether the globe should be draggable or spin on its own.
7Test on desktop and mobile. Resize the window and check on a phone that the globe is sharp, fits its container, and does not slow the page.

What the cobejs skill makes the agent do

Agent skills are folders of instructions that an AI agent loads when a task matches the skill's description. The cobejs skill matches requests about adding a lightweight interactive globe with cobe, including canvas setup, markers, interaction, performance and integration with React or Next.js.

Once the skill is active, the agent knows the basic cobe pattern: import createGlobe from cobe, call it with a canvas and an options object, and use an onRender callback to change the rotation over time. It also knows the common options, such as rotation angles, scale, colours, and location markers.

Sets up a canvas that is sized correctly for the screen's pixel density
Adds location markers given as latitude and longitude
Keeps the globe spinning or lets you control rotation
Handles resize events and cleans up the globe instance

Install the cobejs skill from the ZIP

Download the ZIP for the skill from this page and unzip it. The folder contains SKILL.md, REFERENCES.md and a demo folder with demo/index.html and demo/PROMPT.md.

For a personal setup that applies to all your projects, unzip the skill into ~/.claude/skills/. To limit it to a single project, unzip it into that project's .claude/skills/ folder instead.

If you use the Claude apps rather than a local setup, open Settings, go to Capabilities, and upload the skill under Skills.

Personal: ~/.claude/skills/
Project only: .claude/skills/ inside your project folder
Claude apps: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. Describe the globe you want in ordinary language and mention the kind of work involved. The skill's description focuses on lightweight interactive globes, so requests about a spinning globe, location markers, or a globe in a hero section are the ones that will match it.

The skill also tells the agent to ask questions before writing code. Expect it to ask about globe size and placement (hero, section or card), marker locations and colours, and whether you want drag to rotate or ambient spin only.

"Add a small spinning globe with three markers to the hero section of my Next.js landing page."
"Use cobe to show our offices on a globe in the About page, with brand-coloured markers."
"Make the globe draggable to rotate, and keep it sharp on phones."

Example: a responsive globe with a marker

The skill includes a quick recipe. It sizes the canvas from its displayed size, caps the pixel density at 2, creates the globe with a marker at a latitude and longitude, and rebuilds the globe when the window resizes. The example below is the recipe from the skill, so you can see what the agent is likely to produce.

The marker in this example is placed at latitude 1.3521 and longitude 103.8198.

canvas.width and canvas.height are set from the element's size multiplied by the device pixel ratio
phi increases a little on each frame through onRender
The resize listener destroys the old globe and creates a new one

import createGlobe from "cobe";

const canvas = document.getElementById("cobe");
let phi = 0;

function setup() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio, 2);
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);

  const globe = createGlobe(canvas, {
    devicePixelRatio: dpr,
    width: canvas.width,
    height: canvas.height,
    phi: 0,
    theta: 0.2,
    dark: 0,
    diffuse: 1.2,
    scale: 1,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.2, 0.2, 0.25],
    glowColor: [1, 1, 1],
    markerColor: [0.8, 0.5, 1],
    markers: [{ location: [1.3521, 103.8198], size: 0.08 }],
    onRender: (state) => {
      state.phi = phi;
      phi += 0.01;
    },
  });

  return globe;
}

let globe = setup();
window.addEventListener("resize", () => {
  globe.destroy();
  globe = setup();
});

Check the common pitfalls

Most problems with canvas globes come from sizing. The skill warns that the CSS size and the canvas width and height must both be set, and that the canvas width and height should be scaled for the device pixel ratio. If the globe looks blurry or stretched, check these first.

Resize handling is the second common issue. If the globe is not recalculated when the window changes size, it will not fit its container. High pixel density on phones is the third. The skill suggests limiting the device pixel ratio to between 1 and 2.

Set both the CSS size and the canvas width and height, scaled for DPR
Recompute sizes on resize, then recreate or update the globe
Clamp the device pixel ratio to 1–2 on mobile
Use globe.toggle() to pause the animation loop and globe.destroy() to remove the instance

Know what the skill does not cover

The skill describes cobe as a decorative globe library. It is not designed for detailed map data, zooming, or geographic analysis. For those needs, a mapping library is a better fit. For complex 3D scenes that need a general-purpose engine, the skill points toward three.js.

The REFERENCES.md file points to the cobe GitHub repository for the full API, options and examples. Check that page when you need an option the skill does not list.

Not for detailed map data or zoom-based maps
Not for complex 3D scenes; use a general engine such as three.js instead
Use the cobe GitHub repository for the complete option list

What people use it for

A spinning globe with brand-coloured markers in the hero section of a landing page
A globe on an About page showing office locations as markers
A decorative card-sized globe in a product or team section
A draggable globe prototype for a design review

Frequently asked questions

Is the cobejs agent skill free to use?

The skill is published under the MIT licence. The cobe library it teaches the agent to use is a separate project, and the skill's REFERENCES.md points to its GitHub repository for details.

What do I need to use the cobejs skill?

You need a web project using HTML and JavaScript, with the cobe npm package available. React or Next.js is optional. The skill does not run scripts and does not use the network.

Where do I put the cobejs skill folder?

Unzip it into ~/.claude/skills/ to use it across your projects, or into a project's .claude/skills/ folder to limit it to that project. In the Claude apps you can upload it under Settings, then Capabilities, then Skills.

How do I install cobe in my project?

The skill assumes the cobe npm package is part of your project and imports createGlobe from cobe. Ask the agent to set this up, or check the cobe GitHub repository linked in REFERENCES.md for the install details.

Why does my cobe globe look blurry or stretched?

This usually comes from sizing. Set the CSS size of the canvas and also set its width and height scaled by the device pixel ratio. Recreate or update the globe when the window resizes, and clamp the pixel ratio to 1–2 on phones.

Is cobe a good alternative to Leaflet or three.js for a globe?

Cobe suits a small decorative globe with markers. The skill says it is not for detailed map data, zoom or geographic analysis, where a mapping library fits better, and not for complex 3D scenes, where a general engine like three.js is the better choice.

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

This skill suits front-end developers and designers who want a small, animated globe with location markers for a hero or about section, without adding a full 3D engine. It is a poor choice if you need zoomable maps, detailed geographic data, or complex 3D scenes, where a mapping library or three.js would serve you better.

Download the skill