Skip to content
Get packs

cobe.js Globe Builder

Add a lightweight, interactive WebGL globe with markers to a web page

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

What it does

This skill teaches an AI agent how to add a small, animated 3D globe to a website using the cobe.js library, instead of a heavier 3D engine. Once installed, the agent knows the setup steps, the main options (rotation, colours, size, location markers), how to keep the canvas sharp and responsive, and common pitfalls such as resize handling and high pixel density on phones. It can also ask you for placement, marker locations and interaction preferences before writing code.

Great for

  • Front-end developers adding a decorative spinning globe to a hero or about section
  • Designers prototyping a globe with brand-coloured location markers
  • Teams who want a small globe library rather than full three.js

Skip it if

  • Projects needing detailed map data, zoom, or geographic analysis, since this is a decorative globe library (a mapping library would fit better)
  • Complex 3D scenes, which need a general-purpose engine such as three.js

Try asking

  • “Add a spinning globe with markers for our office locations to the about page”
  • “Put a responsive cobe globe in the hero section of my Next.js landing page”
  • “Change the globe colours to match our brand and add a marker for Singapore”
Step-by-step guide: how to use cobe.js Globe BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    cobejs.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip cobejs.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

  • Describe the globe's placement and size (hero, section, card) so the agent sizes the canvas correctly
  • Give marker coordinates as latitude and longitude, or name the cities and let the agent look them up
  • Test on a phone after setup, since pixel density and resize behaviour are the most common problems

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.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.