CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

threejs-postprocessing

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

Quality

78%

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/threejs-postprocessing/SKILL.md

The canonical home for this skill is threejs-postprocessing in CloudAI-X/threejs-skills

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 well-organized, code-dense reference that is immediately actionable for the most common effects, with a clear Quick Start and sensible pass-ordering guidance. Its weaknesses are token bloat from duplicated setup/import/resize blocks, a broken WebGPU snippet and a version-stale FilmPass signature, and a monolithic inline structure with no reference files despite the size.

Suggestions

Deduplicate the repeated EffectComposer setup, import lists, and resize handling — keep them once in Quick Start / Setup and have other sections reference them.

Split the per-effect snippets (SSAO, halftone, outline, custom shaders, etc.) into references/ files with one-level-deep links from SKILL.md.

Fix the WebGPU example (remove the conflicting 'postProcessing' import/declaration, use the correct node-module exports) and either update or flag the legacy FilmPass constructor signature alongside the version-specific 'r150+' claim.

DimensionReasoningScore

Conciseness

The body is almost entirely code with inline parameter comments and no concept explanations Claude already knows, which is efficient; but it 'could be tightened' per the 3 anchor — the EffectComposer setup, imports, and resize handling are duplicated three times (Quick Start, EffectComposer Setup, Handle Resize), and version-sensitive content like 'WebGPU Post-Processing (Three.js r150+)' sits outside any deprecated/version-note section. It is not a 2 because there is no conceptual padding or fluffy prose, and not a 4 because the repeated setup blocks are a substantial share of the file rather than minor trimmings.

3 / 5

Actionability

Nearly every section is copy-paste-ready code with concrete parameter values and comments ('1.5, // strength', 'focus: 10.0'), plus runtime adjustment snippets, matching the 4 anchor ('mostly executable guidance; concrete code with minor gaps'). Not a 5 because of small gaps: the WebGPU block is not executable as written (it imports 'postProcessing' as a named import and then redeclares 'const postProcessing', and 'pass, bloom, dof' are not exported from that module path), and the FilmPass constructor uses the legacy 4-argument signature that newer three.js versions replaced.

4 / 5

Workflow Clarity

Quick Start gives an unambiguous start-to-finish sequence (create composer -> add RenderPass -> add effect pass -> call composer.render() instead of renderer.render()), and 'Combining Multiple Effects' numbers the pass ordering with explicit ordering rules ('Anti-aliasing (always last before output)'), matching the 4 anchor. Not a 5 because there are no validation or troubleshooting checkpoints (e.g., verifying the composer renders, common black-screen causes), though this reference-style skill carries no destructive/batch risk that would cap the score.

4 / 5

Progressive Disclosure

There are no bundle files (no references/, scripts/, assets/), and the ~600-line body inlines fifteen-plus per-effect snippets and custom shader examples that clearly belong in separate reference files, matching the 3 anchor ('some structure... content that should be separate is inline'). Structure itself is good — clear section headers, a Quick Start up front, and a See Also list — so it is above the 2 anchor (which requires minimal structure), but the entire catalog sits in SKILL.md rather than being split behind one-level-deep references, so it does not reach 4.

3 / 5

Total

14

/

20

Passed

Description

83%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 explicitly states both what the skill covers (EffectComposer, bloom, DOF, screen effects) and when to use it, with natural trigger terms. The main weaknesses are a slightly generic 'screen effects' phrase, missing common trigger variations (bloom, anti-aliasing) in the when-clause, and mild overlap risk with adjacent three.js skills.

Suggestions

Replace the generic 'screen effects' with a couple more concrete capabilities (e.g., anti-aliasing, vignette, custom ShaderPass) to lift specificity toward comprehensive coverage.

Add natural trigger variations users actually say to the when-clause, such as bloom, anti-aliasing/FXAA, or 'when the user mentions post-processing or screen effects'.

DimensionReasoningScore

Specificity

Names the domain ("Three.js post-processing") and several concrete capabilities ("EffectComposer, bloom, DOF, screen effects"), which matches the 'several specific actions; minor gaps' anchor rather than the vague or minimal anchors. It falls short of the 5 anchor because the items are component names rather than concrete actions and 'screen effects' is generic, while it clearly exceeds the 3 anchor ('names domain and 1-2 concrete actions, but not comprehensive') by listing four specific technologies.

4 / 5

Completeness

Explicitly answers both questions: the what is "Three.js post-processing - EffectComposer, bloom, DOF, screen effects" and the when is "Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders" with five concrete trigger phrases, exactly matching the 5 anchor. The 4 anchor ('when could be more explicit or specific') does not apply since the trigger list is already explicit and specific; the 3 anchor ('when is missing or only weakly implied') is clearly inapplicable.

5 / 5

Trigger Term Quality

The when-clause uses natural user phrasing — "adding visual effects", "color grading", "blur", "glow", "creating custom screen-space shaders" — giving good keyword coverage as in the 4 anchor ('good keyword coverage; a few natural terms missing'). Not a 5 because common variations a user would actually say are missing from the trigger clause (e.g., bloom, anti-aliasing/FXAA, post-processing itself as a trigger phrase, or a 'when the user mentions X' form).

4 / 5

Distinctiveness Conflict Risk

Pinning to "Three.js" plus "post-processing" and "screen-space shaders" gives it a clear niche with mostly distinct triggers, matching the 4 anchor ('mostly distinct; minor overlap risk'). Not a 5 because "adding visual effects" is broad enough to also match non-post-processing three.js requests (particles, materials, lighting), and "creating custom screen-space shaders" overlaps with a general shader-development skill like the 'threejs-shaders' skill it cross-references.

4 / 5

Total

17

/

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

Total

15

/

16

Passed

Repository

calesthio/OpenMontage

Path

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