Moh4696/open-3d-skills

Developer Tools

Eight installable agent skills that help coding assistants build 3D and animated websites, check them in browsers, and record demos.

115
21
JavaScript
MIT
1 day old

What it is

Open 3D Skills packages eight skills for coding agents such as Claude Code, Codex, Cursor, Gemini CLI and OpenCode. Each skill is a plain folder with a SKILL.md plus supporting scripts, so agents that support Agent Skills can load it. The skills cover code-built three.js scenes, scroll-scrubbed films, transparent video, cursor-following characters, exploded machine views, AI motion asset planning, browser checks and frame-exact video capture. The README states each technique was used to build a real site first and each script was run on real footage before inclusion.

The practical value is that the agent gets procedures, starter scenes and small tools instead of guessing at WebGL and browser quirks. The starter pavilion scene and the electric motor demo are built entirely from code, with no model files or textures to download.

Install and first use

Prerequisites: Node 22.20 or newer for npx skills and the repo's checks, Python 3.9+ with the listed packages (Playwright, Pillow, NumPy, OpenCV) plus python3 -m playwright install chromium webkit, and ffmpeg on your PATH. The image and video generation skills also need an image/video generation service; threejs-scene, exploded-view, site-check and frame-capture do not.

Install with the open npx skills CLI npx skills add Moh4696/open-3d-skills:

npx skills add Moh4696/open-3d-skills

The installer asks which of the eight skills you want, which agents to install them for, and whether they apply to this project or every project. Start a new agent session afterwards. Non-interactive and single-skill variants:

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

Claude Code users can instead add the marketplace and install the plugin with /plugin marketplace add Moh4696/open-3d-skills and /plugin install open-3d-skills@open-3d-skills Claude Code plugin setup. Codex, Cursor and Gemini CLI each have their own install path in the README, and a shell installer is available for systems without Node shell installer.

A typical workflow is: plan assets and costs with motion-assets, build real-time content with threejs-scene, add scroll/transparent-video/cursor effects, verify pages with site-check in headless Chromium and WebKit, then record a 60 fps clip with frame-capture.

Constraints and caveats

The browser code has no build step and the modules are plain ES modules, so they work alongside React, Vue or Svelte. The generation-dependent skills require some external model service, though none is mandated; the README lists Higgsfield, MiniMax, Kling, Seedance and Nano Banana as the services used during development. The skills are instructions and scripts rather than a hosted service, and the README says no API keys are stored by them and nothing is installed behind your back.

Installing through npx skills or the shell installer runs third-party installer code; review the installer before use and prefer the clone-based ./install.sh variants when you want to inspect and control which agents and skills are linked. The project is MIT licensed.

HotRepo's take

The repo was created on 2026-10-31 and reached 112 stars and 20 forks by 2026-11-01, gaining 7 stars over roughly two hours in the JavaScript new-project list. That is a short record and does not establish sustained traction. What stands out technically is the scope: it treats the agent as a collaborator that plans, builds, checks in real browsers and records, rather than only generating three.js snippets. The mix of verification (site-check) and reproducible capture (frame-capture) is the part most useful for people shipping a 3D landing page, while the generation assets are only as good as the external model service chosen.

Written by AI from the project's README, updated . The project's own docs are the source of truth.