By cloudai-x
Generate Three.js code via AI to build interactive 3D web scenes, programmatically handling texture loading and mapping, material properties, geometries, lighting, animations, shaders, post-processing effects, asset imports, and mouse/touch interactions.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-3 --plugin cloudai-x-threejs-skills-8Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.
Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.
A curated collection of Three.js skill files that provide Claude Code with foundational knowledge for creating 3D elements and interactive experiences.
When working with Three.js, Claude Code starts with general programming knowledge but lacks specific Three.js API details, best practices, and common patterns. These skill files bridge that gap by providing:
Clone this repository into your project or copy the .claude/skills directory:
git clone https://github.com/pinkforest/threejs-playground.git
Or add as a submodule:
git submodule add https://github.com/pinkforest/threejs-playground.git
| Skill | Description |
|---|---|
| threejs-fundamentals | Scene setup, cameras, renderer, Object3D hierarchy, coordinate systems |
| threejs-geometry | Built-in shapes, BufferGeometry, custom geometry, instancing |
| threejs-materials | PBR materials, basic/phong/standard materials, shader materials |
| threejs-lighting | Light types, shadows, environment lighting, light helpers |
| threejs-textures | Texture types, UV mapping, environment maps, render targets |
| threejs-animation | Keyframe animation, skeletal animation, morph targets, animation mixing |
| threejs-loaders | GLTF/GLB loading, texture loading, async patterns, caching |
| threejs-shaders | GLSL basics, ShaderMaterial, uniforms, custom effects |
| threejs-postprocessing | EffectComposer, bloom, DOF, screen effects, custom passes |
| threejs-interaction | Raycasting, camera controls, mouse/touch input, object selection |
Claude Code automatically loads skill files from the .claude/skills directory when they match the context of your request. When you ask Claude Code to:
threejs-fundamentals is loadedthreejs-lighting is loadedthreejs-loaders is loadedthreejs-shaders and threejs-postprocessing are loadedAsk Claude Code:
"Create a basic Three.js scene with a rotating cube"
Claude Code will use threejs-fundamentals to generate accurate boilerplate with proper renderer setup, animation loop, and resize handling.
Ask Claude Code:
"Load a GLTF model with Draco compression and play its animations"
Claude Code will use threejs-loaders and threejs-animation to generate code with proper loader configuration, animation mixer setup, and error handling.
Ask Claude Code:
"Create a custom shader material with a fresnel effect"
Claude Code will use threejs-shaders to generate working GLSL code with proper uniform declarations and coordinate space handling.
Each skill file follows a consistent format:
---
name: skill-name
description: When this skill should be activated
---
# Skill Title
## Quick Start
[Minimal working example]
## Core Concepts
[Detailed API documentation with examples]
## Common Patterns
[Real-world usage patterns]
## Performance Tips
[Optimization guidance]
## See Also
[Related skills]
These skills have been audited against the official Three.js documentation (r160+) for:
three/addons/ format)Found an error or want to add coverage for additional Three.js features?
.claude/skills/MIT License - Feel free to use, modify, and distribute.
Access thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.
Behavioral guidelines to reduce common LLM coding mistakes, derived from Andrej Karpathy's observations on LLM coding pitfalls
Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Reliable automation, in-depth debugging, and performance analysis in Chrome using Chrome DevTools and Puppeteer
Claude Code skills for Godot 4.x game development - GDScript patterns, interactive MCP workflows, scene design, and shaders