threejs-skill-plugin

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

# 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](https://github.com/kndoshn/threejs-skill-plugin/blob/HEAD/skills/developing-threejs-apps/SKILL.md) - Main instructions
- [README.md](https://github.com/kndoshn/threejs-skill-plugin/blob/HEAD/skills/developing-threejs-apps/README.md) - Skill overview
- [FAQ.md](https://github.com/kndoshn/threejs-skill-plugin/blob/HEAD/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](https://github.com/kndoshn/threejs-skill-plugin/blob/HEAD/skills/developing-threejs-apps/CONTRIBUTING.md) for guidelines.

---

## License

MIT

Three.js Skill Plugin for Claude Code

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)

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

Then register the plugin in Claude Code:

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

Or add to your Claude Code settings manually.

Option B: Copy into your project

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

Option C: Personal installation

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 - Main instructions
README.md - Skill overview
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 for guidelines.

License

MIT