Skip to content
Get packs

Worker Visualizer

Builds a smooth real-time particle, simulation or data visualizer with heavy compute moved to a Web Worker

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent builds a single self-contained index.html page that runs heavy calculations (such as thousands of particles or a fractal) in a background Web Worker, then draws the results to a canvas so the page stays smooth at about 60 frames per second. It also adds a small on-screen overlay showing live stats like particle count and frame rate, and includes a fallback path so the animation still works when shared memory is unavailable. The skill is designed for the OpenDesign preview environment, where browser features like Workers and SharedArrayBuffer are enabled.

Great for

  • Designers or developers who want an interactive generative visual or particle animation as a single HTML file
  • Front-end developers exploring Web Worker and SharedArrayBuffer patterns for off-main-thread rendering
  • Creators building audio or data visualizers for demos or prototypes

Skip it if

  • Simple static pages or basic animations, where a Worker adds complexity without benefit
  • Production apps that need to run outside OpenDesign's powered preview, since SharedArrayBuffer requires cross-origin isolation and the skill's fallback path is less performant
  • Non-technical users expecting a finished product without reviewing the generated code, as the output is a hand-built HTML file that may need tuning

Try asking

  • “Make a 12,000-particle gravity simulation I can drag the mouse through, running off the main thread”
  • “Build a Mandelbrot fractal explorer in a single HTML file that stays responsive while zooming”
  • “Create a real-time audio visualizer with rings that react to a data stream”
  • “Build a reaction-diffusion pattern animation with a live FPS and particle count overlay”
Step-by-step guide: how to use Worker VisualizerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    worker-visualizer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip worker-visualizer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip worker-visualizer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for a specific workload (particles, fractal, cellular automata, or audio bars) so the agent picks one clear compute job
  • Open the generated index.html in OpenDesign's powered preview to confirm the SharedArrayBuffer path is active, shown by the Transport stat
  • Review the inline worker code before sharing the file, since it runs automatically in the browser

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.