What you get

Editable illustration source, an interactive HTML page with live readouts, or React components for an existing site.

Anatomy: Interactive Illustrations That Explain How Things Work

Added 2026-10-15

A skill for coding agents that turns machines and technical ideas into interactive isometric figures for docs, articles and product pages.

Design & VideoEngineering
View on GitHub ↗
Anatomy: Interactive Illustrations That Explain How Things Work preview

Install with npx skills add wheresryan22/anatomy; invoke /anatomy in Claude Code or $anatomy in Codex. It maps an idea to a physical mechanism, builds its SVG parts and a model for motion and readouts, then checks geometry and screenshots. WebGL can add fire or water; 3D is still beta. Builds need Node 20.10+ and browser checks need Chrome or Chromium. Best for mechanisms rather than data charts; detailed scenes can take a long session.

Related skills

Taste Skill v2: Art Direction and Browser ReviewArt direction, reference images and browser review for coding agents building websites and portfolios.Design & Video · Engineering95.7K starsRemotion's Own Twelve Video SkillsOne each for creating a project, writing markup, driving the Studio and rendering, plus maps, captions, interactivity, multimedia and upgrades — with an umbrella best-practices skill when you cannot tell which fits.Design & Video · Engineering4.5K starsStitch Design Skills, Behind an MCP GateThree plugins bundle fifteen skills covering code-to-design, static HTML extraction, a five-page site from one sentence, and walkthrough video. The hard prerequisite is a registered Stitch MCP server.Design & Video · Engineering7.9K starsEmil's Nine Design-Engineering SkillsDesign-engineering experience from Vercel and Linear, split into nine skills: build, review and improve motion, then sharpen vocabulary, Apple-inspired principles, library choice and multi-option prototyping.Design & Video · Engineering27.4K stars