A workflow for deciding whether to add one GPU-rendered visual surface to a web page, then building and checking it. GPU-rendered surfaces include WebGL shaders and React Three Fiber 3D scenes, which draw graphics using the device's graphics processor.

Use it when adding, changing, or reviewing a canvas, shader background, WebGL effect, or React Three Fiber scene.

Shaders and 3D effects can add page weight, battery use, and visual distraction. This workflow makes the effect's purpose explicit and checks the static alternative before adding it.

gpu-surface — Skill for Claude Code and Codex by frankxai

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.

Any agent

npx skills add frankxai/claude-skills-library --skill gpu-surface

Clone the repo

git clone --depth 1 https://github.com/frankxai/claude-skills-library

Made for: Claude Code, Codex.

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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/frankxai/claude-skills-library/gpu-surface/github.svg)](https://agentmods.dev/skills/frankxai/claude-skills-library/gpu-surface)

Your own site

<a href="https://agentmods.dev/skills/frankxai/claude-skills-library/gpu-surface"><img src="https://agentmods.dev/badge/skills/frankxai/claude-skills-library/gpu-surface/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/frankxai/claude-skills-library/gpu-surface"><img src="https://agentmods.dev/badge/skills/frankxai/claude-skills-library/gpu-surface.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 167 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,350 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

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.

Model	Per session	Once invoked
Fable 5.1	$0.00167	$0.02350
Opus 5.5	$0.00067	$0.00940
Sonnet 5.5	$0.00033	$0.00470
Haiku 4.5	$0.00017	$0.00235

Measured 2d ago against content hash ad063bec84ac, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

gpu-surface 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 2d 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.

packs/web-excellence/skills/gpu-surface/SKILL.md · 191 lines

How it starts

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

GPU surface

A shader or a 3D scene is the loudest thing a page can carry. It costs a second WebGL context, a JavaScript chunk, battery on a phone, and attention. This skill decides whether the page earns it, then builds it so the still version is as considered as the moving one.

1. Earn it — before any install

Read the repo's rules. In taste.md, design.md, and TASTE.md/DESIGN.md, search for gradient, glass, 3D, WebGL, canvas, motion, and set-piece. When a line refuses the effect, stop and quote it. A tutorial recommending the effect does not outrank the repo.
One GPU surface per page. Count what the route already renders: grep -rnE "<Canvas|ShaderMount|@paper-design/shaders|@react-three/fiber" app components, then follow the imports into the route. When one exists, the new surface replaces it or does not ship. When the repo caps scroll set-pieces at one per page, a GPU hero counts toward that cap too.
Name its job in one sentence. For example, it frames the product, carries the brand mark, or shows a state change. "Makes it look premium" is not a job.
Try the static version first. A token-coloured CSS gradient, an optimised image, or an exported SVG noise texture costs no JavaScript and no GPU. When the static version does the job, ship that and stop here.

2. Pick the engine

Need	Use	Why
Moving gradient, grain, noise, god rays, liquid metal on a logo, glass distortion over an image	`@paper-design/shaders-react`	One fragment shader on one canvas, no three.js. It pauses itself when off-screen and when the tab is hidden. `Static*` variants exist.
Real geometry, camera, lights, models, or 3D interaction	`@react-three/fiber` + `@react-three/drei`	A full scene graph, and the heaviest option. Only when the job needs depth.
Frosted glass panels over DOM content	CSS `backdrop-filter` first	A refraction library only when the brand file asks for refraction. The npm package named `liquid-glass-js` is not the `dashersw/liquid-glass-js` repository.
ShaderGradient	Prefer Paper's `MeshGradient` or `GrainGradient`	As of 2026-10-20, `@shadergradient/react` was last published 2025-12-08 and runs on the three.js stack for what Paper does in a single shader.

Read the full file on GitHub · 191 lines

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.

2d ago First seen · 191 lines · 167 tokens per session scan A ad063bec84ac

Subscribe to this mod's changes

gpu-surface is a skill published in the GitHub repository frankxai/claude-skills-library (46 stars, last pushed today), licensed MIT. It adds 167 tokens to every session and 2,350 once invoked, about $0.0007 per session on Opus 5.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-11-10.

Claude Code Design and UX Frontend Productivity React ai-tools anthropic prompt-engineering skills

gpu-surface next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
gpu-surfacefrankxai/claude-skills-library	Skill	46	today	MIT	A	167	Claude Code, Codex
shadcn-uichidekina/aria-superpowers	Skill	2	1mo ago	none	A	73	Claude Code
prototypevinvcn/mattpocock-skills-zh-CN	Skill	5.7k	yesterday	MIT	A	39	Claude Code, Codex
ephemeral-generative-ui-architectroedyrustam/vibes-plug	Skill	125	yesterday	MIT	A	47	Cursor
website-design-clonerroedyrustam/vibes-plug	Skill	125	yesterday	MIT	A	32	Cursor
generic-react-ux-designertravisjneuman/.claude	Skill	110	yesterday	MIT	A	69	Claude Code
generic-react-design-systemtravisjneuman/.claude	Skill	110	yesterday	MIT	A	59	Claude Code