CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

threejs-shaders

Custom GLSL vertex and fragment shaders: uniforms, varyings, shader chunks, extending built-in materials, instanced attributes, plus the same effects as node materials with TSL on WebGPU. Use when writing a shader, a custom material or effect, moving vertices in a shader, or porting GLSL to TSL.

Quality

90%

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

SKILL.md
Quality
Evals
Security

Quality

Content

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

An excellent, current, highly executable reference: complete runnable examples for every topic, explicit debugging feedback loops, and a Common Mistakes section that correctly consolidates version-sensitive deprecations and renames. The only weaknesses are moderate duplication of a few key facts across sections and a monolithic structure where the TSL/WebGPU material could live in a separate reference file.

Suggestions

Consolidate the tonemapping/colorspace includes and instanceMatrix guidance into one canonical section and have Common Mistakes cross-reference it briefly, trimming the repetition across Quick Start, body sections, and the pitfalls list.

Move the WebGPU/TSL section into a references/tsl.md (or similar) file, keeping SKILL.md focused on WebGL shaders with a short pointer, to reduce the single-file token load.

DimensionReasoningScore

Conciseness

The body is dense and version-pinned ("Clock is deprecated in r183", "there is no output_fragment chunk", TSL rename history in Common Mistakes, which functions as the deprecated/old-patterns section) and assumes Claude's competence with no basic-concept padding. However, key facts such as the tonemapping/colorspace includes, instanceMatrix application, and positionLocal vs positionGeometry repeat across Quick Start, body sections, and Common Mistakes, so minor trimming is possible.

4 / 5

Actionability

The Quick Start is fully copy-paste runnable and every section ships complete executable code covering the common cases: displacement, fresnel, dissolve, instancing with custom attributes, onBeforeCompile injection with cache key, and TSL equivalents. Matches the fully-executable anchor.

5 / 5

Workflow Clarity

The core task is unambiguously sequenced (setup, material, frame-loop update), and the Debugging sections provide explicit error-recovery feedback loops: renderer.debug.onShaderError with the assembled shader source, visual debug outputs, and WebGPU's getShaderAsync. Not 4, because validation and error-recovery checkpoints are present rather than merely implied.

5 / 5

Progressive Disclosure

No bundle files exist; the single file is well organized with clear section headers and a See Also pointing to sibling skills, and all content is easily discoverable in one level. However, the ~140-line WebGPU/TSL half (a nearly separate topic) could be split into a reference file, which is the minor organization gap that keeps this at 4 rather than 5.

4 / 5

Total

18

/

20

Passed

Description

88%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 with an explicit capability list and a concrete "Use when..." trigger clause covering the full domain from GLSL shaders to TSL node materials. Its main weakness is the absence of the word "three.js", which is both the most natural trigger term a user would say and the key to distinguishing this skill from generic WebGL/WebGPU shading help.

Suggestions

Add "three.js" to the description (e.g., "Custom three.js GLSL vertex and fragment shaders: ...") so it matches the most natural user phrasing and clearly distinguishes it from generic WebGL/WebGPU shader requests.

Include common phrasings like "vertex shader" or "fragment shader" in the Use-when clause alongside the existing triggers to broaden natural-term coverage.

DimensionReasoningScore

Specificity

"uniforms, varyings, shader chunks, extending built-in materials, instanced attributes, plus the same effects as node materials with TSL on WebGPU" lists six concrete capabilities that comprehensively cover the skill's domain, matching the multi-action comprehensive anchor.

5 / 5

Completeness

It explicitly answers both "what" (the capability list) and "when" with a concrete "Use when..." clause naming specific triggers, exactly matching the anchor-5 pattern. Not 4, because the "when" clause is already explicit and specific rather than improvable.

5 / 5

Trigger Term Quality

"Use when writing a shader, a custom material or effect, moving vertices in a shader, or porting GLSL to TSL" provides good natural trigger phrases, but common user variations such as "three.js", "vertex shader" or "fragment shader" are missing. It sits between the good-coverage (4) and comprehensive-with-synonyms (5) anchors, closer to 4.

4 / 5

Distinctiveness Conflict Risk

GLSL/TSL/WebGPU triggers form a clear niche, but the description never names three.js, so a generic WebGL or WebGPU shader request could route to this skill; minor overlap risk with closely related shader skills keeps it at 4 rather than 5.

4 / 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

CloudAI-X/threejs-skills

Path

skills/threejs-shaders/SKILL.md

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.