New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Threejs

by nirholas in nirholas/three.ws

A skill your agent uses when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance).

Apache-2.0Auto-check passedGame Development

Install Threejs

skills CLI
$ npx skills add nirholas/three.ws --skill threejs -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nirholas/three.ws threejs --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .claude/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/threejs .claude/skills/threejs && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
threejs
GitHub stars
226
Used in
1 other repo
Token cost
~865 tokens
SKILL.md length
220 words
Files
5
Skills in repo
165
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance).

  • Works in 2 steps: Minimal spinning cube → Respect reduced motion
  • Debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer
  • SKILL.md covers When to use, Core mental model, Key APIs/patterns and Common pitfalls, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Threejs is an agent skill from nirholas/three.ws. Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.

Its SKILL.md is about 870 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `REFERENCES.md` and `demo/PROMPT.md`).

It sits in Game Development, covering 3D graphics and WebGL. It works with Three.js. The repository describes itself as: Open-source platform for 3D AI agents. Turn text or a photo into a rigged, animated GLB avatar, give it an LLM brain, memory and a wallet, and embed it anywhere with one web… The licence is Apache-2.0.

When your agent uses it

  • Debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer
  • Lights/materials

Example prompts

  • “/threejs”

Workflow steps

2 steps, taken from the step headings in SKILL.md.

  1. Minimal spinning cube
  2. Respect reduced motion

What it can do on your machine

Read from SKILL.md and the folder at commit 238ef60. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Threejs loads about 865 tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 220 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~865

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nirholas/three.ws at commit 238ef60, republished under its Apache-2.0 licence (© nirholas). 220 words, ~865 tokens.

Download SKILL.mdSave it as .claude/skills/threejs/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
threejs
description
Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.

Three.js — WebGL 3D Scenes Skill

When to use

  • Real 3D: product spins, interactive hero scenes, shaders/material effects, 3D data viz
  • You need full control beyond “background effects”
  • You can budget time for asset pipeline + performance tuning

Core mental model

  • Create:
    • Scene (root graph)
    • Camera (Perspective/Orthographic)
    • Renderer (WebGLRenderer)
    • Mesh = Geometry + Material
    • Lights (if using non-unlit materials)
  • Render loop:
    • requestAnimationFrame(animate)
    • Update time-based animations, controls, mixers, then renderer.render(scene, camera)

Key APIs/patterns

  • Setup:
    • const renderer = new THREE.WebGLRenderer({ canvas, antialias, alpha })
    • renderer.setSize(width, height, false)
    • renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  • Camera:
    • camera.aspect = width / height; camera.updateProjectionMatrix()
  • Scene graph:
    • scene.add(object) / object.position/rotation/scale
  • Loading assets:
    • GLTFLoader (models), TextureLoader (images), DRACOLoader (compressed glTF)
  • Controls (common):
    • OrbitControls (debug/product), PointerLockControls (FPS), custom pointer handlers
  • Cleanup (important in SPAs):
    • geometry.dispose(), material.dispose(), texture.dispose(), renderer.dispose()
    • Remove event listeners; cancel RAF.

Common pitfalls

  • Not handling resize → stretched/cropped rendering
  • Too high devicePixelRatio → mobile GPU meltdown
  • Leaking WebGL resources (not disposing) → crashes after route changes
  • Loading huge textures/models → slow start; use compressed textures, Draco/KTX2, smaller maps
  • Using too many lights/shadows → expensive; fake lighting with baked textures when possible

Quick recipes

1) Minimal spinning cube
js
import * as THREE from "three";

const canvas = document.querySelector("#c");
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0, 4);

const geom = new THREE.BoxGeometry(1, 1, 1);
const mat = new THREE.MeshStandardMaterial({ color: 0x7c3aed });
const mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

scene.add(new THREE.AmbientLight(0xffffff, 0.8));
const dir = new THREE.DirectionalLight(0xffffff, 0.8);
dir.position.set(2, 2, 2);
scene.add(dir);

function resize() {
  const w = canvas.clientWidth;
  const h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}
window.addEventListener("resize", resize);
resize();

function animate(t) {
  mesh.rotation.y = t * 0.0006;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
2) Respect reduced motion
  • If prefers-reduced-motion: reduce, render a still frame (no RAF) or slow updates.

What to ask the user

  • Is this decorative (hero) or functional 3D (product viewer)?
  • Target devices: mobile? older iPhones?
  • Asset format availability (glTF, HDRI, textures) and file size constraints
  • Accessibility/reduced motion requirements

