CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

threejs-postprocessing

Three.js post-processing: composer pass chains, built-in renderer effects, and the WebGPU/TSL node pipeline — bloom, depth of field, ambient occlusion, custom screen effects. Use when adding visual effects, color grading, blur, glow, or screen-space shaders, on WebGL or with WebGPU and TSL.

Quality

94%

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.

A high-quality, dense reference skill: executable examples throughout, explicit pass-ordering rules, and an unusually valuable wrong→right Common Mistakes section capturing r175–r186 API churn. Its weaknesses are minor — repeated import blocks and the absence of any progressive-disclosure split, with the WebGPU/TSL section and mistakes list being the obvious candidates for extraction into reference files.

DimensionReasoningScore

Conciseness

The body is dense with non-obvious, version-specific guidance ("The composer's buffers are not multisampled; `antialias: true` on the renderer does not reach them", "bloom() returns only the glow, so add it to the scene color") and never pads with concepts Claude already knows. Minor trimmable redundancy remains: import blocks for EffectComposer/RenderPass/OutputPass are repeated across ~10 examples, and pass-ordering facts (FXAA after OutputPass, SMAA before) appear in Pass Order, Custom Passes, and Common Mistakes — deliberate reinforcement, but still repeated tokens. Not 5 because of that repetition; not 3 because nearly every sentence carries information Claude would otherwise get wrong (r175 signature changes, deprecated Clock/PostProcessing renames).

4 / 5

Actionability

Every section is copy-paste-ready executable code with concrete parameter values and inline explanations ("focus: 10.0, // view-space depth that stays sharp", "new HalftonePass({ shape: 1, radius: 4, ... })"), spanning the common cases: bloom, selective bloom, DOF, SSAO, outline, film/glitch/halftone/vignette, pixelation, custom ShaderPass, renderer setEffects, and the full WebGPU/TSL node pipeline. The Common Mistakes section pairs wrong code with the exact corrected line ("new FilmPass(0.35, 0.5, 648, false) → new FilmPass(0.35, false)"). Later snippets reuse `renderer`/`scene`/`camera` from the Quick Start, which is conventional and does not undermine executability.

5 / 5

Workflow Clarity

The core multi-step process — pass chain construction — is explicitly sequenced with rules: "Build chains in this order: `RenderPass` → linear-space effects (bloom, depth of field, SSAO, outline, ...) → `SMAAPass` ... → `OutputPass` → `FXAAPass` only when FXAA is used", plus per-pass ordering constraints ("SSAOPass darkens the image ... so a `RenderPass` must come before it"). Error-recovery feedback is provided by the Common Mistakes section (26 wrong→right pairs) and debug aids ("ssaoPass.output = SSAOPass.OUTPUT.SSAO (or Blur, Depth, Normal)"). Not 4 because the ordering rules and recovery guidance are explicit rather than merely present with gaps.

5 / 5

Progressive Disclosure

The body is well-sectioned (Quick Start, Pass Order, per-effect sections, WebGPU and TSL, Common Mistakes, See Also) and the See Also section cross-navigates to sibling skills ("threejs-fundamentals — renderer creation, sizing, color spaces"). However, the entire ~500-line skill lives inline in SKILL.md with no bundle files at all; the WebGPU/TSL pipeline (a distinct renderer path) and the 26-entry Common Mistakes list are natural candidates for a references/ file to keep the main body lean. Not 3 because the structure is clean and navigable with no buried references; not 5 because content that could be split out is inlined in a single monolithic file.

4 / 5

Total

18

/

20

Passed

Description

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

An excellent description: concrete capability lists, an explicit 'Use when' clause with natural trigger terms, and clear renderer-path scoping. The only weakness is minor overlap on 'screen-space shaders' with the sibling threejs-shaders skill.

DimensionReasoningScore

Specificity

Multiple concrete capabilities are listed comprehensively across all three supported paths: "composer pass chains, built-in renderer effects, and the WebGPU/TSL node pipeline — bloom, depth of field, ambient occlusion, custom screen effects". Each named capability is a real, distinct feature of the skill. Not 4 because coverage is comprehensive rather than having minor gaps.

5 / 5

Completeness

Both halves are explicit: the 'what' is the concrete capability list above, and the 'when' is a dedicated clause — "Use when adding visual effects, color grading, blur, glow, or screen-space shaders, on WebGL or with WebGPU and TSL." Not 4 because the trigger conditions are explicit and concrete rather than improvable-but-present.

5 / 5

Trigger Term Quality

Natural user phrasings are thoroughly covered: "bloom", "depth of field", "ambient occlusion", "visual effects", "color grading", "blur", "glow", "screen-space shaders", "post-processing", plus renderer terms "WebGL", "WebGPU and TSL" — these are exactly the words a developer would say when they need this skill. Not 4 because no common variation in this domain is obviously missing.

5 / 5

Distinctiveness Conflict Risk

The niche is clear — Three.js post-processing specifically, including the WebGPU/TSL distinction — and would rarely trigger the wrong generic skill. Minor overlap risk remains with the closely related sibling skill `threejs-shaders` (referenced in the body's See Also): the trigger "custom screen effects" / "screen-space shaders" would also fire for general shader-authoring requests that belong to that skill. Not 5 because of that one closely-related overlap; not 3 because the scope is far more specific than a broad domain claim.

4 / 5

Total

19

/

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-postprocessing/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.