# Three.js Skill Plugin for Claude Code

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Three.js](https://img.shields.io/badge/Three.js-r150+-black?logo=three.js)](https://threejs.org/)

A Claude Code plugin that provides senior-level guidance for building, debugging, and optimizing Three.js applications.

---

## Features

- **Repo-first approach**: Inspects your existing setup before making changes
- **Correct rendering**: Linear workflow, tone mapping, and postprocessing as first-class concerns
- **Lifecycle discipline**: Proper init/resize/render/dispose patterns to prevent leaks
- **Performance focus**: Guides measurement and optimization (instancing, batching, texture strategy)
- **Version-aware**: Detects your Three.js revision and matches existing conventions

---

## What's Included

```
skills/developing-threejs-apps/
├── SKILL.md              # Main instructions (loaded by Claude Code)
├── examples.md           # Copy/paste code patterns
├── playbooks.md          # Step-by-step implementation guides
├── quality-gates.md      # Pre-ship checklist
├── evaluations.md        # Prompts for testing the Skill
├── FAQ.md                # Common questions
├── reference/            # Deep documentation (loaded on demand)
│   ├── color-management.md
│   ├── postprocessing-webgl.md
│   ├── performance-and-memory.md
│   └── ... (18 reference files)
└── scripts/              # Optional diagnostic tools
    ├── three-doctor.mjs  # Repo pattern audit
    ├── asset-audit.mjs   # Asset size report
    └── skill-audit.mjs   # Skill structure validation
```

---

## Installation

### Option A: As a Claude Code plugin (recommended)

```bash
git clone https://github.com/kndoshn/threejs-skill-plugin.git
```

Then register the plugin in Claude Code:

```bash
claude plugins:add /path/to/threejs-skill-plugin
```

Or add to your Claude Code settings manually.

### Option B: Copy into your project

```bash
mkdir -p .claude/skills
cp -R skills/developing-threejs-apps .claude/skills/
```

### Option C: Personal installation

```bash
cp -R skills/developing-threejs-apps ~/.claude/skills/
```

---

## Usage

After installation, ask Claude Code for Three.js-related tasks. The Skill activates automatically when your request matches its scope.

### Example Prompts

```
"Add glTF loading with KTX2 support. Include proper disposal."
"Add a bloom pass to our existing EffectComposer without double tone mapping."
"Find and fix VRAM leaks when switching routes."
"Convert repeated meshes to InstancedMesh with per-instance colors."
"Debug why the screen is blank after adding postprocessing."
```

---

## Documentation

See the Skill's own documentation for details:

- [SKILL.md](skills/developing-threejs-apps/SKILL.md) - Main instructions
- [README.md](skills/developing-threejs-apps/README.md) - Skill overview
- [FAQ.md](skills/developing-threejs-apps/FAQ.md) - Common questions

---

## Compatibility

- **Three.js**: r150+ (detects your version automatically)
- **Frameworks**: Vanilla JS, React (R3F), Vue, Svelte, Next.js
- **Renderers**: WebGL, WebGPU

---

## Contributing

Contributions are welcome! See [CONTRIBUTING.md](skills/developing-threejs-apps/CONTRIBUTING.md) for guidelines.

---

## License

MIT