# Teardown: The Claude Code Skill That Builds a 3D Machine Simulator You Can Take Apart > Source: > Published: 2026-11-06 00:00:00+00:00 **Teardown** is a Claude Code skill that turns the question "how does this machine work?" into a single offline 3D page you can drive and take apart. Its GitHub repository, [elvarofficial/teardown](https://github.com/elvarofficial/teardown?ref=explainx), was created on October 30, 2026 and had about 2,176 stars by November 6, according to the GitHub API. It is MIT licensed, has two commits, and builds on another open-source toolkit, [claude-motion](https://github.com/whaleyxbt/claude-motion?ref=explainx). The idea is simple. You ask for an engine, a watch or an excavator arm. Claude builds a Three.js simulator as one HTML file. The machine runs in the middle, panels around it read the real numbers, a button opens the part doing the work, and when nobody touches it the page tours itself. ## Quick answers | Question | Answer | |---|---| | What does it do? | Builds one offline HTML 3D simulator of a machine from a plain-language request. | | What does it need? | Claude Code, Node.js 20 or newer, Playwright with Chromium. ffmpeg for video, Python 3 for sound. | | License? | MIT. | | Install? | `npx skills add elvarofficial/teardown -g -a claude-code` , then`npm install` and`npx playwright install chromium` once. | | Examples included? | Three: a V8 engine, a Cessna and a Strandbeest. | | Maturity? | Created October 30, two commits. Early. | ## What does the Teardown skill actually do? Per the README, the skill asks Claude to build the machine "as one offline HTML page". The pieces are: - **A live page you drive.** The`-live` build is the interactive simulator. Panels read real numbers from the model, not decorative gauges. - **A tour mode.** When nobody touches the page, it plays a guided tour by itself. - **A film build.** The`-film` build is a recorded tour. A capture script renders it frame by frame to a 60 fps mp4, or to review sheets of stills. - **Sound.** Procedural sound sits on the film timeline and is mastered to minus 14 LUFS. Recorded samples are CC0 from Freesound. - **A review loop.**`SKILL.md` tells Claude how a machine is built, the rules that make it look right, and a loop to check the result. The repository ships three complete machines under `sims/`: a V8 engine, a Cessna and a Strandbeest walking mechanism. Each has a `-shared` file that defines the machine, a `-live` page and a `-film` tour. A build script, `sims/build.mjs`, bundles a machine into one HTML file with Three.js and fonts inlined, which is why the result works offline. The README also shows demo GIFs of a robotic bee, scorpion and octopus. Those are generated examples, not part of the three shipped machines. ## How do you try it? Install the skill globally for Claude Code: ``` npx skills add elvarofficial/teardown -g -a claude-code ``` Then, once, in the installed folder: ``` npm install && npx playwright install chromium ``` You need Node.js 20 or newer. For video you also need `ffmpeg`, and for sound you need Python 3. To look at an example without asking Claude for anything, build one of the three bundled machines: ``` node sims/build.mjs v8-live node sims/build.mjs cessna-live node sims/build.mjs strandbeest-live ``` The output lands at a path such as `teardown-out/dist/v8-live.html`. Open it in a browser. Then try prompts from the README: Build me a simulator of a 4-stroke motorcycle engine I can take apart. How does a mechanical watch keep time? Show me as a simulator. Make a teardown of a hydraulic excavator arm and record a 20-second video of it. If `npx skills add` is new to you, our guide to [installing Claude Code skills with npx](https://explainx.ai/blog/npx-skills-install-claude-code-skills-registry-2026) covers where skills land and how to update them. ## Why is this trending? Two reasons stand out. First, the output is shareable: one HTML file that opens anywhere is a better demo than a screenshot. Second, it is a clear example of what skills are good at. A skill is a package of instructions, scripts and a review procedure that tells an agent how to do a repeatable job well. If you want the background, read [what agent skills are](https://explainx.ai/blog/what-are-agent-skills-complete-guide) and [how to build your first skill](https://explainx.ai/blog/how-to-build-your-first-agent-skill-step-by-step-2026). Teardown sits in a growing family of visual skills. [Archify](https://explainx.ai/blog/archify-agent-skill-architecture-diagrams-guide-2026) generates architecture diagrams in a similar spirit. The difference is that Teardown aims at physical mechanisms that move, with a physics-style stage, not static diagrams. Stars measure attention, not quality. The repository is a week old, and the star count here comes from the GitHub API, not from user reviews. ## What should you check before installing? Skills are instructions your agent follows, plus scripts it may run. This one asks you to run `npm install` and download a Chromium build through Playwright. That is normal for a browser-capture tool, but it is still code from a stranger. Sensible steps: 1. **Read `SKILL.md` and the scripts.** Look for network calls, file writes outside the output folder and shell commands. 2. **Pin the version.** Our note on[skills lock files](https://explainx.ai/blog/skills-lock-json-reproducible-agent-skills-2026) explains how to keep a skill from changing under you. 3. **Run it in a throwaway folder or container,** not in a repository with secrets. 4. **Scan it.** Tools such as[NVIDIA SkillSpector](https://explainx.ai/blog/nvidia-skillspector-ai-agent-skill-security-scanner-2026) check skills for risky patterns. 5. **Understand the threat model.** Our overview of[agent skills security](https://explainx.ai/blog/agent-skills-security-threat-explainx-verification) lists how malicious skills hide instructions.[AgentBeam](https://agentbeam.com/?ref=explainx) , from the explainx.ai team, is an agent security platform that stops AI agents before they take dangerous actions. I did not run the skill for this post. Everything above comes from the README and repository metadata, and I have not verified how well Claude's generated simulators match real mechanical behavior. ## How does a skill like this work under the hood? The README's file table shows the structure, and it is a good template for any skill that produces a build artifact. - **`SKILL.md` is the brain.** It is what Claude reads: how a machine is constructed, the rules that make it look right, and the review loop. Everything else is tooling the instructions point to. - **`sims/kit/` is the runtime.** It holds the stage, the render runtime and a shader warm-up step. Warming shaders before the first frame avoids visible stutter when the page opens. - **Each machine is three files.** The shared file defines geometry and behavior once. The live page and the film tour reuse it, so the interactive version and the recorded version cannot drift apart. - **`sims/build.mjs` bundles everything.** It inlines Three.js and fonts into one HTML file. That is the reason the output works offline and can be emailed or dropped into a slide. - **`sims/capture.mjs` closes the loop.** It uses a headless browser, which is why Playwright and Chromium are needed, to render frames. The same capture path can produce review sheets of stills, so Claude can look at its own output and fix problems. That self-review step is what separates a skill from a one-shot prompt. The practical lesson is to separate three things: a model of the thing, a way to view it, and a way to check it. When you write your own skill, do the same. ## What are good prompts for it? The README's own examples name a concrete machine and a deliverable. A few patterns that follow from that: 1. **Name the machine and the level.** "A four-stroke engine" is better than "an engine", and "for a ten-year-old" or "for a mechanical engineering student" sets the labels. 2. **Ask for the part you care about.** "Let me open the valve train" tells Claude which cutaway button to build. 3. **Ask for numbers you can verify.** If you want RPM, torque or gear ratios on the panels, say so, then compare them with a reference. 4. **Separate the live page from the film.** Build the interactive page first. Record the video only after you are happy with it, because the capture step is the slow and costly part. 5. **Start from a bundled example.** Open the V8, Cessna or Strandbeest build, then ask Claude for a variation. A known-good machine is a better starting point than a blank prompt. ## Where is Teardown thin? - **Accuracy is unproven.** "Panels read real numbers" means numbers from the simulation model Claude writes. A model generated by an LLM can be wrong in ways that look convincing. For learning, cross-check against a textbook. - **Cost is unstated.** Each simulator takes a long Claude Code session, plus a review loop that renders and inspects frames. The README does not give a cost or time per machine. - **Setup is heavy.** Chromium, Node, ffmpeg and Python are four dependencies for the full video path. - **No releases.** There is no tagged release, and the history is two commits. - **Built on others' work.** The README credits claude-motion for the runtime, frame capture, sound engine and review rules, so Teardown's own contribution is the machine kit, the skill text and the examples. That is a fair division, but it means upstream changes can affect it. ## Who is it for? Teachers and explainers will like the idea of a self-contained page that opens in a classroom without a network. Developer-relations teams can use the film build for short product demos of hardware. Hobbyists get a quick way to explore how a differential or a cam works. It is less suited to engineering work where fidelity matters. A generated simulator is an explanation aid, not a validated model. ## Related reading *Star counts, commit history and install steps are as of November 6, 2026. Check the repository for changes.*