AutoGineer
Generated banner for Cobejs
Generated logo for Cobejs

Cobejs

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Use when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The cobe.js skill provides a streamlined approach to implementing lightweight, interactive 3D globes using the cobe library. It covers essential setup, including canvas configuration, marker placement, and lifecycle management, making it ideal for developers who need a performant alternative to heavier 3D frameworks like Three.js for decorative or interactive globe elements.

What it does

  • Provides patterns for initializing and rendering interactive WebGL globes.
  • Explains how to configure globe appearance, including colors, scale, and lighting.
  • Details the integration of location markers with custom coordinates and sizes.
  • Offers guidance on handling canvas resizing and device pixel ratios for responsiveness.
  • Covers lifecycle management, including pausing and destroying globe instances.

When to use it

  • When you need a lightweight spinning globe for hero sections or about pages.
  • When you want to avoid the overhead of full 3D libraries like Three.js.
  • When you require a performant, interactive globe with minimal setup.
  • When building responsive web interfaces that require dynamic data visualization on a globe.

Advantages

  • Extremely lightweight compared to full-featured 3D engines.
  • Optimized for performance with minimal configuration.
  • Easily integrates into modern frontend frameworks like React and Next.js.
  • Supports interactive features like rotation and custom marker placement.

Usage examples

“How do I add a spinning globe to my React hero section using cobe?”
The agent provides a code snippet demonstrating how to initialize the globe within a React component, including setting up the canvas ref and handling the render loop.
“How can I add markers to my cobe globe for specific cities?”
The agent explains how to define the markers array with latitude and longitude coordinates and how to customize the marker color and size.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/cobejs/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip cobejs.zip -d .agents/skills

Documentation by Meng To

cobe.js — Lightweight WebGL Globe Skill

When to use

  • A “spinning globe” / location markers in hero or about pages

  • You want a small, focused globe lib (not full three.js)

  • Decorative + interactive (markers, rotation) with minimal setup

Key APIs/patterns

  • Core:

    • import createGlobe from "cobe"

    • const globe = createGlobe(canvas, { ...options, onRender(state) { ... } })

  • Important options (common):

    • devicePixelRatio, width, height

    • phi, theta (rotation angles)

    • scale, dark, diffuse

    • baseColor, markerColor, glowColor

    • markers: [{ location: [lat, lon], size, color? }]

  • Lifecycle:

    • globe.toggle() pauses RAF

    • globe.destroy() removes instance

Common pitfalls

  • Canvas sizing mismatch

    • Set CSS size AND set canvas width/height scaled for DPR.

  • Not updating on resize

    • Recompute width/height and recreate or update params.

  • Too high DPR on mobile

    • Clamp DPR to 1–2.

Quick recipe: responsive globe with markers

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();
});

What to ask the user

  • Globe size and placement (hero, section, card)?

  • Marker locations + colors (brand-aligned)?

  • Interaction needs (drag to rotate vs. ambient spin)?

Files

REFERENCES.md

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/cobejs · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download cobejs.zip