Guide · Agent skill
How to use the Globe Particles agent skill (globe-particles)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Globe Particles skill is a set of instructions that teaches an AI coding agent to build one specific visual: a 3D globe made of thousands of small glowing points, with a thinner ring of points around it, rendered in WebGL with the Three.js library. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what to check before you ship the result. By the end you will be able to add the skill to your agent and produce a globe graphic for a landing page or hero section.
Globe ParticlesMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the globe-particles ZIP from this page.
- 2Unzip into a skills folder. Place the globe-particles folder in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Make sure Three.js is available. Confirm your project loads the Three.js library as "three" in a module environment.
- 5Ask for the globe in plain words. Describe a planetary or data-globe hero visual and name your primary brand colour.
- 6Review and test. Check the canvas, colours and motion in a real browser on desktop and mobile.
What the globe-particles skill makes the agent do
An agent skill is a folder containing a SKILL.md file with instructions the agent reads when the task matches. When this skill is active, the agent writes the HTML, CSS, shader code and Three.js setup for a globe-like particle visualization. The result is a dense luminous sphere of points with a thinner orbital ring or flattened disc, tilted and shown on a dark background.
The skill is scoped to that visual. Its instructions say not to change full page layout, copy, or unrelated motion systems, so the rest of your page should stay as it was. It uses the design's primary colour for the ring and glow accents and keeps the core neutral or white.
- Dense spherical core of luminous points with a clear globe silhouette
- Thinner outer orbital ring or flattened disc
- Circular shader points so particles stay crisp
- Mouse-driven tilt and a gentle breathing motion
- Reduced-motion handling: the animation loop stops when the user prefers reduced motion
Install the globe-particles skill
Download the ZIP for globe-particles from this page. Unzip it so that the globe-particles folder (containing SKILL.md) sits in one of the following locations. For a personal skill available across your projects, use ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal: ~/.claude/skills/globe-particles/
- Project: .claude/skills/globe-particles/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
You do not need a special command. Describe the visual you want in ordinary words that match the skill's purpose: a planetary, orbital, or data-globe effect rendered with particles. The skill's description tells the agent when to use it, so terms like globe, orbital, particle sphere, or data globe usually work. The demo prompt file also refers to the skill as $globe-particles, which you can use to call it directly.
Be specific about where the globe goes and what the page is for. Mention your primary brand colour and whether the globe should sit in the hero section. Ask the agent to keep the rest of the page unchanged if you want to limit edits.
- "Add a globe particle visual to the hero section of my landing page, using my primary colour for the glow."
- "Use $globe-particles to create a responsive standalone HTML page with an orbital data-globe hero."
- "Make an infrastructure-themed particle globe for our networking product page. Do not change the headline or copy."
What you need before you start
The skill assumes a web project that loads the Three.js library, imported as "three", in a modern JavaScript module environment. The browser must support WebGL. If your site cannot run WebGL or does not load Three.js, the effect will not work as intended.
The skill also notes that the effect runs a continuous animation loop. Many animated WebGL canvases on one page, or use on low-power devices, may hurt performance. Plan to use it on a small number of pages where it adds clear value.
- Three.js library available as "three"
- A browser with WebGL support
- A modern JavaScript module environment
- No scripts are run by the skill and it makes no network calls (per the listing)
Review the output and adapt it
The skill provides the canvas markup, CSS that sizes it to a square with a maximum width of 760px, a shader pair, and a Three.js recipe. The recipe function initGlobeParticles takes a canvas and an options object, so you can change values such as point counts, radius, camera distance, tilt and the accent colour. Ask the agent to explain any part you do not understand before you change it.
Check the result in a real browser on desktop and mobile. Confirm that the globe fits your layout, that it looks right on your background colour, and that the page still behaves as before everywhere else.
- Review the canvas class globe-particles-canvas and its data-globe-particles attribute
- Adjust accentColor or coreColor in the options if the brand colour needs tuning
- Test on a lower-powered device to confirm the animation runs smoothly
What people use it for
- Landing page hero section with a planetary or orbital globe visual
- Infrastructure or networking product page with a data-globe graphic
- AI-themed marketing visual built from a particle sphere and ring
- Adapting a ready-made WebGL particle effect as a starting point for a custom component
Frequently asked questions
How do I install the globe-particles agent skill?
Download the ZIP from this page and unzip it so the globe-particles folder sits in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings, then Capabilities, then Skills.
Is the globe-particles skill free to use?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository for the full terms before using it in a commercial project.
What do I need to run the globe particle effect?
You need the Three.js library imported as "three", a browser with WebGL support, and a modern JavaScript module environment. Without WebGL or Three.js the visual will not render.
Does the globe-particles skill run scripts or use the network?
According to the listing, the skill does not run scripts and does not use the network. It provides instructions, markup, shader code and a Three.js recipe for the agent to write into your project.
Will the skill change the rest of my website?
It is designed not to. Its instructions limit it to the globe visual and tell the agent not to change full page layout, copy, or unrelated motion systems. Still, review the agent's changes before you deploy.
Can I use the globe on a page with many animations or on mobile?
Use caution. The effect runs a continuous animation loop, so many WebGL canvases or low-power devices may struggle. Test performance on real devices and limit the globe to pages where it matters.
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
Choose globe-particles if you need a premium, specific planetary or data-globe visual rendered with real WebGL particles and you are comfortable with Three.js in your project. Pick a different approach if you need full page layouts, if your pages must run on low-power devices with many animations, or if your site cannot run WebGL.
Download the skill