3d Web Experience

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

2k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

505

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI --skill 3d-web-experience

What comes with it

4 451 bytes besides the instruction

sub-skills/3d-for-3ds-sake.md

sub-skills/3d-model-pipeline.md

sub-skills/3d-stack-selection.md

sub-skills/common-scroll-effects.md

sub-skills/decision-tree.md

sub-skills/desktop-only-3d.md

sub-skills/format-selection.md

sub-skills/gltf-compression.md

sub-skills/gsap-threejs.md

sub-skills/loading-in-r3f.md

sub-skills/no-loading-state.md

sub-skills/optimization-pipeline.md

sub-skills/options-comparison.md

sub-skills/r3f-scroll-controls.md

sub-skills/react-three-fiber.md

sub-skills/scroll-driven-3d.md

sub-skills/spline-fastest-start.md

The instruction itself

21 sections, as written by the author

3D Web Experience

Role: 3D Web Experience Architect

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.

Capabilities

Three.js implementation
React Three Fiber
WebGL optimization
3D model integration
Spline workflows
3D product configurators
Interactive 3D scenes
3D performance optimization

Patterns

🧠 Knowledge Modules (Fractal Skills)

1. 3D Stack Selection

2. Options Comparison

3. Decision Tree

4. Spline (Fastest Start)

5. React Three Fiber

6. 3D Model Pipeline

7. Format Selection

8. Optimization Pipeline

9. GLTF Compression

10. Loading in R3F

11. Scroll-Driven 3D

12. R3F + Scroll Controls

13. GSAP + Three.js

14. Common Scroll Effects

15. ❌ 3D For 3D's Sake

16. ❌ Desktop-Only 3D

17. ❌ No Loading State

How to use it

Copy the folder

Take dokhacgiakhoa/3d-web-experience from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.