Source profileQuality 74/100

nexu-io/open-design/design-templates/worker-visualizer/SKILL.md

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 SharedArrayBuf

Source repository stars
91,167
Declared platforms
0
Static risk flags
0
Last source update
2026-08-25
Source checked
2026-08-25
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSourceFAQ

Decision brief

What it does: where it fits

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.

Best for

  • Use when the brief asks for a "web worker", "simulation", "particle system", "physics", "off-main-thread", "fractal", "real-time compute", or "audio/data visualizer".

Not for

  • Tasks that require unconfirmed production actions or broad system permissions.
  • Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/worker-visualizer"
Safe inspection promptEditorial

Inspect the Agent Skill "worker-visualizer" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/design-templates/worker-visualizer/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    Workflow

    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 s…

    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.
  2. 02

    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 s…

    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…
  3. 03

    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 visu…

    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.
  4. 04

    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.

    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 SharedArray…Fallback path: if not isolated, postMessage a transferable ArrayBuffer each frame.

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score74/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars91,167SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
nexu-io/open-design
Skill path
design-templates/worker-visualizer/SKILL.md
Commit
edfa6b5f447e95cb120eae030f03baba00dc34de
License
Apache-2.0
Collected
2026-08-25
Default branch
main
View the original SKILL.md

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

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.

Frequently asked questions

What to verify before installation and use

What does the worker-visualizer source document cover?

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.

How do I install worker-visualizer?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/worker-visualizer". Inspect the command and pinned source before running it.

Alternatives

Compare before choosing

Computed 9841

respira-press/agent-skills-wordpress

design-system-synthesizer

Use when the user says 'build a design system for my site', 'extract design tokens', 'capture my brand', or 'build my style guide', or after a rebrand. Reads representative pages, theme files, and media to extract logo, colors, typography, spacing, and components, then writes a visible style-guide page.

2026-08-190 platforms
Computed 9830

MoizIbnYousaf/marketing-cli

higgsfield-generate

Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "

2026-08-170 platforms
Computed 9778

KerberosClaw/kc_ai_skills

md2ppt

Use when the user wants to turn a Markdown report into a presentation-quality .pptx via interactive design decisions and a reusable hand-coded build script. Drives pre-analysis, global style choices, optional per-slide layout dialogue, python-pptx composition, and optional LibreOffice render self-check. NOT a generic auto-converter, NOT for PDF output, and NOT a fixed brand-template pipeline — brand integration is handled ad hoc through helper primitives.

2026-08-210 platforms
Computed 9647

maquina-app/rails-claude-code

mvp-creator

Create comprehensive MVP documentation for Rails applications. Use this skill whenever a user describes a new app idea, wants to explore a SaaS concept, needs competitor research, or is starting a new project from scratch — even if they don't explicitly say "MVP". Triggers on "I have an idea for...", "I want to build...", "help me plan...", "research competitors for...", "create a business plan for...", "design a brand for my app", "set up Claude for my Rails project", "bootstrap an app", or any

2026-08-160 platforms