Agent skill · design visual · nexu-io
worker-visualizer
A real-time data/particle/simulation visualizer whose heavy compute runs in a Web Worker (off the main thread), optionally sharing memory with the UI via SharedArrayBuffer, and renders to a canvas at 60fps. Produced as a single self-contained `index.html`. Use when the brief asks for a "web worker", "simulation", "particle system", "physics", "off-main-thread", "fractal", "real-time compute", or "audio/data visualizer". OpenDesign serves this in powered-preview mode so Workers and SharedArrayBuffer actually work.
Why this skill is useful
Provides domain-specific knowledge on implementing real-time simulations using Web Workers and SharedArrayBuffer, which the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Worker Visualizer Skill Produce a single self-contained index.html that moves heavy per-frame compute into a Web Worker and renders the result to a canvas, keeping the main thread at a smooth 60fps. Why this is a powered artifact OpenDesign detects new Worker( / SharedArrayBuffer / OffscreenCanvas and renders this file in powered preview — a cross-origin-isolated iframe with allow-same-origin. That means external and blob Web Workers construct successfully, SharedArrayBuffer is defined (crossOriginIsolated === true), and importScripts works. In the old opaque sandbox all three failed; here they just work. Resource map Workflow Step 0 — Read the reference Read example.html. Note the split: the worker integrates positions each tick; the main thread only reads + draws. It feature-detects crossOriginIsolated and uses a SharedArrayBuffer for zero-copy when available, falling back to a transferable postMessage copy otherwise. Always ship that fallback so the artifact still animates if isolation is off. Step 1 — Choose the workload Pick ONE compute-bound job worth offloading: Particle / N-body field (default): thousands of bodies with a cheap force law. Fractal: Mandelbrot/Julia escape-time into an ImageData buffer. Cellular automata / reaction-diffusion: grid updated in the worker. Data/audio visualizer: transform a stream into bars/rings each frame. Step 2 — Build index.html One file, zero external requests. Build the worker from a Blob + URL.createObjectURL (inline its source), or embed it as a data: URL. Prefer SharedArrayBuffer for large per-frame state: allocate on the main thread, pass the SharedArrayBuffer to the worker, and read the same Float32Array/Uint8ClampedArray view while drawing. Guard on typeof SharedArrayBuffer !== 'undefined' && crossOriginIsolated. Fallback path: if not isolated, postMessage a transferable ArrayBuffer each frame. Consider OffscreenCanvas + canvas.transferControlToOffscreen() to render inside the worker for the heaviest scenes. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/worker-visualizer--0319d5