WebNN

Procedures

Step 1: Identify the browser integration surface

1. Inspect the workspace for browser entry points, UI handlers, worker entry files, and any existing model-loading or inference abstraction layer.
2. Execute node scripts/find-webnn-targets.mjs . to inventory likely frontend files and existing WebNN markers when a Node runtime is available.
3. If a Node runtime is unavailable, inspect the nearest package.json, HTML entry point, framework bootstrap files, and worker entry files manually to identify the browser app boundary.
4. If the workspace contains multiple frontend apps, prefer the app that contains the active route, component, or user-requested feature surface.
5. If the inventory still leaves multiple plausible frontend targets, stop and ask which app should receive the WebNN integration.
6. If the project is not a browser web app, stop and explain that this skill does not apply.

Step 2: Confirm WebNN viability and choose the runtime shape

1. Read references/webnn-reference.md before writing code.
2. Read references/examples.md when choosing between a direct WebNN graph flow and an adapter around an existing browser ML runtime.
3. Read references/compatibility.md when native support, preview flags, device behavior, or backend differences matter.
4. Read references/troubleshooting.md when context creation, graph build, tensor readback, or device selection fails.
5. Verify that the feature runs in a secure context and in a Window or Worker context (DedicatedWorker, SharedWorker, or ServiceWorker).
6. If the feature must run on the server, train models, or depend on cloud inference, stop and explain the platform mismatch.