TSL(Three.jsシェーディング言語)を用いてWebGPU対応Three.jsアプリケーションを開発するためのエージェントスキルです。

最終更新日: 2026年4月1日 — r183+ APIの変更に合わせて調整Three.js

概要

このスキルはクロードに以下の包括的な知識を提供します:

• WebGPUレンダラーによるThree.jsの設定
• TSL(Three.jsシェーディング言語)を用いたシェーダーの作成
• ノードベースの材料の作成
• GPUコンピュートシェーダーの構築
• 後処理効果の実装
• カスタムWGSLコードの統合

設置

このリポジトリは同じコンテンツを2つのフォーマットで配信するため、Claude Code(エージェントスキルとして)とCursor(プロジェクトルールとして)の両方で動作します。skills/のClaudeスキルが真実の源です。.cursor/rules/のカーソルルールは薄いシムで、@fileと同じドキュメントを参照するため、編集は自動的に流れます。

クロード・コード

または、skills/webgpu-threejs-tslフォルダを手動でコピーして:

• グローバル:~/.claude/skills/
• プロジェクト: /.claude/skills/

カーソル

このリポジトリをクローンして直接開く — カーソルは自動的に.cursor/rules/を拾います。

自分のプロジェクトでルールを使うには、両方のディレクトリをプロジェクトルートにコピーし、パスを保持してください:

その『

WebGPU Three.js TSL Skill

An Agent Skill for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language).

Last updated: April 1, 2026 — aligned with Three.js r183+ API changes.

Overview

This skill provides Claude with comprehensive knowledge for:

• Setting up Three.js with WebGPU renderer
• Writing shaders using TSL (Three.js Shading Language)
• Creating node-based materials
• Building GPU compute shaders
• Implementing post-processing effects
• Integrating custom WGSL code

Installation

This repo ships the same content in two formats so it works in both Claude Code (as an Agent Skill) and Cursor (as project rules). The Claude skill under skills/ is the source of truth; the Cursor rules under .cursor/rules/ are thin shims that @file-reference those same docs, so edits flow through automatically.

Claude Code

# Install from this repository
/skill install webgpu-threejs-tsl@/webgpu-claude-skill

Or manually copy the skills/webgpu-threejs-tsl folder to:

• Global: ~/.claude/skills/
• Project: /.claude/skills/

Cursor

Clone this repo and open it directly — Cursor picks up .cursor/rules/ automatically.

To use the rules in your own project, copy both directories into your project root, preserving the paths:

your-project/
├── .cursor/rules/              # from this repo
└── skills/webgpu-threejs-tsl/  # from this repo (referenced by the rules)

The .mdc files use @file references pointing at skills/webgpu-threejs-tsl/..., so the skills/ directory must travel with them. If you’d rather not keep the skills/ folder, inline the referenced content into each .mdc file.

The rules are scoped by globs and auto-attach only on relevant files:

• webgpu-threejs-tsl.mdc — entry point, JS/TS files
• compute-shaders.mdc — files matching *compute* or *particle*
• post-processing.mdc — files matching *post*, *effect*, *bloom*
• wgsl-integration.mdc — .wgsl files and *wgsl* JS/TS
• device-loss-and-limits.mdc — files matching *renderer* or *webgpu*

Skill Structure

skills/webgpu-threejs-tsl/
├── SKILL.md                    # Entry point with overview
├── REFERENCE.md                # Quick reference cheatsheet
├── docs/
│   ├── core-concepts.md        # Types, operators, uniforms, control flow
│   ├── materials.md            # Node materials and properties
│   ├── compute-shaders.md      # GPU compute documentation
│   ├── post-processing.md      # Built-in and custom effects
│   ├── wgsl-integration.md     # Custom WGSL functions
│   └── device-loss.md          # GPU device loss handling and recovery
├── examples/
│   ├── basic-setup.js          # Minimal WebGPU project
│   ├── custom-material.js      # Custom shader material
│   ├── particle-system.js      # GPU compute particles
│   ├── post-processing.js      # Effect pipeline