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. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.

Install with Tessl CLI

npx tessl i github:duclm1x1/Dive-Ai --skill 3d-web-experience

What are skills?

Review — 82%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

100%

Interactive 3D Product Viewer for an E-Commerce Site

R3F setup and model loading

Criteria

Without context

With context

Canvas from fiber

100%

OrbitControls from drei

100%

useGLTF from drei

100%

primitive object pattern

100%

Suspense wrapper

100%

useProgress import

100%

Html import for loader

100%

Numeric progress displayed

100%

Correct dependencies listed

100%

No missing GLB path

100%

OrbitControls placed in scene

100%

Without context: $0.1640 · 44s · 13 turns · 20 in / 2,432 out tokens

With context: $0.3523 · 1m 7s · 20 turns · 182 in / 3,599 out tokens

100%

18%

Prepare a 3D Hero Model for Web Deployment

3D model optimization for web

Criteria

Without context

With context

GLB/GLTF output format

100%

Polygon budget stated

100%

Texture baking mentioned

25%

100%

gltf-transform used

100%

Draco compression flag

100%

WebP texture compression flag

100%

5MB target size

100%

File size verification step

100%

GLB format rationale

100%

gltf-transform install shown

100%

Without context: $0.2240 · 1m 30s · 12 turns · 19 in / 4,412 out tokens

With context: $0.4158 · 1m 36s · 21 turns · 183 in / 5,159 out tokens

100%

58%

Scroll-Animated 3D Hero for a Product Landing Page

Scroll-driven 3D with mobile fallback

Criteria

Without context

With context

ScrollControls from drei

100%

useScroll from drei

100%

useFrame from fiber

100%

scroll.offset drives animation

50%

100%

ScrollControls in Canvas

100%

Mobile fallback or detection

100%

Mobile notes in docs

100%

Scroll animation described

100%

Canvas from fiber

100%

No external model required

100%

Loading state present

100%

Without context: $0.4297 · 1m 49s · 24 turns · 30 in / 6,164 out tokens

With context: $0.4013 · 1m 32s · 19 turns · 361 in / 5,552 out tokens

Evaluated: about 2 hours ago
Agent: Claude Code

Table of Contents

Interactive 3D Product Viewer for an E-Commerce Site Prepare a 3D Hero Model for Web Deployment Scroll-Animated 3D Hero for a Product Landing Page

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.