CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

r3f-postprocessing

React Three Fiber post-processing - @react-three/postprocessing, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

62

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/r3f-postprocessing/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, well-sectioned reference with executable code for every effect and thoughtful extras (selective bloom, conditional/animated effects, mobile performance tuning). Its main weaknesses are token bloat from repeated boilerplate and an exhaustive inline catalog that should be split into reference files rather than kept in one ~760-line SKILL.md.

Suggestions

Move the exhaustive per-effect prop catalog (SSAO, Glitch, Scanline, Grid, DotScreen, etc.) and the full BlendFunction enum listing into a references/effects.md file, keeping SKILL.md to Quick Start, installation, and the 3-4 most common effects with pointers to the reference file.

Deduplicate the import block repeated in nearly every snippet — state imports once (or only in Quick Start) and show just the JSX for each effect.

Fix the small executable gaps: wrap fragment snippets in a minimal component context, import BlendFunction in the GodRays example, and replace the '{sunRef.current && <GodRays ...>}' pattern with a stable conditional so the effect mounts reliably.

DimensionReasoningScore

Conciseness

Prose is lean and code-dense, but the ~760-line body repeats an import block in nearly every snippet, includes a 40-line exhaustive BlendFunction enum listing, and catalogs every effect's props at length — material Claude can largely derive from the library docs and could be tightened significantly.

3 / 5

Actionability

Nearly every effect has copy-paste-ready JSX with per-prop comments, and the custom Effect / wrapEffect sections are complete and executable. Minor gaps: several snippets are fragments outside a component context, the GodRays example references BlendFunction without importing it, and '{sunRef.current && ...}' inside render is unreliable on first render.

4 / 5

Workflow Clarity

The layout follows a clear progression (Quick Start, Installation, EffectComposer, per-effect reference, combining, custom effects, performance) and no destructive or batch operations require validation checkpoints. It stops short of anchor 5 because it presents no stepwise sequence with checkpoints — it is a lookup catalog rather than a guided workflow.

4 / 5

Progressive Disclosure

Sections are well-organized with a quick-start-first ordering, but the skill is monolithic: no references/ files exist, and the exhaustive effect catalog and blend-function listing are prime candidates for split-out reference files. 'See Also' points to sibling skills rather than bundle files.

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: third-person, concise, names the exact package and several concrete effects, and includes an explicit 'Use when...' clause with natural trigger terms. Its only weaknesses are modest coverage gaps in the effect list and slight trigger overlap with adjacent shader/material skills.

DimensionReasoningScore

Specificity

The description names the domain and several concrete capabilities ('@react-three/postprocessing, bloom, DOF, screen effects', 'creating custom screen-space shaders'), but omits other core effects it covers (vignette, anti-aliasing, AO, tone mapping), so coverage has minor gaps rather than being comprehensive.

4 / 5

Completeness

It explicitly answers both what it does ('@react-three/postprocessing, bloom, DOF, screen effects') and when to use it with concrete trigger phrases ('Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders'), matching the top anchor's pattern.

5 / 5

Trigger Term Quality

Natural user phrases like 'visual effects', 'color grading', 'blur', and 'glow' plus the effect names give good keyword coverage, but common variations such as 'anti-aliasing', 'postfx', or 'film grain' are missing, keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

The named package and effect names carve a clear niche, but the broad trigger 'adding visual effects' and 'custom screen-space shaders' slightly overlap with general shader/materials skills, presenting minor conflict risk.

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 (760 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

AzizBelhassan/timeverse

Path

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