CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

threejs-fundamentals

Three.js scene setup: scenes and fog, cameras, the renderer and tone mapping, the animation loop, object hierarchies, transforms, core math and cleanup, on WebGL or with WebGPU and TSL. Use when creating a scene from scratch, configuring a camera or renderer, handling resize, or arranging objects.

Quality

89%

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

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

The content is an exceptionally well-crafted reference: every code block is executable, comments carry version-specific gotchas instead of filler, and deprecated APIs are handled in a dedicated Common Mistakes section. Its main structural weakness is that nearly everything lives inline in SKILL.md with no bundle files, so specialized reference material is not split out despite clear navigation to sibling skills.

Suggestions

Move specialized reference material — ArrayCamera/CubeCamera viewport and cubemap patterns, the Math Utilities catalog (Vector3/Matrix4/Quaternion/Color/MathUtils) — into references/ files, keeping SKILL.md focused on Quick Start, core scene setup, and cleanup with clear one-level-deep pointers.

Add a short ordered setup checklist near the top (import map → renderer → WebGPU init if applicable → scene/camera → animation loop → resize/cleanup) so the implicit per-section workflows read as one explicit sequence.

If the body must stay single-file, add a brief table of contents under the title so the ~490-line reference layout is quicker to navigate.

DimensionReasoningScore

Conciseness

The body is dense, reference-grade code whose one-line comments each encode non-obvious facts ("material.dispose() leaves its textures alone", "deprecated in r182"), with no padded prose or explanations of known concepts; time-sensitive version and deprecation notes are consolidated in the Common Mistakes old-patterns section as the guidelines prefer.

5 / 5

Actionability

Quick Start is a complete copy-paste-runnable program, backed by working import maps for both the WebGL and WebGPU paths, an edge-case-correct cleanup routine, and WebGPU init/backend-detection specifics — fully executable code covering the common cases.

5 / 5

Workflow Clarity

Per-task sequences are explicit and correctly ordered (CubeCamera's hide→update→show, "advance the timer first thing each frame", "await init() right after construction, before setup code touches the renderer"), but this is a topic reference rather than a guided multi-step process, so there is no overarching explicit workflow with validation checkpoints to reach anchor 5.

4 / 5

Progressive Disclosure

Sections are well organized and the See Also list clearly signals eleven one-level-deep sibling skills, but the ~490-line body inlines substantial specialized API reference (ArrayCamera viewport math, the Matrix4/Quaternion/Color catalog, BufferGeometryUtils merging) that would fit separate reference files — anchor 3's "content that should be separate is inline".

3 / 5

Total

17

/

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 description: it lists the concrete capabilities of the skill in third person, explicitly states both what it covers and when to use it, and anchors on specific natural triggers. The only weakness is modest missing synonyms in its trigger vocabulary and slight overlap in scope claims with sibling skills.

DimensionReasoningScore

Specificity

The description enumerates concrete capability areas — "scenes and fog, cameras, the renderer and tone mapping, the animation loop, object hierarchies, transforms, core math and cleanup, on WebGL or with WebGPU and TSL" — giving comprehensive, multi-action coverage of the domain rather than the minor-gaps coverage of anchor 4.

5 / 5

Completeness

It explicitly answers both questions: what ("Three.js scene setup: ... on WebGL or with WebGPU and TSL") and when ("Use when creating a scene from scratch, configuring a camera or renderer, handling resize, or arranging objects"), with concrete trigger phrases matching the anchor-5 example structure exactly.

5 / 5

Trigger Term Quality

Natural phrases like "Three.js", "WebGL", "WebGPU and TSL", "creating a scene from scratch", "configuring a camera or renderer", "handling resize" give good keyword coverage, but common synonyms (e.g. "3D", unspaced "threejs", "WebXR") are missing, falling short of anchor 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

Triggers like "creating a scene from scratch" and "handling resize" are clearly fundamentals-specific, but claimed topics such as "core math and cleanup, the animation loop" overlap with closely related sibling skills (threejs-animation, threejs-performance), matching anchor 4 rather than the minimal-conflict anchor 5.

4 / 5

Total

18

/

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