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.

65

Quality

77%

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

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/webgpu-threejs-tsl/SKILL.md

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

SKILL.md
Quality
Evals
Security

Quality

Content

67%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.

The SKILL.md body is a lean, well-organized overview with executable TSL snippets and an exemplary contents listing. Its critical flaw is that none of the 15 referenced bundle files (docs/, examples/, templates/, REFERENCE.md) actually exist in the skill directory, so the progressive-disclosure structure collapses and the skill's substance is unresolvable.

Suggestions

Add the referenced bundle files (docs/core-concepts.md, examples/basic-setup.js, templates/webgpu-project.js, REFERENCE.md, and the rest) or remove the 'Skill Contents' listing — as shipped, all 15 referenced paths are dangling and the skill cannot deliver its advertised depth.

Add a short sequenced workflow (with a validation checkpoint, e.g., 'check renderer.backend / handle init failure') for the multi-step use cases the body names, such as GLSL→TSL migration and device-loss recovery, instead of only listing them as triggers.

Trim the 'When to Use This Skill' bullet list — it duplicates the frontmatter description's trigger clause and costs tokens without adding navigation value.

DimensionReasoningScore

Conciseness

The body is efficient: tight code snippets with purposeful comments ('// instead of material.map', '// Instead of: sin(time * 2.0 + offset)') and one-line file descriptions rather than padded prose. It sits at anchor 4 ('efficient; minor instances of over-explanation') rather than 5 because the 'When to Use This Skill' bullet list restates the frontmatter description's triggers, and the opening TSL definition slightly explains what the linked docs already cover.

4 / 5

Actionability

The Quick Start ('import * as THREE from "three/webgpu"... await renderer.init(); material.colorNode = color(0xff0000).mul(oscSine(time))') plus the Import Pattern, Node Materials, Method Chaining, and Fn() sections give concrete, executable JavaScript matching anchor 4. It falls short of anchor 5's fully copy-paste-ready coverage because the quick start omits scene/mesh/render-loop setup needed to actually run it, deferring completeness to example files.

4 / 5

Workflow Clarity

For a reference-style skill the structure is clear: Quick Start establishes the init sequence (import → WebGPURenderer → await init → node material), and 'Key Concepts' sections each show a concrete before/after pattern — matching anchor 4's 'clear sequence with most checkpoints present'. It is not anchor 5 because multi-step tasks like 'Migrating from GLSL to TSL' or device-loss recovery are listed as use cases but have no sequenced steps or validation checkpoints in the body, and not anchor 3 since no risky operation is left without at least a pointer to docs (e.g., docs/device-loss.md).

4 / 5

Progressive Disclosure

The body is well-organized and lists 15 bundle files one level deep (docs/, examples/, templates/, REFERENCE.md) with one-line descriptions — good structure on paper. However, scoring against the actual bundle: no references/, scripts/, assets/, docs/, examples/, or templates/ directories exist, so every referenced path is dangling and the promised deep content is unreachable. This is 'minimal structure' in effect (anchor 2) — navigation is broken because the disclosure targets do not exist — rather than anchor 3's 'references present but not clearly signaled', since signaling is clear but the files are absent.

2 / 5

Total

14

/

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 that clearly states what the skill covers and gives an explicit 'Use this skill when...' trigger clause with natural, distinctive keywords. The only nit is the 'Comprehensive guide' framing and topic-style rather than action-verb phrasing, which keeps specificity just below maximum.

DimensionReasoningScore

Specificity

The description enumerates concrete capability areas — 'WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration' — which are specific, though framed as topics ('Covers X') rather than actions and prefixed with the mild buzzword 'Comprehensive guide'. This puts it above anchor 3 (only 1-2 concrete actions) but below anchor 5's fully action-verb-driven comprehensive coverage.

4 / 5

Completeness

It explicitly answers both: what ('Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL... Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and 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 — a direct match to anchor 5.

5 / 5

Trigger Term Quality

'Three.js WebGPU, TSL shaders, node materials, or GPU compute' are natural phrases a user would say, matching anchor 4's 'good keyword coverage; a few natural terms missing'. It stops short of anchor 5's comprehensive synonym coverage (e.g., no 'WebGPU renderer', 'compute shaders', or 'shaders' standalone), but well above anchor 3's missing-variations level.

4 / 5

Distinctiveness Conflict Risk

'WebGPU-enabled Three.js applications using TSL' carves out a clear niche with distinct triggers ('TSL shaders', 'GPU compute in Three.js') and minimal conflict risk with generic Three.js or general shader skills, matching anchor 5. It is not merely 'somewhat specific' (anchor 3) — the TSL/WebGPU pairing is highly distinctive.

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
englishstventures/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.