CtrlK
BlogDocsLog inGet started
Tessl Logo

threejs-shaders

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

67

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 threejs-shaders in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

71%Scale 1-5

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

This is a comprehensive Three.js shader reference with excellent actionability — nearly every concept is backed by complete, executable code examples covering a wide range of common shader patterns. Its main weaknesses are verbosity (including GLSL built-in function lists and basic type mappings Claude already knows) and lack of progressive disclosure (everything is in one large file when reference sections could be split out). The TSL comparison table at the end is a valuable forward-looking addition.

Suggestions

Move the GLSL built-in functions reference, uniform type mappings, and common material properties into separate reference files (e.g., GLSL_REFERENCE.md, MATERIAL_PROPERTIES.md) to reduce the main file size and improve progressive disclosure.

Remove or significantly trim the GLSL built-in functions section (math, vector, texture functions) — Claude already knows standard GLSL; only Three.js-specific quirks need documenting.

Add a brief workflow section for the common task of developing a custom shader: create minimal shader → verify it renders → add uniforms → test updates → add complexity, to improve workflow clarity for newcomers.

DimensionReasoningScore

Conciseness

The skill is quite long (~400+ lines) and includes extensive reference material like GLSL built-in function lists, vector function lists, and common material properties that Claude already knows. The uniform types table and GLSL declarations section are somewhat redundant. However, the Three.js-specific patterns (onBeforeCompile injection points, ShaderMaterial vs RawShaderMaterial differences) do add value.

3 / 5

Actionability

Nearly every section includes complete, executable JavaScript/GLSL code examples that are copy-paste ready. The examples cover common use cases (texture sampling, vertex displacement, fresnel, dissolve, instancing) with full vertex and fragment shaders, and the onBeforeCompile pattern includes the critical update-in-animation-loop step.

5 / 5

Workflow Clarity

For a reference-style skill, the content is well-sequenced from basics (Quick Start) through intermediate (uniforms, varyings, patterns) to advanced (extending built-in materials, TSL). The debugging section provides validation guidance. However, there's no explicit workflow for the common task of creating and iterating on a custom shader (e.g., start simple, validate, add complexity). Since this is primarily a reference skill rather than a destructive/batch operation, the lack of explicit validation loops is less critical.

4 / 5

Progressive Disclosure

The content is a monolithic file with no bundle files to offload reference material to. The GLSL built-in functions, uniform types reference, and common material properties sections could be split into separate reference files. The 'See Also' links at the bottom are good but reference other skills rather than sub-files. For a skill this long, more content should be externalized.

3 / 5

Total

15

/

20

Passed

Description

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

This is a strong, well-crafted skill description that clearly identifies its niche (Three.js shader programming) with specific technical terms that serve as excellent trigger keywords. It includes an explicit 'Use when' clause with concrete scenarios, and the domain is narrow enough to avoid conflicts with other skills. Minor improvement could come from listing one or two more concrete actions.

DimensionReasoningScore

Specificity

Lists several specific concepts (GLSL, ShaderMaterial, uniforms, custom effects) and actions (modifying vertices, writing fragment shaders, extending built-in materials). Coverage is good but could mention more concrete actions like passing textures, post-processing, or noise generation.

4 / 5

Completeness

Clearly answers both 'what' (Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects) and 'when' (Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials) with explicit trigger phrases.

5 / 5

Trigger Term Quality

Excellent coverage of natural terms users would say: 'Three.js', 'shaders', 'GLSL', 'ShaderMaterial', 'uniforms', 'custom visual effects', 'vertices', 'fragment shaders', 'built-in materials'. These are precisely the terms a developer would use when seeking shader help.

5 / 5

Distinctiveness Conflict Risk

Highly distinctive niche combining Three.js with GLSL shaders. The specific mention of ShaderMaterial, uniforms, fragment shaders, and vertex modification clearly separates this from general Three.js skills or generic graphics skills.

5 / 5

Total

19

/

20

Passed

Validation

81%

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

Validation9 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (688 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

9

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.