AutoGineer
Generated banner for Globe Gl
Generated logo for Globe Gl

Globe Gl

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Data and AI
  • MIT
  • No issues found
Download ZIP

From the author

Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
— the description by Meng To

AutoGineer summary

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

The globe-gl skill provides structured guidance for integrating the Globe.GL library into web projects. It covers the setup process for both plain HTML and React environments, detailing how to implement various data layers such as points, arcs, polygons, and heatmaps. The skill includes best practices for container sizing, performance optimization for mobile devices, and styling tips for effective data overlays.

What it does

  • Provides quick-start code snippets for ESM and script tag implementations.
  • Explains how to configure and layer data including points, arcs, and polygons.
  • Offers guidance on integrating Globe.GL with React via specific bindings.
  • Advises on CSS container sizing to ensure proper globe rendering.
  • Suggests performance optimizations for handling large datasets on mobile.
  • Provides styling recommendations for visual clarity and aesthetic impact.

When to use it

  • When you need to visualize geographic data on a 3D globe in a web application.
  • When you are setting up a new Globe.GL project and need a standard boilerplate.
  • When you need to add specific data layers like hex bins or custom 3D objects.
  • When you are troubleshooting performance issues with globe rendering on mobile devices.
  • When you need to choose between plain HTML or React-based integration patterns.

Advantages

  • Simplifies the setup process for complex WebGL-based globe visualizations.
  • Provides clear patterns for both vanilla JavaScript and React development.
  • Includes actionable performance tips for mobile-friendly data visualization.
  • Covers a wide range of layer types for diverse data representation needs.

Usage examples

“How do I set up a basic Globe.GL instance in a plain HTML file?”
The agent provides a script tag-based code snippet to initialize a globe and attach it to a DOM element.
“What are the best practices for displaying point data on a globe without lagging?”
The agent suggests reducing point counts and optimizing point size for mobile performance.
“How can I add arc layers to my existing globe visualization?”
The agent explains the specific method to define and pass arc data to the globe instance.
“Should I use React for my globe project?”
The agent asks about your specific requirements and explains the benefits of using react-globe.gl versus plain HTML.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/globe-gl/download

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

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

Documentation by Meng To

Globe.GL Skill

Workflow

  1. Confirm environment (plain HTML, framework, React bindings) and the data layers needed.

  2. Provide a minimal quick-start snippet plus the layer-specific fields.

  3. Add interactions or extra layers only if requested.

  4. Call out container sizing and performance considerations.

Quick start (ESM)

<script type="module">
  import Globe from 'globe.gl';

  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

Quick start (script tag)

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<script>
  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

Common layers to mention

  • Points

  • Arcs

  • Polygons

  • Paths

  • Heatmaps and hex bins

  • Labels or HTML elements

  • 3D objects and custom layers

Practical tips

  • Size the container with CSS; the globe fills its parent element.

  • Reduce point count or size for performance on mobile.

  • Use a darker globe texture for neon-style data overlays.

Questions to ask when specs are missing

  • Which layers do you need (points, arcs, polygons, labels)?

  • What should the globe size be on desktop vs mobile?

  • Do you want drag/rotate interactions or a static globe?

  • Is this plain HTML, React (react-globe.gl), or another framework?

Files

demo/PROMPT.md

Globe Gl Demo Prompts

Minimal prompt

Use $globe-gl to create a polished standalone HTML example that clearly demonstrates the skill.

Recreate the demo

Use $globe-gl to build a responsive reference demo for this capability:

Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.

Direction

Center a luminous orbital data globe inside a restrained technical interface.

Use an art-directed composition with one clear focal point, restrained supporting copy, and enough surrounding interface to show how the technique behaves in a real product or landing page.

Canonical example

  • Build a 360-point rotating sphere with a faint orbital ellipse.

  • Overlay a Live field label, 72.4 metric, and Drag to steer hint.

Deliverable

  • Create demo/index.html as a standalone document.

  • Keep CSS and JavaScript inline.

  • Put any required images, fonts, models, textures, or vendor files in demo/assets/.

  • Do not add a framework, package manager, build step, or node_modules.

  • Add controls only when they help inspect or replay the technique.

Acceptance checks

  • Keep the demo responsive from 390px through 1440px.

  • Use semantic HTML, visible focus states, and reduced-motion handling.

  • Keep all HTML, CSS, and JavaScript inside demo/index.html.

  • Use only relative local asset paths.

  • Pause rendering when the page is hidden and resize the canvas without distortion.

  • Keep labels readable above the visualization.

Remix prompt

Use $globe-gl and keep the same implementation contract, but change the subject, copy, palette, and content hierarchy. Preserve the core technique, accessibility behavior, responsive rules, and performance constraints demonstrated by the reference.

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/globe-gl · 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 globe-gl.zip