# Web

> Build and verify interactive HTML experiences in Web Studio's live, sandboxed preview.

- Skill: `autonomous-ai/web` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add autonomous-ai/web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/autonomous-ai/web/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: autonomous-ai (https://skillmd.com/u/autonomous-ai)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/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.

```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+.