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

Install with Tessl CLI

npx tessl i github:boisenoise/skills-collections --skill 3d-web-experience

What are skills?

Review — 59%

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

97%

23%

3D Product Viewer Component

R3F model loading with loading state

Criteria

Without context

With context

R3F Canvas import

100%

useGLTF usage

100%

useProgress hook

100%

Html component in loader

100%

Suspense with fallback

100%

Progress percentage display

100%

OrbitControls included

100%

GLB/GLTF model format

100%

62%

Mobile fallback

100%

Ambient or scene lighting

100%

primitive object used

100%

Without context: $0.3172 · 1m 27s · 12 turns · 12 in / 5,413 out tokens

With context: $0.5729 · 2m 6s · 24 turns · 360 in / 7,535 out tokens

100%

Scroll-Animated 3D Hero Section

Scroll-driven 3D animation

Criteria

Without context

With context

ScrollControls usage

100%

useScroll hook

100%

useFrame animation loop

100%

scroll.offset drives rotation

100%

pages prop set

100%

useRef for mesh

100%

Canvas from R3F

100%

drei imported from correct package

100%

No timer-based animation

100%

Without context: $0.5128 · 2m 20s · 22 turns · 22 in / 7,231 out tokens

With context: $0.4221 · 1m 21s · 21 turns · 68 in / 4,808 out tokens

100%

25%

Web-Ready 3D Asset Optimization

3D model optimization pipeline

Criteria

Without context

With context

GLB/GLTF output format

100%

Poly count threshold

100%

Texture baking step

100%

gltf-transform CLI installation

100%

Draco compression flag

100%

WebP texture compression flag

100%

File size target

100%

gltf-transform optimize command

100%

Input file argument

100%

Without context: $0.4848 · 2m 17s · 18 turns · 67 in / 8,065 out tokens

With context: $0.5218 · 2m 46s · 15 turns · 270 in / 9,970 out tokens

Evaluated: 4 days ago
Agent: Claude Code

Table of Contents

3D Product Viewer Component Scroll-Animated 3D Hero Section Web-Ready 3D Asset Optimization

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.