CtrlK
BlogDocsLog inGet started
Tessl Logo

webgpu-threejs-tsl

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

68

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

The canonical home for this skill is webgpu-threejs-tsl in dgreenheck/webgpu-claude-skill

SKILL.md
Quality
Evals
Security

Quality

Content

78%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured reference-style skill body: concise, code-forward, with excellent bundle navigation and a clear entry point. The main gaps are minor — a slightly redundant trigger section, and code examples that stop just short of copy-paste runnable.

Suggestions

Trim the opening TSL definition sentence and the "When to Use This Skill" section (it duplicates the frontmatter description's trigger clause) to reclaim tokens.

Make the Quick Start fully copy-paste runnable (scene, camera, animation loop, DOM attach) or explicitly state that `examples/basic-setup.js` is the copy-paste starting point.

In the Fn() example, show how `normalWorld` and `viewDir` are obtained (e.g., import them from 'three/tsl') so the snippet is executable as written.

DimensionReasoningScore

Conciseness

The body is lean and code-forward, but contains minor trimmable material: the opening definition sentence ("TSL... is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings") and the "When to Use This Skill" list, which largely duplicates the frontmatter description. Not a 5 due to this redundancy; clearly above 3 because there is no padding or explanation of concepts Claude already knows beyond the one-line TSL definition.

4 / 5

Actionability

Mostly executable guidance: a Quick Start snippet ("new THREE.WebGPURenderer(); await renderer.init();"), concrete node-material property swaps ("material.colorNode = texture(map)"), a chaining example, and an Fn() example. Not a 5 because the Quick Start is a fragment (no scene/camera/render loop), the Fn() example uses normalWorld/viewDir without showing how to obtain them, and copy-paste-ready equivalents are only reachable via the file listing.

4 / 5

Workflow Clarity

The Quick Start gives an unambiguous entry sequence (create renderer → await init → build node material) and deeper multi-step work is clearly delegated to the enumerated docs/examples/templates. No destructive or batch operations are involved, so no validation checkpoints are required; not a 5 because no multi-step workflow (e.g., a project setup or GLSL→TSL migration sequence) is actually walked through in the body.

4 / 5

Progressive Disclosure

The "Skill Contents" section enumerates every bundle file with a one-line description, grouped by category (Documentation, Examples, Templates, Reference), and the body keeps only the quick start and key concepts inline — a clear overview with well-signaled, one-level-deep references and easy navigation, matching the top anchor.

5 / 5

Total

17

/

20

Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states concrete technical scope, includes an explicit and well-phrased trigger clause, and occupies a clearly distinct niche. The only soft spots are topic-style rather than action-style capability phrasing and slightly incomplete synonym coverage.

DimensionReasoningScore

Specificity

Lists several specific coverage areas — "WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration" — but these are topic areas introduced by "Covers" rather than concrete actions, and "Comprehensive guide" is mild padding. Not clearly a 5 since it lacks action-verb phrasing like the top anchor; well above 3 because five distinct technical areas are named.

4 / 5

Completeness

Explicitly answers both: "what" ("developing WebGPU-enabled Three.js applications using TSL... Covers WebGPU renderer setup... WGSL integration") and "when" ("Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js") with concrete trigger phrases, matching the top anchor's structure exactly.

5 / 5

Trigger Term Quality

The trigger clause includes natural terms users would say — "Three.js WebGPU, TSL shaders, node materials, GPU compute" — giving good keyword coverage. Not a 5 because common variations like "WebGPU renderer", "compute shader", or "migrating from GLSL" are absent; clearly above 3 since multiple relevant natural phrases are present.

4 / 5

Distinctiveness Conflict Risk

Clear niche — WebGPU + Three.js + TSL — with distinct, unambiguous triggers; minimal risk of firing for the wrong skill. It would not plausibly conflict with generic Three.js or general shader skills because the WebGPU/TSL qualifiers are explicit.

5 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
englishstreetventures/osn
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.