Open 3D Skills: 3D websites, scroll films and 60 fps recordings

Try it in 60 seconds

npx skills add Moh4696/open-3d-skills
npx skills add Moh4696/open-3d-skills --skill threejs-scene
/plugin marketplace add Moh4696/open-3d-skills

Install command copied from the project README. Check the README for the latest version.

What it does

Eight skills that teach your agent to build 3D and animated websites from code: three.js scenes, scroll-scrubbed films, exploded views of machines, cursor-following characters and transparent video, then check the page in real browsers and record it as smooth 60 fps video.

Open 3D Skills is a set of eight skills written by a developer who built real 3D sites first and then wrote down how. threejs-scene makes real-time scenes from code alone (sky and sun presets, soft shadows, bloom,…

Short excerpt from the README of Moh4696/open-3d-skills. Read the full README on GitHub.

Inside the repo

A prompt to try

Written by us so you can reuse it. Replace each [bracket] with your details.

Step by step

1. Open the GitHub repo and look at the motor and pavilion examples to see what the skills make.
2. Install them with npx skills add Moh4696/open-3d-skills (or in Claude Code: /plugin marketplace add Moh4696/open-3d-skills then /plugin install open-3d-skills@open-3d-skills).
3. For the browser checks and recordings, run pip install -r requirements.txt and python3 -m playwright install chromium webkit; you also need ffmpeg and Node 22.20 or newer.
4. Ask for a page, e.g. use exploded-view to build an interactive page that takes apart a bicycle hub, then site-check it and frame-capture a 15-second video.

Watch out for

Docs, demos & materials

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.