Anatomy skill: what it does and how to install it
Builds detailed, interactive isometric SVG figures that explain a technical idea as a real machine, with live readouts and optional WebGL effects.
Install
$ npx skills add wheresryan22/anatomyRun it in a terminal. If your agent is already running, start a new session so it picks the skill up.
About this skill
What it does. Turns a concept into a physical object whose working is the explanation, such as a dial gauge, a lock or a test rig, drawn as an isometric SVG from dozens of small shaded parts in a framed card with a title, hint and live readout. It ships a drawing kit, eight complete examples, an audit that checks depth order and that no pipe passes through anything, and headless Chrome scripts for screenshots. Figures can add WebGL shaders for fire, water or lamp light, or turn in an optional 3D mode.
When to use it. When you want an explanatory figure for docs, a blog post or a landing page, as standalone HTML or in React and Next.js. It needs Node.js 20.10 or later and Chrome for the checks, and it sizes the job first: a single figure often takes under an hour, a dense hero figure a few hours.
History
Repo stars
12.8k
Tracking since . A chart appears once there are 7 days of data.
Installs
No install data
Similar skills
- Explain InterfaceExplains how websites, visual effects and animations are built from live URLs or screenshots, separating measured evidence from reconstruction.
- Stitch Enhance PromptTurns a vague UI idea into a detailed prompt optimised for Stitch, with design system context.
- Expo Native UIBuilds Expo screens that feel native: Apple HIG styling, semantic colours, native controls, SF Symbols and visual effects.