opencode-workflow
A universal OpenCode workflow setup with specialized agents, skills, commands, and plugins for any software project.
7 skills7 agents12 commands+2+1+1+1275
@cloudai-xFrontend
Plugin
threejs-skills
Skill files that give Claude Code current, verified knowledge of three.js, so the code it writes runs on the release you actually install. The skills target three.js r186 (three@0.186), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5.
Plugin Signal81/100Strong
maintained94
capable55
documented100
adopted76
Claude Code
$ npx -y skills add cloudai-x/threejs-skills --agent claude-code
Codex
$ npx skills add cloudai-x/threejs-skills -a codex
Cursor
$ npx skills add cloudai-x/threejs-skills -a cursor
Gemini CLI
$ npx skills add cloudai-x/threejs-skills -a gemini-cli
GitHub Copilot
$ npx skills add cloudai-x/threejs-skills -a github-copilot
OpenCode
$ npx skills add cloudai-x/threejs-skills -a opencode
Windsurf
$ npx skills add cloudai-x/threejs-skills -a windsurf
Stats
4,118
Stars
469
Forks
Active
Maintenance
MIT
License
Last commit
Created
What's inside
13 Skills
/threejs-animationKeyframe, skeletal and morph-target animation, procedural motion and clip blending, on WebGL or with WebGPU and TSL. Use when animating objects, playing glTF animations, posing bones, driving morph targets, or mixing and crossfading clips./threejs-asset-pipelineShrinking glTF assets for three.js with gltf-transform: inspect, validate and optimize commands, Draco, meshopt and quantization, KTX2, WebP and AVIF textures, the loader setup each output needs, and gltfjsx for React. Use when compressing, optimizing or validating 3D models/threejs-fundamentalsThree.js scene setup: scenes and fog, cameras, the renderer and tone mapping, the animation loop, object hierarchies, transforms, core math and cleanup, on WebGL or with WebGPU and TSL. Use when creating a scene from scratch, configuring a camera or renderer, handling resize, or/threejs-geometryCreating and shaping three.js geometry: built-in shapes, 3D text, vertex buffers and attributes, merging, instancing, batching, point clouds and lines, on WebGL or with WebGPU and TSL. Use when building 3D shapes or text, custom vertex data, custom meshes, instanced meshes, or/threejs-interactionPicking with raycasting, camera controls, transform gizmos, drag, hover and box selection for three.js, identical under WebGL and WebGPU. Use when handling mouse, touch or keyboard input, detecting clicks on 3D objects, adding camera controls, or making scene objects interactive./threejs-lightingLight types and physical units, shadow maps, HDR environment lighting, light probes, and lighting performance, on WebGL or with WebGPU and TSL. Use when adding or tuning lights, fixing shadow acne, setting up image-based lighting, or dimming an environment map.
Links
README
Three.js Skills for Claude Code
Skill files that give Claude Code current, verified knowledge of three.js, so the code it writes runs on the release you actually install.
The skills target three.js r186 (three@0.186), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5. Rendering examples use WebGLRenderer, directly or through React Three Fiber; the WebGPU and TSL section in every skill covers WebGPURenderer.
Why
Claude Code knows three.js from its training data, which mixes many releases. A lot changed between r160 and r186: RGBELoader became HDRLoader, Clock gave way to Timer, PostProcessing became RenderPipeline, WebGL 1 support is gone, and the three.js docs now tell LLMs to use WebGPURenderer with TSL for custom shaders and materials. These skills give Claude Code the current API, working examples, and a Common Mistakes list of the outdated patterns models still reach for.
Installation
With the skills CLI:
npx skills add cloudai-x/threejs-skills
Or manually. Claude Code loads skills from ~/.claude/skills/ (all your projects) or .claude/skills/ (one project):
git clone https://github.com/CloudAI-X/threejs-skills.git
# all your projects
mkdir -p ~/.claude/skills && cp -r threejs-skills/skills/* ~/.claude/skills/
# or one project (run from the project root)
mkdir -p .claude/skills && cp -r threejs-skills/skills/* .claude/skills/
Skills Included
| Skill | Covers |
|---|---|
| threejs-fundamentals | Scene, cameras, renderer setup, animation loop, object hierarchy, transforms |
| threejs-geometry | Built-in shapes, BufferGeometry, merging, instancing, BatchedMesh, points, lines |
| threejs-materials | Material types, PBR, blending, stencil, recompiles, node materials |
| threejs-lighting | Light types and physical units, shadows, HDR environments, light probes |
| threejs-textures | Loading, color spaces, UV channels, texture types, render targets, memory |
| threejs-animation | Keyframes, the animation mixer, skeletal and morph animation, blending |
| threejs-loaders | glTF with Draco, meshopt and KTX2, other formats, HDR, progress, disposal |
| threejs-shaders | ShaderMaterial and RawShaderMaterial, shader chunks, TSL and node materials |
| threejs-postprocessing | EffectComposer, built-in renderer effects, the WebGPU RenderPipeline |
| threejs-interaction | Raycasting, camera controls, transform gizmos, drag and box selection |
| threejs-performance | Measuring frame cost, draw calls, GPU memory, fill rate, compile stalls |
| threejs-react-three-fiber | React Three Fiber 9 and a verified set of drei helpers, on WebGL or WebGPU |
| threejs-asset-pipeline | gltf-transform: Draco, meshopt, KTX2, WebP, and the matching loader setup |
How It Works
Claude Code loads a skill when your request matches its description. When you ask it to:
- create a 3D scene →
threejs-fundamentals - add lights and shadows →
threejs-lighting - load a glTF model →
threejs-loaders - write a custom shader or screen effect →
threejs-shadersandthreejs-postprocessing - make a slow scene faster →
threejs-performance - build the scene with React →
threejs-react-three-fiber - shrink a glTF before shipping it →
threejs-asset-pipeline
Skill File Structure
Every skill follows the same layout:
---
name: threejs-<topic>
description: "What the skill covers. Use when ..."
---
# Three.js <Topic>
Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
## Quick Start a complete, runnable example
## <topic sections> the API with working examples
## WebGPU and TSL the same topic under WebGPURenderer
## Common Mistakes outdated or wrong code → the r186 fix, with the reason
## See Also related skills
Verification
The skills were checked against the published three@0.186.1 package and the official Migration Guide, and against @react-three/fiber@9.8.2, @react-three/drei@10.7.9, @gltf-transform/cli@4.5.1 and gltfjsx@6.5.3 where they apply:
- every three.js, React Three Fiber, drei and gltf-transform import path, and every
THREE.*class used in an example, exists in its package - every JavaScript block parses as an ES module
- shader chunk names exist, and no removed or renamed API appears in example code
- every gltf-transform command and flag exists in the CLI, and every React Three Fiber element maps to a three.js class
- every skill was reviewed against the library source, with rendering, timing and shader claims measured where possible
If you find something that is wrong on the current release, please open an issue with the skill name, the line and the three.js version you use.
License
MIT, see LICENSE.
Acknowledgments
- Three.js - the 3D library these skills document
Stars on GitHub
Momentum
- stars in total
- 4.1k
File tree
More plugins by @cloudai-x.
View @cloudai-x’s profile@cloudai-xproject-starter
Helps you start and work on a software project with ready-made guidance for understanding existing code, designing databases and APIs, planning architecture, and building Convex backends. It also offers reviews, refactoring and security checks for everyday development.
14 skills7 agents6 hooks+3+2+2+2+2+2+1+1+11.4k
@cloudai-xSimilar plugins.
See 12 threejs-skills alternatives
nextjs
Skills for Next.js developers covering bundle size reduction, Cache Components and Partial Prefetching adoption, and verifying runtime behavior in a running app after code edits.
6 skills143k
@vercelui
Helps you add, find, fix, style and compose shadcn UI components in your React project, with component docs and usage examples. It can also move a project from Radix UI primitives to Base UI.
2 skills127k
@shadcn-uielectron
electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS.
5 skills124k
@electronleonxlnx-taste-skill
Gives coding agents a design direction, reference images and a browser check, so the websites and app screens they build look deliberate instead of like a generic template page.
1 skill107k
@leonxlnxQuestions about threejs-skills.
Skill files that give Claude Code current, verified knowledge of three.js, so the code it writes runs on the release you actually install. The skills target three.js r186 (three@0.186), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5. Install it with the command on its page. It includes threejs-animation, threejs-asset-pipeline, threejs-fundamentals. Its skills do not fire on their own yet. Free and open source.
- What is threejs-skills?
- Skill files that give Claude Code current, verified knowledge of three.js, so the code it writes runs on the release you actually install. The skills target three.js r186 (three@0.186), React Three Fiber 9.8 with drei 10.7, and gltf-transform 4.5.
- How do I install threejs-skills?
- Run these in Claude Code: npx -y skills add cloudai-x/threejs-skills --agent claude-code. Then prompt normally.
- Does threejs-skills auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin.
- Is threejs-skills free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use threejs-skills's skills?
- threejs-skills installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it