Guide · Agent skill
How to use the Gooey Blob System agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gooey-blob-system skill teaches an AI agent to build a liquid-looking visual effect on a web page: several soft circles that melt together when close and separate as they drift apart. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what to check before using it. You do not need prior experience with agent skills to follow it.
Gooey Blob SystemMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the gooey-blob-system ZIP from this page.
- 2Unzip the folder. Extract it so the folder is named gooey-blob-system and contains SKILL.md.
- 3Place the skill. Move the folder to ~/.claude/skills/ for personal use or to a project's .claude/skills/ folder.
- 4Or upload in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Ask for the effect. Describe the page and the blob effect you want, optionally naming $gooey-blob-system.
- 6Review in a browser. Open the generated HTML and confirm the blobs merge and separate smoothly.
What the gooey-blob-system skill makes the agent do
A skill is a folder of instructions that an AI agent loads so it knows how to handle a specific kind of task. This one covers a specific web visual technique. Without it, an agent may fake the effect with plain blurred circles that never actually merge. With it, the agent is told to build the effect with SVG filters: a Gaussian blur followed by a color matrix threshold.
The skill also tells the agent to animate several overlapping circles so they approach and separate naturally, to keep boundaries soft with no hard edges, and to keep motion smooth rather than jittery. It names four uses: a background accent, a loader, a cursor field, or hero atmosphere.
- Blur plus color threshold produces the merging look.
- Circles approach and separate based on proximity.
- Motion is smooth and cohesive, not fast or jittery.
- A static or simplified fallback is provided for low-motion contexts.
Install the skill from the ZIP download
Download the ZIP for the skill from this page. Unzip it so the folder is named gooey-blob-system and contains SKILL.md. Then place it in one of two locations: your personal skills folder at ~/.claude/skills/ to make it available everywhere, or a project's .claude/skills/ folder to limit it to one project.
If you use the Claude apps instead of a folder, you can upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/gooey-blob-system/
- Project: .claude/skills/gooey-blob-system/ inside your project
- Claude apps: Settings → Capabilities → Skills → upload
Trigger the skill with a natural request
You do not need a special command. Describe the visual you want and mention the blob or gooey effect. The demo prompt in the package starts with the skill name, which is a clear way to request it directly.
Good requests name the page, the purpose and the feel. Add a note about reduced motion if your audience needs it, since the skill already calls for a static fallback.
- Use $gooey-blob-system to build a responsive hero background with merging blobs.
- Make a gooey loader in standalone HTML with smooth motion and a static fallback.
- Add a liquid cursor effect built from SVG blob filters to this page.
Use $gooey-blob-system to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.Use the included demo as a reference
The package includes a demo folder with demo/index.html, which the demo prompt treats as the visual and interaction reference. The folder also includes demo/PROMPT.md with sample prompts and demo/source.json. Point the agent at demo/index.html when you want output that matches its look and motion.
Review the result in a browser. Check that the circles visibly fuse when they touch and split when they move apart. If they look like separate blurred dots, ask the agent to adjust blur, contrast and spacing together.
- Open the generated HTML file directly in a browser to test it.
- Tune blur, contrast and shape spacing together so merging stays visible.
- Ask for a reduced-motion version if the animation feels too busy.
Safety and requirements
The skill lists no required dependencies. It does not run scripts and does not use the network, according to its listing. Its files are instructions and a demo page, so installing it does not run code on your machine.
The skill does not state performance limits. Many animated SVG filters on one page can slow down low-end devices, so test heavy pages on a modest phone or laptop before shipping.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Performance limits are not specified in the skill.
What people use it for
- A soft, liquid background or hero section for a landing page.
- A decorative loader that uses merging shapes instead of a spinner.
- A cursor effect where shapes follow the pointer and blend together.
- A code-based alternative to exporting an animated graphic from a design tool.
- A pricing or talent platform hero that uses the included demo as its visual reference.
Frequently asked questions
How do I install the gooey blob system agent skill?
Download the ZIP from this page and unzip it so the folder is named gooey-blob-system. Place it in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the gooey blob system skill require anything else?
The skill lists no required dependencies. It does not run scripts and does not use the network, according to its listing.
Is the gooey blob system skill free?
The skill is published under the MIT licence. Check the licence file in the source repository for the full terms before you reuse it.
How does the gooey effect work with SVG filters?
The skill builds the effect with a Gaussian blur followed by a color matrix threshold. The blur merges nearby circles and the threshold gives the shape a crisp but soft-edged fluid boundary.
Why do my blobs look like separate blurred circles?
The skill warns against faking the effect with plain blurred circles. Ask the agent to tune blur, contrast and shape spacing together so the circles visibly merge when they are close.
Are there alternatives if this skill does not fit my project?
If you need a precise brand logo or a strict geometric layout, this effect is a poor fit because it is intentionally soft and organic. For heavy production pages, test performance carefully, since the skill does not specify performance limits.
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
Use this skill if you want an agent to build a soft, merging blob effect for a hero background, loader or cursor accent, and you can test it in a browser. Pick a different approach if you need a literal logo, strict geometry, or a heavy page with many animated filters, since the skill does not cover performance limits.
Download the skill