Open 3D Skills

# Open 3D Skills

Teaches a coding agent to build 3D and animated websites with eight skills, from three.js scenes and scroll films to transparent video, cursor-following characters and exploded views. For web developers.

Made by Moh4696 on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: Open 3D Skills gives a coding agent eight skills for making 3D and animated websites. They cover real-time three.js scenes written in code, films that play as you scroll, transparent video for Safari, characters that follow the cursor and exploded views of machines. They also cover the AI-made images and video behind these sites, and show the agent how to test a page in real browsers and capture it as smooth video at 60 fps.

Who it suits: Web developers and creative studios who build with a coding agent and want 3D or animated pages without hand-writing every technique.

```table
Industry | Who uses it | How they use it | Example
Web agencies and studios | Front-end developers | Build scroll-driven 3D pages with a coding agent | A developer asks the agent for a landing page where a product scene changes as you scroll
Hardware and product companies | Marketing and web teams | Show how a machine fits together with an exploded view built from code | A team shows a machine coming apart with each part labelled on screen
Architecture and visualization | Designers | Build a building or an outdoor scene that renders live in the browser | A designer asks for a pavilion on a lawn at golden hour, then the same scene at night
Video and content production | Editors | Record a finished scene frame by frame as a smooth video | An editor exports a scene to 60 fps video for a social post
```

People who only need a flat static website can skip it.

Where to use it:

- Claude Code and Codex
- Cursor and Gemini CLI
- OpenCode, which also reads the Claude Code folder
- Antigravity and other agents that read a skills folder
- Real browsers, where the agent checks what it built
- Safari, for the transparent video the skills produce

```table
Use case | Who | What they get back
A 3D site from code | Front-end developers | A real-time three.js scene that runs in the browser
Transparent video | Web designers | A clip with a see-through background that plays in Safari
Exploded view | Product teams | A machine that comes apart on screen, with labelled parts
Screen recording | Content teams | A smooth 60 fps video recorded frame by frame
```

How to set it up: You need a supported coding agent and Node 22.20 or newer for the npx route. A shell installer exists for machines without Node.

1. Run the install command below in a terminal.
2. Answer the questions about which skills you want, which agents get them, and whether the install covers this project or all projects.
3. Start a new agent session afterwards.

```bash
npx skills add Moh4696/open-3d-skills
```

To install one skill, or to install everything for all your agents in every project without questions, use these lines.

```bash
npx skills add Moh4696/open-3d-skills --skill threejs-scene
npx skills add Moh4696/open-3d-skills -g -y
```

Inside Claude Code you can install it as a plugin instead.

```text
/plugin marketplace add Moh4696/open-3d-skills
/plugin install open-3d-skills@open-3d-skills
```

Codex has a plugin route too.

```bash
codex plugin marketplace add Moh4696/open-3d-skills
codex plugin add open-3d-skills@open-3d-skills
```

How to use it: Once the skills are installed, describe the 3D or animated page you want and your agent reads the matching skill. Plugin installs name each skill with a prefix, as in open-3d-skills:threejs-scene. Update later with this command.

```bash
npx skills update
```

```table
Tool | What it does
threejs-scene | Builds real-time 3D sites from code, with sky and sun presets, soft shadows, ambient occlusion, bloom, camera flights and a 60 fps starter scene
exploded-view | Takes a machine apart on screen, as in its demo of an electric motor
frame-capture | Records a scene frame by frame so the video comes out smooth
```

Example: You ask your agent for a 3D scene of a pavilion on a lawn at golden hour, then the same place at night. The threejs-scene skill builds it from code with sky and sun presets and soft shadows, and the demo scenes use no model files.

For newcomers and experts: These are instruction packs for your coding agent. Once they are installed, the agent knows how to build 3D websites that run in a browser, how to check them and how to record a video. A first small thing to try is installing only threejs-scene and asking for a simple scene.

A skill here is just a folder holding a SKILL.md file, which any agent with Agent Skills support can load. The installer links skills into each agent's skills folder, or copies them with the --copy option on Windows and synced folders. The author tried each technique on a real site and ran each script on real footage before including it. The trade-off is that the npx route needs a recent Node.

```flow
Install the skills for your agents
Describe the 3D or animated page
The agent builds it from code
It checks the result in real browsers
frame-capture records the video
```

Good to know:

- License: MIT.
- The set holds eight skills, and you can install all of them or just some.
- The shell installer for machines without Node keeps its own copy in ~/.open-3d-skills and links to it, so a second run brings it up to date.
- The installer has an uninstall option that removes what it installed.
- Open a new agent session after installing, so the agent sees the skills.

## On GitHub, 6 November 2026

- Stars: 266
- Forks: 37
- Open issues and pull requests: 1
- Language: JavaScript
- License: MIT
- Topics: 3d, agent-skills, animation, claude-code, codex, cursor, frontend, scroll-animation, threejs, webgl

## Links

- Code: https://github.com/Moh4696/open-3d-skills
- Releases: https://github.com/Moh4696/open-3d-skills/releases
- Issues: https://github.com/Moh4696/open-3d-skills/issues
- Star history: https://www.star-history.com/#Moh4696/open-3d-skills&Date

## Get the code

```
git clone https://github.com/Moh4696/open-3d-skills.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  6 KB