Threejs

This is a comprehensive Three.js skill that takes you from basic scene setup through advanced WebGPU rendering and custom shaders. The progressive learning path is well structured, starting with fundamentals and branching into specific domains like post-processing, physics integration, and VR/XR. What stands out is the breadth of coverage across 18 reference files, including practical topics like asset loading, PBR materials, performance optimization techniques like instancing and LOD, and the newer node materials system. If you're building anything 3D for the web, from product configurators to data visualizations to full games, this gives you a solid reference framework without drowning you in everything at once.

skills.sh installs: 1.3K
GitHub stars: 2.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mrgoonie/claudekit-skills --skill threejs --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Development

Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.

When to Use This Skill

Use when working with:

3D scenes, models, animations, or visualizations
WebGL/WebGPU rendering and graphics programming
Interactive 3D experiences (games, configurators, data viz)
Camera controls, lighting, materials, or shaders
Loading 3D assets (GLTF, FBX, OBJ) or textures
Post-processing effects (bloom, depth of field, SSAO)
Physics simulations, VR/XR experiences, or spatial audio
Performance optimization (instancing, LOD, frustum culling)

Progressive Learning Path

Level 1: Getting Started

Load references/00-fundamentals.md - Fundamentals
Load references/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loop

SKILL.md on GitHub