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.

1.35x

Quality

82%

Does it follow best practices?

Impact

100%

1.35x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

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%

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%

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%

Repository: haniakrim21/everything-claude-code
Commit: ae2cadd

Evaluated: 18 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

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.