Machine Skill

One line naming a machine, and Claude Code builds an interactive physics-based 3D model of it in a single HTML file

  • 444 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The skill runs Node scripts, Playwright with a browser and ffmpeg, and may download music from a URL
  • Pages load three.js from an external CDN when opened
All reasons and checks

airsuphq/machine-skill

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/machine-skill

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The skill runs Node scripts, Playwright with a browser and ffmpeg, and may download music from a URL
  • Pages load three.js from an external CDN when opened

This is third-party code. Review the repository files before installing.

What it does

Machine Skill starts with /machine and the name of a device, such as a turbofan engine or a watch movement. Claude researches the real dimensions and operating principle, writes them down and builds the model in three.js on one HTML page. The page opens from disk, from a static host or inside an iframe. The machine has real proportions in metres, 15 to 40 named parts and thousands of solid pieces such as blades, teeth and bolts. For each machine Claude writes a small solver, and the numbers on screen come from it. The model can be exploded, cut away with solid section faces or shown in x-ray. Slow motion, labels and a "break it" command that shows a failure are there too. The page also runs a film timeline in which time moves only when the recorder steps it. The record.mjs script films the page into a 20–30 second video with a music bed and feed-ready sizes. The pinkscan.mjs script scans finished videos for the magenta frames a stalled headless GPU can return. The examples folder holds four finished pages: a turbofan, a rocket engine, a process pump and a compressor.

Who it is for. For engineers, teachers and content creators who need a clear model of a device for an explanation or a post.

Good fit when

  • You need to show how an engine, pump or watch movement works: a page with cutaway and labels opens in a browser
  • Staff training needs a model of a process pump with its curve, NPSH and seal leakage
  • You need a feed video at 1080 by 1350 from a finished page
  • You need still frames for a slide: the recorder saves chosen seconds as images
  • You need an embeddable block for an article: the page works in an iframe and sits in one file

Not a fit when

  • You need people, landscapes or maps: the skill makes them weaker than mechanisms
  • You need a CAD model for manufacturing: the geometry is procedural, accurate in proportion but without manufacturing tolerance
  • You need an engineering calculation: the physics is a small model that is neither CFD nor FEA, and numbers are checked against public figures but not certified
  • You have a weak graphics card: heavy pages of about 600k triangles are meant for a recent laptop with a real GPU

Example request

/machine a mechanical watch movement, the escapement ticking

Limitations

Pages need a browser with WebGL 2: desktop Chrome, Safari, Firefox or Edge, and phones work with a lighter load. three.js 0.170 loads from a pinned jsDelivr CDN, so an internet connection is required. Filming needs Node 18 or newer, Playwright and ffmpeg: npm i -D playwright, then npx playwright install chromium.

The skill builds mechanisms, engines, instruments and devices. The physics on the page is simplified: each page states what it computes and what it simplifies. The geometry is procedural, without manufacturing tolerance. Film music comes from a file, a URL or the freepd catalogue, whose tracks are CC0.

How to disable. Delete the machine folder from ~/.claude/skills if you installed globally, or from the project's .claude/skills. Finished pages and films stay where the agent saved them, and the HTML file opens without the skill.

FAQ

How do I install Machine Skill in Claude Code?

Run npx skills add AirsupHQ/machine-skill -g -a claude-code. The skill lands in ~/.claude/skills/machine. For a single project drop -g and -a, and it goes to .claude/skills/machine. Then type /machine and name the machine. If the skills folder did not exist in the session, run /reload-skills.

How do I record a video from a finished page?

With node scripts/record.mjs examples/turbofan.html out/turbofan.mp4 --music freepd:Classical/Easy_Lemon. For a feed add --w 1080 --h 1350, for stills --stills 3,9,14,19. The --ss 1.5 flag turns on supersampling, --blur 2 adds motion blur and --fps 60 suits fast parts.

Where do the numbers on screen come from?

From a small solver Claude writes for each machine: a Brayton cycle for an engine, chamber and nozzle for a rocket, pump curves, BMEP for a piston engine. The "How it is computed" section on the page shows the equations. Numbers are checked against public figures, not certified.

Does the skill work in Codex and Cursor?

Point the agent at SKILL.md: everything else is plain files. For Claude.ai and the Claude desktop app zip the folder and upload it under Settings, Skills. Without an agent you can copy kit/template.html and fill the four sections by hand.

What does it mean to break a machine in the model?

It is a computed failure mode. In the turbofan you throw a fan blade and the solver shows the load on the case, in the rocket engine you cut regenerative cooling and the copper throat melts, in the pump you drop the tower level and it cavitates. The solver computes the result and there is no ready table.

