Guide · Agent skill
How to use the Worker Visualizer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The worker-visualizer skill is an add-on for an AI agent that tells it how to build an interactive visual, such as a particle system or fractal, as one self-contained index.html file. The heavy calculations run in a background Web Worker and are drawn to a canvas, so the page stays smooth at about 60 frames per second. This guide explains what the skill does, how to install it, how to ask for it, and where its limits are.
Worker Visualizernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the worker-visualizer ZIP from this page. It contains SKILL.md and example.html.
- 2Unzip into a skills folder. Extract the folder into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Ask for a visualizer. Describe the visual you want, using terms like web worker, particle system, fractal or audio visualizer.
- 5Open the output in OpenDesign preview. View index.html in the OpenDesign powered preview, where Workers and SharedArrayBuffer are enabled.
- 6Check the stats and both paths. Confirm the sim runs, the frame rate is near 60 fps, and the Transport stat shows the live mode.
What is an agent skill, and what does this one make the agent do?
An agent skill is a folder containing a SKILL.md file that gives an AI agent instructions for a specific kind of task. When the skill is installed and your request matches its triggers, the agent follows those instructions.
This skill makes the agent produce a single self-contained index.html page. Heavy per-frame compute, such as thousands of particles or a fractal, runs in a Web Worker off the main thread. The main thread reads the results and draws them to a canvas. The page also gets a small on-screen overlay showing live stats such as particle count, transport mode and frame rate.
Install the worker-visualizer skill
Download the ZIP of the worker-visualizer skill from this page. The skill contains two files: SKILL.md and example.html.
Choose one of these install locations. For a personal install available in all projects, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/worker-visualizer/
- Project: .claude/skills/worker-visualizer/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with a natural request
You do not need a special command. Describe what you want and use words close to the skill's triggers. The skill's description names requests containing terms such as "web worker", "simulation", "particle system", "physics", "off-main-thread", "fractal", "real-time compute", or "audio/data visualizer".
The skill is designed to run in the OpenDesign preview environment, where Workers and SharedArrayBuffer work. Use that environment to view the output.
- Build a particle system of about 10,000 particles that drifts around the cursor, as one index.html file.
- Make a Mandelbrot fractal explorer that computes in a web worker and renders to canvas.
- Create a real-time audio visualizer with rings that react to a data stream, using a web worker.
What the agent builds
The skill asks the agent to pick one compute-heavy job. The options in the skill are a particle or N-body field (the default), a Mandelbrot or Julia fractal, a cellular automaton or reaction-diffusion grid, and a data or audio visualizer.
The worker integrates positions or other state each tick. When SharedArrayBuffer is available and the page is cross-origin isolated, the main thread and worker share memory. Otherwise the page falls back to copying a transferable ArrayBuffer with postMessage each frame. The skill's self-review checklist asks the agent to verify both branches.
- Particle or N-body field (default)
- Mandelbrot or Julia fractal rendered into ImageData
- Cellular automata or reaction-diffusion grid
- Data or audio visualizer drawing bars or rings
Review the output and check both code paths
Open index.html in the preview. Confirm that the worker starts without a SecurityError and that the simulation runs. Check that the frame rate holds near 60 fps under the full workload, and that the Transport stat reports the path that is actually running.
The skill notes that the output is hand-built code that may need tuning. Read the generated code before relying on it, especially the worker setup and the fallback branch.
- Worker starts with no SecurityError
- Frame rate stays near 60 fps at full load
- Transport stat matches the live path (SharedArrayBuffer or postMessage fallback)
- Positions and velocities stay stable over time
Safety notes: scripts and network
This skill runs scripts: the generated page runs JavaScript in the browser, including the Web Worker. The skill states that it does not use the network. The skill's build rules ask for one file with zero external requests, with the worker source inlined through a Blob and URL.createObjectURL or embedded as a data: URL.
Review the HTML before you open it outside the preview, because you are running code the agent wrote.
- Runs scripts: yes (JavaScript in the browser)
- Uses network: no, according to the skill, which asks for zero external requests
What people use it for
- A particle field of thousands of bodies that responds to the mouse, delivered as one HTML file for a design review.
- A Mandelbrot or Julia fractal explorer whose escape-time calculation runs in a worker.
- An audio or data visualizer with bars or rings for a demo or prototype.
- A front-end learning example showing Web Worker and SharedArrayBuffer patterns with a postMessage fallback.
Frequently asked questions
Is the worker-visualizer skill free?
The skill is listed under the Apache-2.0 licence. This page does not state a price, so check the licence text in the source repository for the terms that apply.
What do I need to use it?
You need a browser with Web Worker support, and an OpenDesign or compatible SKILL.md agent environment to preview the output. SharedArrayBuffer needs cross-origin isolation, which the OpenDesign powered preview provides.
Why does my output show the postMessage fallback instead of SharedArrayBuffer?
The SharedArrayBuffer path only engages when crossOriginIsolated is true. If the page is not cross-origin isolated, the skill's fallback copies a transferable ArrayBuffer with postMessage each frame, which is slower. Running the file in the OpenDesign powered preview avoids this.
Can I use this outside OpenDesign?
The skill is designed for the OpenDesign preview environment. The fallback path works without isolation but is less performant, so the skill is not described as suitable for production apps outside OpenDesign's powered preview.
How does this compare with a simple animation or a static page?
A Web Worker adds complexity. For simple static pages or basic animations, the source says a Worker adds complexity without benefit, so a plain canvas or CSS animation is the better choice.
What are the files in the skill?
The skill has two files: SKILL.md, which holds the instructions, and example.html, a working 12k-particle SharedArrayBuffer simulation that the agent reads first.
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 are a designer, developer or creator who wants an interactive particle, fractal or audio visualizer delivered as one HTML file, and you can review the code. Pick something else if you need a simple static page or a basic animation, or a production app that must run outside OpenDesign's powered preview.
Download the skill