Three.js Architecture Effects skill
threejs-architecture-effects
A skill building an orbitable Three.js building that assembles itself: brick, frame, procedural materials. The result is a working Vite and React site
- 537 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The scene is heavy for graphics
- The included building is an example
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/threejs-architecture-effectsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The scene is heavy for graphics
- The included building is an example
This is third-party code. Review the repository files before installing.
What it does
Threejs Architecture Effects is an Agent Skills standard skill that builds a solid 3D building in Three.js assembling in front of the viewer: brick courses, a timber frame, layered eaves and procedural materials without paid models. The build runs on a single 0 to 1 timeline: it can be played, paused and scrubbed. The result is a Vite, React and Three.js starter: `npm ci && npm run dev`. Installation: `git clone https://github.com/lhlGitHub/threejs-architecture-effects.git` and copying the folder into the agent's skills directory. The README is in Chinese and English, MIT license.
Who it is for. For frontend developers and designers who need showy 3D scenes on a site without bought models and API keys.
Good fit when
- You need a Three.js 3D scene with timeline assembly
- You need procedural materials without paid models
- You need a Vite, React and Three.js starter
Not a fit when
- You need a historical reconstruction: the building included is only an example
- A weak device: the scene is heavy for graphics
Example request
Make a Chinese pavilion by the skill: red walls, green tiles, storey by storey assembly and a camera orbitLimitations
The bundled clock tower is a working example and not a historical reconstruction or the only possible project. No API keys are needed. The scene loads graphics, so check on weak devices. Access is minimal.
How to disable. Remove the skill from the agent's folder or the plugin through the plugin manager.
FAQ
What do you get?
A working Vite, React and Three.js site with a solid building assembling by a timeline.
Are API keys needed?
No, the materials are procedural and there are no paid models.
Where to put the skill?
Into the agent's skills folder, for example ~/.claude/skills/threejs-architecture-effects.
Discussion
No questions or reviews yet.
Related
SkillsTen reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
Meng To's Agent Skills
Agent Skills
A skill library for expressive landing pages, animation, WebGL and Three.js browser games, with demos and prompts
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Three.js Architecture Effects (this entry) | no | 537 | |
| Blender Skills | no | 293 | controlling Blender through the BlenderMCP add-on |
| Scroll Video Website Skill | no | 55 | a site with frame scrolling of a video |
| Cinematic Scroll Prompt Kit | no | 217 | a prompt for a 2.5D scroll site |
README in short
The README describes a Three.js 3D building skill with an assembly timeline, a starter project and installation by copying. MIT license.