autonomous-ai / web

Web Studio

index.html is the entry point. Local JS, CSS, images and ES modules work through the shared viewer;
use relative URLs. No bundler is required. Prefer local assets for a reliable first open.

Field's starter uses WebGL2 with a Canvas 2D fallback. Its geometry, palette and controls are all
editable. Keep GPU resources and geometry buffers reusable; coalesce continuous updates in rAF.
Pause animation when hidden and respect reduced motion. Controls must still work when paused.
A new visual direction can replace the starter entirely when that serves the user's request.

Verify the experience

Keep proof.json aligned with the current page. Each action names a CSS selector, followed by
click: true, fill or select; assertions use exact text or
attribute: {"name":"aria-pressed","value":"true"}. Include a state change and its meaningful result.

node "$WEB_SKILLS/web/scripts/screenshot.mjs" "$HARNESS_WORKSPACE/index.html"
node "$WEB_SKILLS/web/scripts/perf.mjs" "$HARNESS_WORKSPACE/index.html"

The proof runs the real sandboxed HTTP viewer, checks the actions and browser errors, saves
.harness/last.png and a dependency-hashed browser-proof.json, and refreshes the verdict.
Inspect the image and test a narrow viewport as well as desktop.

The performance probe drives those controls while measuring rAF delays and long tasks, rather than
measuring an idle page. Target ≥55 fps and <2% slow frames. Record the hardware/renderer and dataset;
a software WebGL renderer is not a measurement of the user's GPU. PLAYWRIGHT_CHANNEL=chrome can
measure installed Chrome. Do not label an unmeasured or failing page “60 fps.”

Helpers need Playwright plus Chromium, installed in the shared isolated-web-viewer package or addressed by
PLAYWRIGHT_MODULE (absolute path to playwright/index.mjs). Missing tooling is a failed proof,
not permission to report success. The preview itself needs only Node 20+.