Worker visualizer

Skill nexu-io/open-design/design-templates/worker-visualizer

🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

Install

npx -y skills add nexu-io/open-design --skill worker-visualizer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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". Open Design serves this in powered-preview mode so Workers and SharedArrayBuffer actually work.

SKILL.md

4.0 KB, as published. Nobody here has run it

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

Open Design 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

worker-visualizer/
├── SKILL.md      ← you're reading this
└── example.html  ← a working 12k-particle SharedArrayBuffer sim (READ FIRST)

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.

Step 3 — Overlay + brand

HUD with the title and 2–3 live stat tiles (particle count, transport mode, fps). Map accent color to the active DESIGN.md when present; otherwise a dark ground with one vivid accent.

Step 4 — Self-review (P0)

Worker constructs with no SecurityError; sim runs.
Main-thread render holds ~60fps under the full workload.
SharedArrayBuffer path engages when crossOriginIsolated is true; postMessage fallback engages otherwise — verify BOTH branches degrade cleanly.
No unbounded growth: velocities/positions stay stable over minutes.
The "Transport" stat truthfully reports which path is live.