Describe a real machine in one line and the agent builds it as an interactive three.js simulation in one HTML file, sized from real dimensions and driven by a small physics model. You can explode it, cut it open, break it, then record a short film.
In short: Describe a real machine in one line and the agent builds it as an interactive three.js simulation in one HTML file, sized from real dimensions and driven by a small physics model. You can explode it, cut it open, break it, then record a short film. It is a free skill for people who use Claude Code, Codex, Cursor or Claude and want help with motion graphics.
Checked on · Added
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| Cursor | Free tier + paid | cursor.com |
| Claude | Free tier + paid | claude.ai |
| GitHub repo | Open source · ★ 498 | AirsupHQ/machine-skill |
Image: from the GitHub README, shown with credit.
Images from the project README on GitHub.
Real videos made with this skill, credited to their creators. Hover to preview.
EXPLAINER0:28A 28-second film recorded by the skill itself from one typed line: a Class 8 truck air drum brake assembles on a dyno stand, the brake pedal raises the computed torque, the drum is cut open with red section faces, taken apart, and finally the slack adjuster seizes so the brake runs out of stroke.
npx skills add AirsupHQ/machine-skill -g -a claude-code git clone https://github.com/AirsupHQ/machine-skill.git ~/.claude/skills/machine
Install command copied from the project README. Check the README for the latest version.
Describe a real machine in one line and the agent builds it as an interactive three.js simulation in one HTML file, sized from real dimensions and driven by a small physics model. You can explode it, cut it open, break it, then record a short film.
Type /machine and name a real machine, such as a turbofan, a watch movement or a refinery pump. The agent looks up its real dimensions and the physics behind it, then builds it in three.js as a single HTML file: real…
Short excerpt from the README of AirsupHQ/machine-skill. Read the full README on GitHub.
From the original post, credited below.
The physics is a small teaching model, not engineering-grade simulation, so don't use the numbers for real design work. A run takes a long time and a lot of agent usage. The pages load three.js from a CDN, so they need internet the first time.
Describe a real machine in one line and the agent builds it as an interactive three.js simulation in one HTML file, sized from real dimensions and driven by a small physics model. You can explode it, cut it open, break it, then record a short film.
It works with Claude Code, Codex, Cursor and Claude. The code is on GitHub at AirsupHQ/machine-skill.
Free & open source (MIT). No account or API key. Runs on the agent plan you already pay for; one machine can take the agent around an hour. Filming needs Node 22.20+, Playwright with Chromium and ffmpeg.
Run the install command from the README: “npx skills add AirsupHQ/machine-skill -g -a claude-code”. Check the README on GitHub for the latest version, then follow the steps on this page.
We read 20 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine. How to check a skill before you install it →
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
SKILLA design skill plus a small React kit that teaches your agent to make convincing faux product UI: still images, feature cards, cursor-driven demos and bento grids. It plans the story in a few beats, builds from solid examples, then films the result and fixes what it finds.
Claude Code +2★ 634
SKILLA Claude Code skill that answers "how does this work?" by building the machine as one offline 3D page: it runs in the middle, panels read its live numbers, buttons open the part doing the work, and one click blows it apart. It can also record a short tour video of it.
Claude Code★ 1.1k
SKILLA clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.
Claude Code +1★ 849
SKILLA free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.
Claude Code★ 147
SKILL0:56Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILL0:34Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16kFree newsletter
New AI tools you can use right away, in plain words. Every Friday.
