무료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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills

연동 도구Discord

설치 방법 보기

포함된 파일(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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

Official Docs: https://threejs.org/docs/
Examples: https://threejs.org/examples/
Editor: https://threejs.org/editor/
Discord: https://discord.gg/56GBJwAnUS

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

aesthetic

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

ai-multimodal

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

backend-development

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

better-auth

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

bunny

무료

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".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

chrome-devtools

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

mrgoonie의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejs

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/mrgoonie/claudekit-skills/tree/main/.claude/skills/threejs

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/threejs/, Codex는 ~/.agents/skills/threejs/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: mrgoonie/claudekit-skills
스타: 2,227
포크: 422
카테고리: 데이터·AI
라이선스: MIT
원문 언어: 영어
최종 업데이트: 2026년 4월 3일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.