Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
- 898 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The installer copies files into the agent's folder
- The scene code stays yours and needs checking
Install
- Works in
Manual install
npx threejs-awesome-graphics-agent-skills@latest install --agent claude-codeFor other agents change the --agent value: codex, cursor, github-copilot or custom with --path.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The installer copies files into the agent's folder
- The scene code stays yours and needs checking
This is third-party code. Review the repository files before installing.
What it does
Threejs-Awesome-Graphics-Agent-Skills teaches an agent to make scenes with strong graphics in three.js: meshes, lighting, PBR materials, textures, shaders, TSL and WebGPU, GLSL, post-processing, realism and stylization, particles, procedural visual effects, color management and tone mapping. The author states directly that it is not a three.js API reference and not lessons on 3D basics. Installation is one command for the needed agent: `npx threejs-awesome-graphics-agent-skills@latest install --agent claude-code`, with codex, cursor, github-copilot and custom variants. MIT license.
Who it is for. For website and game developers on three.js who need expressive graphics without weeks of hand-tuning light and shaders.
Good fit when
- You need a realistic or stylized three.js scene
- You need shaders, TSL, WebGPU or post-processing
- You want to save time tuning lighting and materials
Not a fit when
- You need a three.js API reference: it is intentionally not covered here
- You need to learn 3D basics from scratch
Example request
Make a three.js ocean scene: waves, glints, fog and post-processing, and we will check the result in the browserLimitations
The npm installer copies the skills into the chosen agent's folder. The skills only suggest graphics techniques to the agent, while the scene code stays yours and needs checking. A package link without a version takes the latest: pin a version for reproducibility.
How to disable. Delete the copied skill folders from the agent's folder.
FAQ
Is this a three.js reference?
No. The author says there is no API cheat sheet or 3D basics here, only techniques for strong graphics.
How do I install it?
npx threejs-awesome-graphics-agent-skills@latest install --agent claude-code, with codex, cursor, github-copilot and custom variants.
What is inside?
Meshes, lighting, PBR, textures, shaders, TSL and WebGPU, GLSL, post-processing, particles, color and tone mapping.
Discussion
No questions or reviews yet.
Related
SkillsTen reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
Three.js Architecture Effects
threejs-architecture-effects
A skill building an orbitable Three.js building that assembles itself: brick, frame, procedural materials. The result is a working Vite and React site
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Meng To's Agent Skills
Agent Skills
A skill library for expressive landing pages, animation, WebGL and Three.js browser games, with demos and prompts
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
README in short
The README describes a three.js skills pack for strong scene and game graphics and installation through npx for different agents. MIT license.