Skill: Visualizador de Trabalhador

Produz um único index.html autônomo que move computação pesada por quadro para um Web Worker e renderiza o resultado em um canvas, mantendo a thread principal em suaves 60fps.

Por que este é um artefato potencializado

O OpenDesign detecta new Worker( / SharedArrayBuffer / OffscreenCanvas e renderiza este arquivo em visualização potencializada — um iframe cross-origin-isolated com allow-same-origin. Isso significa que Web Workers externos e de blob são construídos com sucesso, SharedArrayBuffer é definido (crossOriginIsolated === true) e importScripts funciona. Na antiga sandbox opaca, todos os três falhavam; aqui eles simplesmente funcionam.

Mapa de recursos

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

Fluxo de trabalho

Passo 0 — Leia a referência

Leia example.html. Observe a divisão: o worker integra posições a cada tick; a thread principal apenas lê + desenha. Ele detecta recursos crossOriginIsolated e usa um SharedArrayBuffer para cópia zero quando disponível, recorrendo a uma cópia transferível postMessage caso contrário. Sempre envie esse fallback para que o artefato ainda anime se o isolamento estiver desativado.

Passo 1 — Escolha a carga de trabalho

Escolha UM trabalho limitado por computação que valha a pena descarregar:

• Campo de Partículas / N-corpos (padrão): milhares de corpos com uma lei de força barata.
• Fractal: tempo de escape de Mandelbrot/Julia em um buffer ImageData.
• Autômato celular / reação-difusão: grade atualizada no worker.
• Visualizador de dados/áudio: transforma um stream em barras/anéis a cada quadro.

Passo 2 — Construa index.html

• Um arquivo, zero requisições externas. Construa o worker a partir de um Blob + URL.createObjectURL (inline sua fonte), ou incorpore-o como um URL data:.
• Prefira SharedArrayBuffer para estado grande por quadro: aloque na thread principal, passe o SharedArrayBuffer para o worker e leia a mesma visualização Float32Array/Uint8ClampedArray enquanto desenha. Proteja em typeof SharedArrayBuffer !== 'undefined' && crossOriginIsolated.
• Caminho de fallback: se não estiver isolado, postMessage um ArrayBuffer transferível a cada quadro.
• Considere OffscreenCanvas + canvas.transferControlToOffscreen() para renderizar dentro do worker para as cenas mais pesadas.

Passo 3 — Sobreposição + marca

• HUD com o título e 2–3 tiles de estatísticas ao vivo (contagem de partículas, modo de transporte, fps). Mapeie a cor de destaque para o DESIGN.md ativo quando presente; caso contrário, um fundo escuro com um destaque vívido.

Passo 4 — Auto-revisão (P0)

• Worker constrói sem SecurityError; sim roda.
• Renderização da thread principal mantém ~60fps sob a carga de trabalho completa.
• O caminho SharedArrayBuffer é engajado quando crossOriginIsolated é verdadeiro; o fallback postMessage é engajado caso contrário — verifique se AMBOS os ramos degradam de forma limpa.
• Sem crescimento ilimitado: velocidades/posições permanecem estáveis por minutos.
• A estatística "Transporte" relata verdadeiramente qual caminho está ativo.