CtrlK
BlogDocsLog inGet started
Tessl Logo

r3f-shaders

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

64

Quality

76%

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/r3f-shaders/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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 highly actionable, code-rich reference with a clear core workflow, but it is a single monolithic file that re-explains basic GLSL and repeats boilerplate. Splitting the GLSL function reference and injection-point tables into separate reference files, and trimming the duplicate boilerplate, would materially improve both conciseness and progressive disclosure.

Suggestions

Move the "GLSL Built-in Functions" and "Common Injection Points" sections into separate files under references/ and link to them from SKILL.md to improve progressive disclosure and reduce inline bulk.

Trim repeated boilerplate — the identical vUv/gl_Position vertex header and the random/noise function definitions appear multiple times; define them once and reference or shorten subsequent examples.

Remove or condense explanations of concepts Claude already knows (e.g., "Varyings pass data from vertex to fragment shader", basic math function names) to improve token efficiency.

DimensionReasoningScore

Conciseness

The body is mostly lean, executable code, but it re-explains basics Claude already knows (a "GLSL Built-in Functions" section listing abs/sin/cos/mix, and "Varyings pass data from vertex to fragment shader") and repeats identical boilerplate (the same vUv/gl_Position vertex header and the random/noise functions) across several examples — enough padding/repetition to keep it below a 4.

3 / 5

Actionability

Provides abundant copy-paste-ready, executable code across shaderMaterial, raw THREE.ShaderMaterial, uniforms, varyings, common patterns, onBeforeCompile, instancing, external files, and debugging — covering the common cases well; minor gaps like the TypeScript example using `...` shader placeholders and a few samples omitting the extend() call keep it just short of a 5.

4 / 5

Workflow Clarity

The core creation flow is given as a clear numbered sequence (1. Define the material, 2. Extend R3F, 3. Use in component) and the skill is creative rather than destructive, so no validation cap applies; it lacks an explicit "verify the shader compiles/runs" checkpoint beyond the separate debugging section, leaving it just below a 5.

4 / 5

Progressive Disclosure

There are no bundle files in references/, scripts/, or assets/ and no internal links to deeper material — the entire ~875-line reference (GLSL function tables, chunk injection points, noise functions) is inlined in SKILL.md. Section headers give it reasonable structure, but content that clearly belongs in separate reference files is not split out, so it sits at the midpoint.

3 / 5

Total

14

/

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, specific description that clearly answers both what the skill does and when to use it, with concrete trigger phrases. It is mostly distinct from sibling skills but has minor overlap with r3f-postprocessing and could include a few more synonyms.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials" — alongside specific concepts (GLSL, shaderMaterial, uniforms), giving comprehensive coverage of the shader-creation domain.

5 / 5

Completeness

Explicitly states both what ("React Three Fiber 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 concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural-keyword coverage ("custom visual effects", "fragment shaders", "GLSL", "built-in materials") but misses common synonyms such as "vertex shaders" and "post-processing"; not quite the comprehensive synonym coverage of a 5.

4 / 5

Distinctiveness Conflict Risk

"React Three Fiber shaders" is a clear niche, but "custom visual effects" and fragment-shader work overlap with the related r3f-postprocessing skill referenced in See Also — minor overlap risk with a closely related skill rather than minimal.

4 / 5

Total

18

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

Total

15

/

16

Passed

Repository
AzizBelhassan/timeverse
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.