How do I use these rules in Cursor?

After cloning the repo, open it directly in Cursor to auto-load `.cursor/rules/`. To use it in your own project, copy both `.cursor/rules/` and `skills/webgpu-threejs-tsl/` to the project root, since the rule files reference docs in the skills directory via `@file`.

Which Three.js version does this Skill recommend?

Three.js r171 or later is recommended. The Skill content was last updated on April 1, 2026, and aligns with r183+ API changes. In r178+, `PI2` is deprecated in favor of `TWO_PI`, and some normal variables have been renamed.

How do the rules in Cursor apply by file type?

Rules are scoped via glob patterns: `webgpu-threejs-tsl.mdc` applies to JS/TS files; `compute-shaders.mdc` matches files containing compute or particle; `post-processing.mdc` matches files containing post, effect, or bloom; `wgsl-integration.mdc` matches .wgsl files and JS/TS files containing wgsl; `device-loss-and-limits.mdc` matches files containing renderer or webgpu.

What is the target browser compatibility?

Supports Chrome 113+ and Edge 113+. Firefox requires enabling via a flag, and Safari is in WebGPU preview.

September 26, 2026

WebGPU Three.js TSL Skill

AI & Machine Learning Prompt Engineering & Skill Management0

Get resource

Provides knowledge and rules for developing WebGPU Three.js apps with TSL in Claude Code and Cursor.

MITClaude CodeCursorText InputCode Output

Skill广场 Skill Packaging

安装 / 调用方式bash

```bash
# Install from this repository
/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill
```

Or manually copy the `skills/webgpu-threejs-tsl` folder to:
- **Global**: `~/.claude/skills/`
- **Project**: `<project>/.claude/skills/`

调用示例json

```javascript
import * as THREE from 'three/webgpu';
import { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';

// WebGPU renderer
const renderer = new THREE.WebGPURenderer();
await renderer.init();

// TSL material with animated fresnel
const material = new THREE.MeshStandardNodeMaterial();

material.colorNode = color(0x0066ff);

material.emissiveNode = Fn(() => {
  const viewDir = cameraPosition.sub(positionWorld).normalize();
  const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);
  return color(0x00ffff).mul(fresnel).mul(oscSine(time));
})();
```

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude Code · Cursor
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

## Introduction WebGPU Three.js TSL Skill is an Agent Skill designed to inject systematic knowledge about WebGPU, Three.js, and TSL (Three.js Shading Language) into AI coding assistants such as Claude Code and Cursor. It helps developers obtain accurate API usage, code patterns, and best practices when using AI-assisted coding. ## Problem Solved When developing WebGPU-based Three.js applications, the TSL API differs significantly from traditional GLSL shaders, and related documentation is scattered. AI models may lack knowledge of recent API changes (e.g., `PI2` deprecation and normal variable renaming in r178+). This Skill reduces the likelihood of AI generating incorrect code through structured reference documentation and examples. ## Key Capabilities - **Core Concepts**: Covers TSL types and constructors (float, vec2, vec3, vec4, color, uniform), vector swizzling, operators, math functions, control flow (If, Loop, Fn), and time/animation handling. - **Material System**: Supports all node material types and their properties (color, roughness, metalness), including physical material features (clearcoat, transmission, iridescence) and vertex displacement. - **Compute Shaders**: Provides knowledge on instanced array buffers, parallel physics simulations, particle systems, atomic operations, and barriers. - **Post-Processing Effects**: Includes implementations for bloom, blur, FXAA, DOF, and more. Supports writing custom effects with `Fn()`, effect chaining, and multiple render targets. - **WGSL Integration**: Imports custom WGSL functions via `wgslFn()`, supporting mixed TSL/WGSL usage and performance optimization. - **Device Loss Handling**: Covers GPU device loss detection, recovery strategies, and state saving/restoration methods. ## Target Audience Ideal for engineers using Claude Code or Cursor for WebGPU and Three.js development, especially when writing TSL shaders, GPU compute logic, or post-processing pipelines. Recommended for Three.js r171 and above; content is aligned with r183+ API changes.

Key features

TSL Core Concepts: Complete knowledge of types like float, vec, color, uniform, and control flow.
Node Material Authoring: Covers node material property configuration and physical features like clearcoat and transmission.
GPU Compute Shaders: Guidance for particle systems, parallel physics simulations, atomic operations, and barriers.
Post-Processing Pipelines: Built-in effects like bloom, FXAA, DOF, plus custom effect chaining.
WGSL Integration: Mix custom WGSL functions with TSL via wgslFn().
Device Loss & Recovery: Reference for GPU device loss detection, state saving, and recovery strategies.
Dual Editor Support: One content set works as both a Claude Code Agent Skill and Cursor project rules.
Version Alignment: Content aligned with Three.js r183+ APIs, noting changes in r171+ and r178+.

Releases

Notify me

Initial · WebGPU Three.js TSL Skill

September 26, 2026

Q&A

How do I install this Skill in Claude Code?AI-generated: Install via `/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill`, or manually copy the `skills/webgpu-threejs-tsl` folder to the global directory `~/.claude/skills/` or the project directory `<project>/.claude/skills/`.
How do I use these rules in Cursor?AI-generated: After cloning the repo, open it directly in Cursor to auto-load `.cursor/rules/`. To use it in your own project, copy both `.cursor/rules/` and `skills/webgpu-threejs-tsl/` to the project root, since the rule files reference docs in the skills directory via `@file`.
Which Three.js version does this Skill recommend?AI-generated: Three.js r171 or later is recommended. The Skill content was last updated on April 1, 2026, and aligns with r183+ API changes. In r178+, `PI2` is deprecated in favor of `TWO_PI`, and some normal variables have been renamed.
How do the rules in Cursor apply by file type?AI-generated: Rules are scoped via glob patterns: `webgpu-threejs-tsl.mdc` applies to JS/TS files; `compute-shaders.mdc` matches files containing compute or particle; `post-processing.mdc` matches files containing post, effect, or bloom; `wgsl-integration.mdc` matches .wgsl files and JS/TS files containing wgsl; `device-loss-and-limits.mdc` matches files containing renderer or webgpu.
What is the target browser compatibility?AI-generated: Supports Chrome 113+ and Edge 113+. Firefox requires enabling via a flag, and Safari is in WebGPU preview.

Get resource

Bookmark

This product has no owner yet

A Claude Code skill that turns PDFs, documents, and codebases into an Obsidian study vault and tracks concept mastery through interactive quizzes.

Released 3 weeks ago0

Open Source

The product content on this page was translated by AI from the author's original.