ogpu: Skill for Claude Code

Scaffold a OGPU example

Stand up a complete, runnable OGPU example: renderer boot, camera + orbit controls, an update loop, and one spinning cube built the canonical way — new Box(gpu) → new Shader(...) + new UniformBuffer(...) → new Mesh({ shader, state, bindGroups }). The point is a clean, idiomatic starting point the user immediately builds on, not a finished piece.

A shell script generates the two files (class + shader); you wire it into src/main.js afterward. The split exists because file generation is fixed boilerplate (delegate it) but the main.js edits are structured insertions into an existing file (do them precisely with Edit).

Workflow

1. Get the example name. It's used verbatim as the class name; the directory and ?src= value are its lowercased form. Convention here is a PascalCase class in a lowercase dir (e.g. HelloWebGPU in hellowebgpu/). If the user gives a casual name, PascalCase it for the class.

2. Run the generator from anywhere (it resolves the repo root itself):

   .claude/skills/scaffold-app/scripts/scaffold-app.sh <Name>
   

   It creates examples/<name>/<Name>.js + examples/<name>/cube.wgsl and refuses to overwrite an existing example dir (surface the error, don't force).

3. Wire src/main.js — three insertions, matching the surrounding style:

   • an import { <Name> } from '@examples/<name>/<Name>'; with the others;
   • a <name>: () => new <Name>(), entry in the views map;
   • a { view: '<name>', label: '<Label>', folder: '<name>' }, entry in the items array inside renderLanding(), under the most fitting { section: '...' } header, so it shows on the gallery landing page.

4. Validate the shader without a browser: node scripts/validate-shaders.mjs examples/<name>/cube.wgsl (runs naga). The generated cube always passes; re-run after any edits.

5. Tell the user it boots at ?src=<name> (npm run dev, then http://localhost:5173/?src=<name>).