Maintainer of this skill?
by Moh4696
Eight agent skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, cursor rigs, exploded views, AI motion assets, browser checks and 60 fps recording. Claude Code, Codex, Cursor, Gemini CLI.
# Add to your Claude Code skills
git clone https://github.com/Moh4696/open-3d-skillsGuides for using ai agents skills like open-3d-skills.
See how open-3d-skills compares with popular alternatives.
open-3d-skills is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by Moh4696. Eight agent skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, cursor rigs, exploded views, AI motion assets, browser checks and 60 fps recording. Claude Code, Codex, Cursor, Gemini CLI. It has 63 GitHub stars.
open-3d-skills's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/Moh4696/open-3d-skills" and add it to your Claude Code skills directory (see the Installation section above).
open-3d-skills is primarily written in JavaScript. It is open-source under Moh4696 on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh open-3d-skills against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Open 3D Skills are eight agent skills for building 3D and animated websites: real-time three.js scenes built from code, scroll-scrubbed films, transparent video that plays in Safari, characters that follow the cursor, exploded views of machines, and the AI image and video work behind them. They also teach the agent to check its work in real browsers and to record it as a smooth 60 fps video.
Every technique here was used to build a real site first, and every script was run on real footage before it went in.
The pavilion is the starter scene in threejs-scene; the motor is the demo in exploded-view. Both are built entirely from code: no model files, no textures to download.
npx skills add Moh4696/open-3d-skills
That installs with the npx skills CLI, the open installer for agent skills. It asks which of the eight skills you want, which agents to install them for (Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Antigravity and dozens more) and whether they are for this project or every project. Start a new agent session afterwards.
npx skills add Moh4696/open-3d-skills -g -y # all skills, all your agents, every project, no questions
npx skills add Moh4696/open-3d-skills --skill threejs-scene # just one skill
npx skills update # pull new versions later
npx skills needs Node 22.20 or newer.
Inside Claude Code:
/plugin marketplace add Moh4696/open-3d-skills
/plugin install open-3d-skills@open-3d-skills
The skills are namespaced as open-3d-skills:threejs-scene and so on, so they never collide with other skills. /plugin update upgrades them.
codex plugin marketplace add Moh4696/open-3d-skills
codex plugin add open-3d-skills@open-3d-skills
Start a new Codex session afterwards.
The one-line installer links the skills into ~/.cursor/skills, where Cursor finds personal skills. To use the repo as a Cursor plugin instead, clone it into ~/.cursor/plugins/local/open-3d-skills and run Developer: Reload Window. Teams can import the repo URL as a marketplace under Dashboard → Plugins & MCPs → Add Marketplace.
gemini extensions install https://github.com/Moh4696/open-3d-skills
gemini extensions update pulls new versions.
curl -fsSL https://raw.githubusercontent.com/Moh4696/open-3d-skills/main/install.sh | bash
It installs all eight skills for every coding agent it finds (Claude Code, Codex, Cursor, Gemini CLI, and OpenCode, which also reads Claude Code's folder). It clones the repo to ~/.open-3d-skills and links the skills from there, so running it again updates them. From a clone you can choose:
git clone https://github.com/Moh4696/open-3d-skills && cd open-3d-skills
./install.sh --claude --codex # only these agents (also --cursor --gemini --opencode --agents)
./install.sh --dir path/to/skills # any agent that reads a skills folder
./install.sh threejs-scene frame-capture # only some skills
./install.sh --copy # copy instead of symlink (Windows, synced folders)
./install.sh --uninstall # remove what it installed
Each skill is a plain folder with a SKILL.md, so any agent that supports Agent Skills can load it.
| Skill | What it does | Ships with |
|---|---|---|
threejs-scene |
Real-time 3D sites built from code: buildings, vehicles, machines, landscapes. Sky and sun presets that blend, soft fitted shadows, ambient occlusion, bloom, instancing, profile sweeps, shader patches, camera flights, quality tiers | A complete 60 fps starter scene, and notes on lighting, geometry, shaders and performance |
scroll-film |
Scroll-scrubbed films from generated clips: chained with start and end frames, holds for captions, phone versions, loading order, reduced motion | scroll-film.js engine, a prep script for frames or scrub-ready video, a seam checker |
motion-assets |
Planning and generating AI images and clips without wasting money: asset lists with prompts and costs up front, one look across assets, model choice by capability, rate limits, logging | A loop checker that finds and fixes loop points, and a paste-back tool for outpainted images |
alpha-cutout |
Transparent video from clips shot on a key plate: per-frame plate measurement, edge unmixing, outputs for every browser including Safari | Plate builder, keyer (stacked-alpha MP4, VP9 alpha, WebP frames), WebGL alpha video player |
cursor-rig |
A painted character whose head follows the cursor, built as a grid of poses on one fixed body, with live blinks | Rig builder (alignment, even steps, flow in-betweens) and a spring-driven canvas player |
exploded-view |
Interactive explainers of how machines work: staged explode, x-ray, section cut, labels with leader lines, picking | explode.js and the motor demo above |
site-check |
Checks a 3D or animated page in headless Chromium and WebKit at three sizes: frame time, draw calls, errors, blank canvases, overflow, reduced motion | A checker that writes a report and a contact sheet, and a Range-capable local server |
frame-capture |
Frame-exact 60 fps video of any page by running it on a virtual clock; labelled side-by-side or stacked comparisons | Recorder, comparison builder, local server |
motion-assets writes the concept, the asset list, every prompt and the cost, and waits for a yes before spending anything.threejs-scene builds what should be real-time. scroll-film, alpha-cutout and cursor-rig turn generated clips into page motion. exploded-view takes a machine apart.site-check shoots every state in real browsers and fails on errors, blank canvases and broken phone layouts.frame-capture records the result as a smooth video for X, YouTube or a client, and builds before-and-after comparisons.The skills are instructions; their scripts need:
npx skills and the repo's own checks. The browser code has no build step.pip install -r requirements.txt (Playwright, Pillow, NumPy, OpenCV), then python3 -m playwright install chromium webkit.motion-assets, alpha-cutout, cursor-rig and scroll-film. threejs-scene, exploded-view, site-check and frame-capture need none.Nothing is installed behind your back and no API keys are stored by the skills.
Do I need a particular AI video service? No. The skills describe what a model must be able to do (start and end frames, image editing that holds framing) and how to check its output. They were built with Higgsfield, MiniMax, Kling, Seedance and Nano Banana, and say so where a behaviour was observed.
Why build 3D from code instead of loading models?
Code-built scenes are small, sharp at any size, free of licensing questions and easy for an agent to change. exploded-view works on loaded GLB files too.
Does it work with React, Vue or Svelte? Yes. The modules are plain ES modules and the techniques are framework-free.
Can I install just one skill?
Yes: npx skills add Moh4696/open-3d-skills --skill scroll-film. Skills mention each other by name where they wo