scottstts/Threejs-Awesome-Graphics-Agent-Skills

Three.js Awesome Graphics Agent Skills

What it is – A npm‑distributed skill pack that bundles ready‑made Three.js code snippets, shaders, assets and example scenes. The pack is meant to be installed into an AI coding assistant (Codex, Claude Code, Cursor, GitHub Copilot, Gemini‑CLI, etc.) so the assistant can copy‑paste or adapt high‑quality graphics implementations instead of trying to “invent” them from a vague prompt.

Why it matters – Modern LLM‑based code assistants are good at recalling API calls but still struggle to produce sophisticated visual effects without concrete reference code. This library supplies that concrete “vocabulary”: fully‑fledged implementations of things like PBR materials, procedural oceans, volumetric clouds, ray‑marched space effects, and a host of post‑process pipelines. By loading the pack, an agent can:

• Recognise a user request such as “add realistic ocean with foam and caustics” and instantly surface a proven Three.js implementation.
• Keep the generated code deterministic (named parameters, reproducible inputs) so the same prompt yields the same visual result.
• Provide diagnostic captures (fixed‑view screenshots, mosaics) that the agent can return to the user for validation.

Key components

Skill	What it gives the agent
threejs-procedural-materials	PBR soil, moss, lava, glass, soft‑body jelly, per‑instance dissolve, etc.
threejs-spectral-ocean	FFT‑based wave synthesis, Gerstner‑FFT hybrid, foam, spray, underwater optics.
threejs-volumetric-clouds	Density fields, bounded ray‑marching, lighting, temporal history.
threejs-raymarched-space-effects	Black‑hole lensing, wormhole throats, accretion‑disk rendering.
threejs-screen-space-ambient-occlusion / threejs-bloom / threejs-exposure-color‑grading	Full post‑process pipeline that can be dropped into a Three.js render loop.
…and many more covering cameras, procedural geometry, vegetation, architecture, VFX, shadow systems, etc.

How to get it – Install globally or per‑project with a single npx command, specifying the target agent:

# Example: install for the Codex assistant (global)
npx threejs-awesome-graphics-agent-skills@latest install --agent codex

# Project‑scoped install for GitHub Copilot
npx threejs-awesome-graphics-agent-skills@latest install --agent github-copilot --scope project

Supported agents include Codex, Claude Code, Cursor, Copilot, Gemini‑CLI, Codeium (windsurf), and any custom agent via a path.

Development workflow – The repo ships a small gallery app (npm run dev) that renders every example for visual inspection. Developers can generate deterministic screenshots (npm run capture:examples) which the skill pack uses as reference outputs for the threejs-visual-validation skill.

Typical use‑case

1. A developer asks an LLM‑based assistant: “Create a night‑time beach scene with realistic water and fog.”
2. The assistant, having the skill pack installed, matches the request to threejs-spectral-ocean, threejs-water-optics, threejs-atmosphere-aerial-perspective, and threejs-volumetric-clouds.
3. It inserts the corresponding implementation files and assets directly into the project, exposing the controllable parameters (wave amplitude, fog density, tone‑mapping).
4. The developer runs the example gallery, sees the rendered result, and tweaks the exposed parameters as needed.

Who it’s for – Front‑end developers, game‑prototypers, or anyone building interactive 3‑D experiences with Three.js who want their AI assistant to produce production‑grade visual effects without hand‑crafting every shader or procedural system.

---

All information above is taken directly from the repository’s README; no additional features are inferred.