vgpu-shaders

vgpu-shaders is a skill for Claude Code, Codex from lukedj78/dev-flow. It costs 260 tokens per session (3,364 once invoked), scanned A, original, MIT.

A development guide and setup tool for using WebGPU shaders in a Next.js 16 project. WebGPU lets browser code run graphics or general calculations on the computer’s graphics processor, while WGSL is the language used to write those shaders.

In plain words
What is it for?
Use it to add visual or compute shaders to Next.js, load WGSL files, support users who prefer reduced motion, and render shader snapshots in CI, an automated build-checking system.
Why use it?
It helps decide whether shader-based rendering is appropriate and covers the project work needed for browser rendering, server-side rendering safety, reduced motion and automated image checks.

Skill for Claude CodeCodex

Part of the dev-flow plugin — 46 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/lukedj78/dev-flow/vgpu-shaders
Any agent
npx skills add lukedj78/dev-flow --skill vgpu-shaders
Clone the repo
git clone --depth 1 https://github.com/lukedj78/dev-flow

Made for: Claude Code, Codex.

Or install dev-flow, the plugin that ships this one along with the rest of its 46 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for vgpu-shaders

README.md
[![agentmods](https://agentmods.dev/badge/skills/lukedj78/dev-flow/vgpu-shaders.svg)](https://agentmods.dev/skills/lukedj78/dev-flow/vgpu-shaders)
Your own site
<a href="https://agentmods.dev/skills/lukedj78/dev-flow/vgpu-shaders"><img src="https://agentmods.dev/badge/skills/lukedj78/dev-flow/vgpu-shaders.svg" alt="Measured on agentmods" height="20"></a>
Per session 260 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,364 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00260 $0.03364
Opus 5 $0.00130 $0.01682
Sonnet 5 $0.00052 $0.00673
Haiku 4.5 $0.00026 $0.00336

Measured 4d ago against content hash af20c66a2ef2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

vgpu-shaders scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

vgpu-shaders/SKILL.md · 225 lines

How it starts

The opening of the file, as written. The whole thing — 225 lines — stays where its author put it; the contents beside it link to each section on GitHub.

vgpu-shaders — should this page have a shader, and what does that cost?

vgpu is Vercel Labs' WebGPU library "designed for agents": one shader renders in the browser, headless in Node, to a PNG at any resolution, to video, and in CI. WGSL becomes a module graph you import like TypeScript — the loader resolves it, reflects bindings, drops unused declarations and emits compact source at build time.

⛔ First: this skill does not document the vgpu API, on purpose

The API is 258 symbols across 20 packages, and Vercel ships a first-party skill generated from the source docs, stamped with vgpuVersion and a gitSha in its own frontmatter. Restating it here would duplicate an artefact that regenerates itself, and would be wrong within a release.

npx skills add vercel-labs/vgpu                      # the generated API skill
npx -y add-mcp https://vgpu.sh/api/mcp -g            # or the MCP
npx -y vgpu docs find <query> | grep -i <term> | cat <symbol>

⚠️ Their skill is named vgpu; this one is vgpu-shaders precisely so both can be installed.

What follows is the half nobody else writes: whether to reach for it, and what you owe the user once you do.

It is not only graphics — but for a dev-flow project it almost always is

WebGPU is a GPU compute API of which rendering is one use, and vgpu exposes both. Compute, ComputeOptions, StorageBuffer and PingPongStorage are first-class, and initFromDevice(device) adopts a GPUDevice another library already created — the documented case being ONNX Runtime Web's WebGPU execution provider, so a model's output stays on the GPU and a shader consumes it with gpu.device.wrapBuffer(output.gpuBuffer), zero copies. It runs in Node too, with Dawn supplying WebGPU. Ownership is explicit: vgpu never calls destroy() on a device it did not request.

Know that path exists; then note it is almost never ours. In this skill set the model runs server-side, through eve and the AI Gateway — client-side inference is a different architecture with its own bill (model download weight, WebGPU availability, a device the page now owns). It earns consideration only when the data genuinely must not leave the machine and the client is a browser. [VERIFY] the ML matrix against the first-party skill (vgpu docs cat ml) before pricing that; it pins specific webgpu, onnxruntime-web and Dawn versions.

Read the full file on GitHub · 225 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 225 lines · 260 tokens per session scan A af20c66a2ef2

Subscribe to this mod's changes

vgpu-shaders is a skill published in the GitHub repository lukedj78/dev-flow (6 stars, last pushed today), licensed MIT. It adds 260 tokens to every session and 3,364 once invoked, about $0.0013 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

agent-code-analyzer

Agent skill for code-analyzer - invoke with $agent-code-analyzer.

ruvnet/ruflo · 19 tokens

agui-dotnet-streaming-chat

Get started with the AG-UI .NET SDK: bootstrap and run your first streaming-chat app (client + server) with the AG-UI .NET NuGet packages (AGUI.Client, AGUI.Server, AGUI.Formatting, AGUI.Abstractions). USE FOR: which packages to install and how to wire them; constructing an AGUIChatClient against an endpoint and…

ag-ui-protocol/ag-ui · 223 tokens

agui-dotnet-sample-step

Add a GettingStarted sample Step (a Server/Client pair) to the AG-UI .NET SDK that demonstrates one protocol feature the way we want users to write it. USE FOR: adding a new samples/GettingStarted/StepNN Server+Client pair, wiring it into AGUI.slnx and the integration-test project, giving it a deterministic…

ag-ui-protocol/ag-ui · 168 tokens

agui-dotnet-protobuf

Use the protobuf wire transport (instead of the default Server-Sent Events) for an AG-UI connection with the AG-UI .NET SDK — a compact binary event stream negotiated via the Accept header. USE FOR: making an AGUIChatClient prefer protobuf by wiring an AGUIEventStreamHandler with ProtobufEventStreamFormatter (then…

ag-ui-protocol/ag-ui · 162 tokens

evaluating-code-models

Evaluates code generation models across HumanEval, MBPP, MultiPL-E, and 15+ benchmarks with pass@k metrics. Use when benchmarking code models, comparing coding abilities, testing multi-language support, or measuring code generation quality. Industry standard from BigCode Project used by HuggingFace leaderboards.

Orchestra-Research/AI-Research-SKILLs · 68 tokens

taiyi-ui-design

TaiyiForge 第 4 阶段 — UI/UX 契约,产出 UI-DESIGN.md。四端通用。.

Dong90/oh-my-taiyiforge · 35 tokens