Skip to content
cccskills
FreePublished on GitHub

threejs

Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills
Works withDiscord
See how to install

Files included (21)

  • SKILL.md3.8 KB
  • references/00-fundamentals.md11.2 KB
  • references/01-getting-started.md3.7 KB
  • references/02-loaders.md4.0 KB
  • references/03-textures.md4.1 KB
  • references/04-cameras.md4.8 KB
  • references/05-lights.md4.3 KB
  • references/06-animations.md4.7 KB
  • references/07-math.md5.1 KB
  • references/08-interaction.md6.6 KB
  • references/09-postprocessing.md5.3 KB
  • references/10-controls.md5.8 KB
  • references/11-materials-advanced.md5.9 KB
  • references/11-materials.md13.1 KB
  • references/12-performance.md6.5 KB
  • references/13-node-materials.md6.7 KB
  • references/14-physics-vr.md6.7 KB
  • references/15-specialized-loaders.md7.4 KB
  • references/16-webgpu.md7.0 KB
  • references/17-shader.md13.7 KB
  • references/18-geometry.md13.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Level 2: Common Tasks

  • Asset Loading: references/02-loaders.md - GLTF, FBX, OBJ, texture loaders
  • Textures: references/03-textures.md - Types, mapping, wrapping, filtering
  • Cameras: references/04-cameras.md - Perspective, orthographic, controls
  • Lights: references/05-lights.md - Types, shadows, helpers
  • Animations: references/06-animations.md - Clips, mixer, keyframes
  • Math: references/07-math.md - Vectors, matrices, quaternions, curves
  • Geometry: references/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancing
  • Materials: references/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material properties

Level 3: Interactive & Effects

  • Interaction: references/08-interaction.md - Raycasting, picking, transforms
  • Post-Processing: references/09-postprocessing.md - Passes, bloom, SSAO, SSR
  • Controls (Addons): references/10-controls.md - Orbit, transform, first-person

Level 4: Advanced Rendering

  • Materials Advanced: references/11-materials-advanced.md - PBR, custom shaders
  • Performance: references/12-performance.md - Instancing, LOD, batching, culling
  • Node Materials (TSL): references/13-node-materials.md - Shader graphs, compute

Level 5: Specialized

  • Physics: references/14-physics-vr.md - Ammo, Rapier, Jolt, VR/XR
  • Advanced Loaders: references/15-specialized-loaders.md - SVG, VRML, domain-specific
  • WebGPU: references/16-webgpu.md - Modern backend, compute shaders
  • Shaders: references/17-shader.md - GLSL, ShaderMaterial, uniforms, custom effects

Quick Start Pattern

// 1. Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. Animation Loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

External Resources

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

aesthetic

Free

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills2.2KUpdated Apr 3, 2026

ai-multimodal

Free

Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files (transcription with timestamps, summarization, speech understanding, music/sound analysis up to 9.5 hours), understand images (captioning, object detection, OCR, visual Q&A, segmentation), process videos (scene detection, Q&A, temporal analysis, YouTube URLs, up to 6 hours), extract from documents (PDF tables, forms, charts, diagrams, multi-page), generate images (text-to-image, editing, composition, refinement). Use when working with audio/video files, analyzing images or screenshots, processing PDF documents, extracting structured data from media, creating images from text prompts, or implementing multimodal AI features. Supports multiple models (Gemini 2.5/2.0) with context windows up to 2M tokens.

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills2.2KUpdated Apr 3, 2026

backend-development

Free

Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills2.2KUpdated Apr 3, 2026

better-auth

Free

Implement authentication and authorization with Better Auth - a framework-agnostic TypeScript authentication framework. Features include email/password authentication with verification, OAuth providers (Google, GitHub, Discord, etc.), two-factor authentication (TOTP, SMS), passkeys/WebAuthn support, session management, role-based access control (RBAC), rate limiting, and database adapters. Use when adding authentication to applications, implementing OAuth flows, setting up 2FA/MFA, managing user sessions, configuring authorization rules, or building secure authentication systems for web applications.

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills2.2KUpdated Apr 3, 2026

bunny

Free

Integrate Bunny.net services (CDN, Storage, Stream, DNS, Edge Scripting, Shield, Magic Containers, Optimizer, Database). Use when building with Bunny.net APIs, deploying to Bunny CDN, uploading files to Edge Storage, managing video streaming, configuring DNS zones, writing edge scripts, setting up WAF/DDoS protection, deploying containers, or optimizing images. Triggers on "bunny", "bunnycdn", "b-cdn", "pull zone", "edge storage", "bunny stream".

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills2.2KUpdated Apr 3, 2026

chrome-devtools

Free

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

The English summary is being prepared. Showing the original description.

mrgoonie/claudekit-skills2.2KUpdated Apr 3, 2026

See all skills by mrgoonie

Report a problem with this skill