typegpu — Claude Code skill: typed WebGPU in TypeScript
A skill that helps the agent write TypeGPU code: shaders, buffers, pipelines and the @typegpu/react hooks, with the type plumbing handled.
npx skills add software-mansion-labs/skills --skill typegpu -a claude-codeWhat typegpu does
The skill wakes up on TypeGPU work: 'use gpu' functions, tgpu.fn, bind groups, textures, compute and render passes. TypeGPU builds one schema for the GPU type, the buffer layout and the TypeScript side at once, so alignment mistakes show up while you write code, not at runtime. Reference files cover the schemas, shader rules, the std helpers, matrices via wgpu-matrix, encoders, timing and React glue; the agent reads them before generating anything. It is written for TypeGPU 0.12, so check the API surface if the project sits on an older release.
What it helps with
- write a GPU function that matches its schema
- build a bind group layout for runtime-sized arrays
- wire vertex buffers and attribs into a render pipeline
- set up camera matrices with
wgpu-matrix - drive a render loop through
@typegpu/reacthooks
Example prompts for the agent
- Write a TypeGPU compute shader that adds two
d.vec2fstorage buffers - Why does
root.createBuffer(d.arrayOf(d.f32))fail here? - Set up a render loop with
useRootanduseFramefrom@typegpu/react
How to install typegpu
1Skills CLI (Vercel)
npx skills add software-mansion-labs/skills --skill typegpu -a claude-code2Manually: put the files in place
~/.claude/skills/typegpu/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/typegpu/
1Skills CLI (Vercel)
npx skills add software-mansion-labs/skills --skill typegpu -a codex2Manually: put the files in place
.agents/skills/typegpu/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add software-mansion-labs/skills --skill typegpu -a cursor2Manually: put the files in place
.cursor/skills/typegpu/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install software-mansion-labs/skills typegpu2Manually: put the files in place
.github/skills/typegpu/SKILL.md1Skills CLI (Vercel)
npx skills add software-mansion-labs/skills --skill typegpu -a gemini-cli2Platform CLI
gemini skills install https://github.com/software-mansion-labs/skills --path skills/typegpuManually: put the files in place
.devin/skills/typegpu/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add software-mansion-labs/skills --skill typegpu -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about typegpu
How do I install the typegpu skill in Claude Code?
Run npx skills add software-mansion-labs/skills --skill typegpu -a claude-code. The skill lands at ~/.claude/skills/typegpu/SKILL.md.
What does the typegpu skill do?
It gives the agent TypeGPU-specific guidance: schemas, GPU functions, buffers, bind groups, pipelines, React hooks. Shader code and CPU-side resources are treated together, since one depends on the other.
Does it help with raw WebGPU, WGSL-only or Three.js?
No. Code that calls GPUDevice directly without tgpu, plain WGSL questions, Three.js, Babylon.js and WebGL are outside its scope.