Discussion

No questions or reviews yet.

Skills

A skill rebuilds the object in a reference image as a procedural Three.js model written in code, not downloaded art

SkillMinimal access19.7KRepository stars

A skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates

SkillExtended access1.1KRepository stars

Twelve skills that make an agent build single-file HTML animations: slides, protocol diagrams, architecture diagrams and demos for screen recording

SkillExtended access1.7KRepository stars

A skill that draws interactive isometric illustrations in SVG, with WebGL shaders and React output, explaining an idea as a working machine

SkillExtended access22.4KRepository stars

A skill that writes prompts for video, image and music generation on 14 platforms and can submit them in the browser

SkillBroad access266Repository stars

Fifteen Claude Code skills for launch films, animated charts and reels made entirely from code, with no After Effects

SkillExtended access476Repository stars

Comparison with similar tools

Entries that share the main search query, and how they differ.

EntryOfficialRepository starsMain difference
Machine Skill (this entry)no444
img2threejsno19,722builds a procedural model of an object from a reference image; Machine Skill researches a device and computes its physics
Three.js Skillsno3,808ten Three.js reference skills for scene, materials, lighting and shaders; no ready machine models or solvers

README in short

A gallery of four examples shows that each came from a single line. A separate section teaches how to write a good request: what should move, what should break and where the result goes.

README badge

Original SKILL.md

---
name: machine
description: Turn one line ("a turbofan jet engine", "a mechanical watch", "an LVAD heart pump") into a photoreal, physics based, interactive 3D simulation of that machine in a single HTML file, plus a 20 to 30 second film to post it. Real proportions in metres, real materials (PBR metals, paints, polymers, glass), studio lighting with soft shadows, moving parts driven by a small solver that computes real numbers (thrust, torque, rpm, flow, pressure, efficiency), and modes to explode it, cut it open with clean section caps, x-ray it, slow it down, label it and break it. Use this whenever someone asks to build, simulate, visualise, explain or "show how X works" for any machine, engine, mechanism, device, instrument or piece of hardware, wants an interactive 3D model or a cutaway, or wants a video of a machine for a post, even if they never say "simulation" or "three.js".
---

# Machine Skill

You build a machine the way a product studio photographs one and an engineer explains one: the real thing at its real size, in real materials, on a clean studio set, running on real equations. One line in, one HTML file out, and a film in one command.

The output is always:

1. `<name>.html`: a single self contained page (three.js 0.170 from jsDelivr, the kit inlined). It opens from disk, from any static host, or inside an iframe.
2. A film: `node scripts/record.mjs <name>.html out/<name>.mp4 --music freepd:<Category>/<Name>`.

Open `examples/` first. Every example was made from the one line at the top of its page. `examples/turbofan.html` is the reference: read it end to end before you write anything.

## The bar

Before you start, picture the frame a viewer sees after three seconds. It must already look like a studio product photograph of the real machine: correct silhouette and proportions, metal that reads as metal, a soft shadow on a paper floor, nothing floating, nothing clipping, nothing placeholder. Then it moves, and every number on screen is computed.

A result is not done while any of these is true:

- a part a mechanic would expect is missing (no fuel nozzles in a combustor, no escapement in a watch, no valves in an engine)
- something floats, intersects, or has a visible seam or gap at a joint
- a material looks like plastic when it should be metal, or everything is one grey
- a number on screen is typed in rather than computed by the solver
- the cutaway shows hollow shells instead of solid section faces
- the first frame of the film is not beautiful

## Workflow

### 1. Research the real machine (5 minutes, no code)

Write down, in a comment block at the top of the machine script, from what you know (and the web if you have it):

- **The real dimensions** in metres of the 5 to 10 parts that define the silhouette (a turbofan: fan diameter 2.85 m, length 4.9 m, nacelle max diameter 3.44 m).
- **The parts list** in assembly order, each with its material. Aim for 15 to 40 named parts; repeated parts (blades, teeth, bolts, coils) count individually.
- **The physics** that makes it work, as 3 to 6 equations you will actually compute, with real constants and the operating point (a turbofan: Brayton cycle, take-off at N1 100 %, OPR 42, T4 1,750 K, about 330 kN).
- **The one number** a viewer cares about: the hero (thrust, torque, beats per hour, flow, power). It gets a huge serif readout and a thin bar.
- **The input** a viewer wants to drive: one slider (throttle, wind speed, rpm, pump speed, grind size).

Report a problem

Foxx AIMachine Skill
Foxx AI

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.