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". Open Design serves this in powered-preview mode so Workers and SharedArrayBuffer actually work.
Profile →npx skills add nexu-io/open-design --skill worker-visualizer --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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. ### S
- Why this is a powered artifact
- Resource map
- Workflow
- Step 0 — Read the reference
- Step 1 — Choose the workload
- Step 2 — Build index.html
- Step 3 — Overlay + brand
- Step 4 — Self-review (P0)
What does the worker-visualizer skill do?
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.
How do I install it?
Run `npx skills add nexu-io/open-design --skill worker-visualizer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.