CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

3d-web-experience

You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.

44

Quality

55%

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

The canonical home for this skill is 3d-web-experience in sickn33/agentic-awesome-skills

SKILL.md
Quality
Evals
Security

Quality

Content

60%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 reasonably actionable reference with real, mostly working code for Spline, React Three Fiber, gltf-transform, and GSAP, plus a clear optimization pipeline and useful anti-patterns. However, broken code fences, incomplete imports/definitions in several examples, and filler sections (duplicated persona paragraph, vacuous When to Use) prevent it from being fully copy-paste ready and token-efficient.

Suggestions

Fix the broken code-fence structure: the ```python fences wrapping markdown tables, decision trees, and jsx blocks should be removed so each example is a clean, copy-pasteable fenced block.

Complete the code examples: import `useRef` in the scroll example, define or reuse the `<Model />` component in the loader example, and call `gsap.registerPlugin(ScrollTrigger)` in the GSAP example.

Delete the filler: drop the opening paragraph that duplicates the frontmatter description verbatim, and replace the vacuous "When to Use" section ("applicable to execute the workflow or actions described in the overview") with the concrete when-to-use conditions already stated in each pattern.

DimensionReasoningScore

Conciseness

The body is mostly dense, useful material (comparison tables, code, a decision tree, terse anti-patterns), but it includes unnecessary padding: the opening paragraph duplicates the frontmatter description verbatim ("You bring the third dimension to the web..."), and the "When to Use" section is pure filler ("This skill is applicable to execute the workflow or actions described in the overview."). This matches anchor 3: mostly efficient but with some unnecessary explanation that could be tightened.

3 / 5

Actionability

There is genuine concrete guidance (e.g., "gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp", working Spline and R3F Canvas snippets), but several examples are incomplete: the loader example renders an undefined `<Model />`, the scroll example calls `useRef()` without importing it, GSAP's `ScrollTrigger` is never registered, and the outer ```python fences wrap jsx/markdown so the examples are mangled rather than copy-paste ready. The gaps span multiple examples, exceeding anchor 4's "minor gaps" and fitting anchor 3: concrete guidance with missing key details.

3 / 5

Workflow Clarity

The model pipeline is a clear numbered sequence ending in a check ("1. Model in Blender... 5. Compress with gltf-transform 6. Test file size (< 5MB ideal)"), and the stack-selection decision tree sequences the primary choice point. Only minor validation gaps remain — there is no recovery loop if the size test fails — matching anchor 4: clear sequence with most checkpoints present.

4 / 5

Progressive Disclosure

The body is well organized into Capabilities, Patterns (each with a "When to use" line), Anti-Patterns, and Related Skills; no bundle files exist and the content is reasonably inlined for a skill of this size, so nothing is buried or deeply nested. Minor organization gaps (the malformed fences and the vacuous "When to Use" section) keep it at anchor 4: good structure, most content appropriately placed.

4 / 5

Total

14

/

20

Passed

Description

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

This is an aspirational second-person persona statement, not a functional skill description: it names the 3D-web domain but lists no concrete actions, technologies, or use-when triggers. A user asking for a Three.js scene or a product configurator would likely not match this description to their request.

Suggestions

Rewrite in third person with concrete actions and named tools, e.g.: "Builds interactive 3D web experiences with Three.js, React Three Fiber, and Spline; optimizes and compresses GLB/GLTF models for the web; builds scroll-driven 3D scenes and product configurators."

Add an explicit trigger clause: "Use when the user asks for 3D on the web, Three.js/WebGL/React Three Fiber/Spline work, 3D product configurators, or scroll-driven 3D scenes."

Remove aspirational filler ("create moments of wonder", "when it's just showing off") in favor of the concrete capability vocabulary already present in the body's Capabilities section.

DimensionReasoningScore

Specificity

"You bring the third dimension to the web" and "You create moments of wonder without sacrificing usability" are abstract, aspirational statements with no concrete actions or named technologies. The base fit is anchor 2 (names the 3D-web domain, generic actions), but the description is written entirely in second person ("You bring...", "You know..."), which the rubric penalizes by 1 point, dropping it to anchor 1: entirely vague, no concrete actions, pure abstract language.

1 / 5

Completeness

The "what" is vague persona prose ("bring the third dimension to the web") rather than a statement of concrete function, and the "when" is completely absent — there is no "Use when..." clause or equivalent trigger guidance anywhere in the description. This matches anchor 2 (vague what, no when) and is consistent with the rubric's rule that a missing trigger clause caps completeness at 3.

2 / 5

Trigger Term Quality

"3D", "web", and "performance" are natural terms users would say, matching anchor 3's "some relevant keywords". However, common variations and synonyms users actually utter — "Three.js", "WebGL", "React Three Fiber", "Spline", "3D scene", "product configurator" — are entirely missing, so it does not reach anchor 4's good keyword coverage.

3 / 5

Distinctiveness Conflict Risk

"Third dimension to the web" and "3D app" carve out a somewhat specific niche distinct from most skills, but the trigger vocabulary is so sparse (essentially just "3D") that the description could still fire for general frontend, web-design, or animation/visual work — matching anchor 3: somewhat specific but could still overlap with similar skills.

3 / 5

Total

9

/

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

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

skills/3d-web-experience/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.