CtrlK
BlogDocsLog inGet started
Tessl Logo

3d-web-experience

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.

54

Quality

61%

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 ./skills/3d-web-experience/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 technically credible reference with mostly executable code, dense comparison tables, and a useful decision tree, undermined by structural redundancy (duplicated lists and headers, repeated description) and workflows that name validation checks without integrating them as steps. The total absence of bundle files makes it a monolithic single-file skill where reference material is inlined.

Suggestions

Remove the duplicated 'Expertise'/'Capabilities' lists, the repeated description paragraph, and the doubled pattern headers; delete the persona filler paragraph.

Turn the 'Validation Checks' into explicit numbered checkpoints inside the configurator/portfolio workflows (e.g., after scene setup, verify WebGL fallback and DPR before proceeding).

Move depth material — the 3D model pipeline, performance targets, and validation checks — into a references/ file (e.g., references/model-pipeline.md) and link to it from a lean overview, keeping SKILL.md focused on stack selection and quick-start snippets.

DimensionReasoningScore

Conciseness

Mostly efficient — the tables, decision tree, and code blocks are dense and useful — but there is real padding: the frontmatter description is repeated verbatim in the body, the 'Expertise' and 'Capabilities' lists duplicate each other (Three.js, R3F, Spline, WebGL listed twice), a persona paragraph ('You bring the third dimension to the web. You know when 3D enhances and when it's just showing off.') adds nothing Claude needs, and four pattern sections have doubled headers (e.g., '### 3D Stack Selection' followed immediately by '## 3D Stack Selection'). It is above 2 because there is no over-explanation of concepts Claude already knows; it is below 4 because the duplicated lists, headers, and fluff are several sections that could be trimmed.

3 / 5

Actionability

Most guidance is executable: runnable Spline and React Three Fiber snippets, a concrete gltf-transform command with flags, a format-selection table, and copy-paste mobile-DPR and Suspense/loading patterns. Minor gaps keep it from 5: the scroll example uses a placeholder ('<mesh ref={ref}>...</mesh>'), the fallback example contains 'onCreated={...}', 'useRef' is used without being imported, and the GSAP example omits registering the ScrollTrigger plugin. It is clearly above 3 because pseudocode is the exception, not the rule.

4 / 5

Workflow Clarity

Sequences exist — the numbered 'Product Configurator' and 'Immersive Portfolio' workflows and the model optimization pipeline ('1. Model in Blender... 6. Test file size') — but validation is implicit or missing rather than an explicit checkpoint. The 'Validation Checks' section lists useful checks (loading indicator, WebGL fallback, DPR limits) but they are not wired into the workflows as validate-then-proceed steps, and steps like 'Ensure mobile fallback' / 'Test file size' have no command or method attached. This matches the anchor 'steps listed but validation gaps'; not a 2 because the sequences are coherent and reasonably detailed.

3 / 5

Progressive Disclosure

There are no bundle files at all (no references/, scripts/, or assets/), and everything — stack selection, model pipeline, scroll integration, performance tuning, validation checks — lives inline in a ~380-line SKILL.md. Section structure is decent (per-pattern headers with 'When to use' notes), which keeps it above 2, but material like the full model pipeline or validation checks would naturally sit in separate reference files, and the file is far too long for the under-50-lines simple-skill exception to apply. Not 4 because content that should be split out is entirely inlined with no one-level-deep references to point to.

3 / 5

Total

13

/

20

Passed

Description

66%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 reasonably strong description with good technology and use-case specificity and distinctive, natural trigger keywords. Its main defect is the complete absence of a 'when to use' clause, which caps completeness, and a touch of buzzword filler ('bringing depth to web experiences').

Suggestions

Add an explicit trigger clause, e.g., 'Use when the user mentions 3D websites, Three.js, WebGL, Spline, product configurators, or 3D portfolios.'

Cut vague filler such as 'bringing depth to web experiences' and replace it with concrete actions like 'compress and optimize GLB models for the web'.

Include common variations users might say, such as '3D model', '.glb', or 'WebGL scene', to round out trigger-term coverage.

DimensionReasoningScore

Specificity

The description names several concrete deliverables — 'product configurators, 3D portfolios, immersive websites' — plus specific technologies ('Three.js, React Three Fiber, Spline, WebGL'), which lists several specific items with only minor coverage gaps. It is not a 5 because the actions are generic ('building', 'Covers') rather than a comprehensive set of concrete operations, and 'bringing depth to web experiences' is vague filler; it is above 3 because it goes beyond naming the domain with 1-2 actions.

4 / 5

Completeness

The 'what' is clearly stated ('building 3D experiences for the web... product configurators, 3D portfolios, immersive websites'), but there is no 'Use when...' clause or equivalent explicit trigger guidance anywhere in the description, which caps completeness at 3 per the judging guidelines. It cannot be 4 because 'when' is entirely absent rather than merely implicit-and-weak; it is not 2 because the 'what' is concrete, not vague.

3 / 5

Trigger Term Quality

Natural user phrases like 'three.js', 'react three fiber', 'spline', 'WebGL', '3D portfolios', and 'product configurator' give good keyword coverage a user would actually say. A few natural terms and variations are missing (e.g., '3D model', '.glb', 'WebXR', '3D scene'), keeping it below the comprehensive 5 anchor, but it is clearly above the 'some relevant keywords with missing variations' level of 3.

4 / 5

Distinctiveness Conflict Risk

The niche is well-delineated by tool-specific triggers (Spline, React Three Fiber, WebGL) that few other skills would claim, with only minor overlap risk against general frontend or web-animation skills via broad phrases like 'immersive websites' and 'bringing depth to web experiences'. It lacks the fully distinct trigger phrasing of a 5 but is clearly more distinct than the 'somewhat specific, could overlap' anchor at 3.

4 / 5

Total

15

/

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
sickn33/agentic-awesome-skills
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.