© nirholas, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files in third_party/designcode-agent-skills/agent-skills/web-design/threejs of nirholas/three.ws.

  • SKILL.md
  • REFERENCES.md
  • demo/PROMPT.md
  • demo/index.html
  • demo/preview.jpg

Open the folder on GitHubat commit 238ef60

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in nirholas/three.ws, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Threejs next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Threejs compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Threejs this skillnirholas/three.ws2261 repos~865Automated safety check: PassApache-2.0
Motion Webfeitangyuan/motion-web656—~18kAutomated safety check: PassCC-BY-NC-4.0
Threejs Image Generatorvalkor-ai/loom1.2k1 repos~1.4kAutomated safety check: PassApache-2.0
3D Image Rendererhassancs91/claude-image-generation100—~1.4kAutomated safety check: PassMIT
Polycsslayoutit/polycss757—~2.4kAutomated safety check: PassMIT
Deploycyanfish-x/tellux207—~1.1kAutomated safety check: NotesMIT

Similar skills

  • Motion Web

    feitangyuan/motion-web

    Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

    656 GitHub stars~18k tokensUpdated 22 days ago
    Game DevelopmentAuto-check passed

  • Threejs Image Generator

    valkor-ai/loom

    Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos…

    1.2k GitHub starsUsed in 1 repo~1.4k tokens
    Game DevelopmentAuto-check passed

  • 3D Image Renderer

    hassancs91/claude-image-generation

    Generate PNG images by building a real Three.js 3D scene and capturing one frame headlessly — no image model involved.

    100 GitHub stars~1.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

  • Polycss

    layoutit/polycss

    Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements.

    757 GitHub stars~2.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

  • Deploy

    cyanfish-x/tellux

    Deploy tellux examples/docs sites via project scripts — one local command (pnpm run deploy) rclone-syncs to the self-hosted site then Wrangler Direct Uploads to Cloudflare Pages.

    207 GitHub stars~1.1k tokensUpdated 16 days ago
    Game DevelopmentAuto-check: notes

  • Room From Photos

    SkylarKitchen/skills

    Builds a 3D model of a real room from a few phone photos, with movable furniture layouts, as one Three.js HTML page you can open in a browser.

    117 GitHub stars~6k tokensUpdated 9 days ago
    Game DevelopmentAuto-check passed

More from nirholas/three.ws

All 165 skills in this repo

  • Add Shader Cursor Trail

    nirholas/three.ws

    Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…

    226 GitHub starsUsed in 1 repo~760 tokens
    Auto-check passed

  • Publish Project To GitHub

    nirholas/three.ws

    Package a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible…

    226 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check: notes

  • Audit Reference Originality

    nirholas/three.ws

    Audit a website or digital experience against its supplied source references for originality and plagiarism risk.

    226 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • Build Daily Inspiration Sites

    nirholas/three.ws

    Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

    226 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Write Like Meng On X

    nirholas/three.ws

    Write, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content…

    226 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Browser Video Recording

    nirholas/three.ws

    Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…

    226 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

Works with

Categories

Questions about Threejs

What does Threejs do?

A skill your agent uses when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). ws.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance).

When should I use Threejs?

Threejs fits situations like: debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer; lights/materials.

How do I install Threejs in Claude Code?

Run `npx skills add nirholas/three.ws --skill threejs -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/threejs in nirholas/three.ws) into .claude/skills/threejs in your project. Claude Code loads it when a task matches its description.

How do I install Threejs in Codex?

Run `npx skills add nirholas/three.ws --skill threejs -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/threejs in nirholas/three.ws) into .agents/skills/threejs in your project. Codex loads it when a task matches its description.

Can I use Threejs in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nirholas/three.ws --skill threejs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/threejs, .gemini/skills/threejs, .github/skills/threejs and .opencode/skills/threejs in your project.

What does Threejs need to run?

SKILL.md names no scripts, command-line tools or credentials: Threejs is instructions for the agent only.

Does Threejs access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Threejs safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Threejs use?

Threejs is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Threejs use?

About 865 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Threejs?

Skills that share tags, products or a category with Threejs: Motion Web (feitangyuan/motion-web, 656 stars), Threejs Image Generator (valkor-ai/loom, 1.2k stars), 3D Image Renderer (hassancs91/claude-image-generation, 100 stars) and Polycss (layoutit/polycss, 757 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Threejs?

nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 226 GitHub stars. The repository holds 165 skills in this directory. The repository was last updated on October 7, 2026.

Source: nirholas/three.ws on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.