$npx -y skills add autonomous-ai/openharness --skill web --agent claude-code
Installs into .claude/skills of the current project.
Are you the author of Web?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/autonomous-ai-web)
---
name: web
description: Build and verify interactive HTML experiences in Web Studio's live, sandboxed preview.
---
# 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.
```sh
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+.
