102.3K+Download
Skip to the usage guide
Anatomyby wheresryan22

Anatomy Skill.

Explain a technical idea as a machine the reader can understand. Anatomy guides your coding agent through isometric SVG geometry, physical metaphors and readouts that agree with the moving parts.

  • Isometric SVG
  • Technical Explainers
  • Interactive Figures
Download OpenDesignView Usage Guide
Source Review · anatomySKILL.md
Task Technical Illustration Produces • An SVG figure, standalone HTML page or React components • A physical metaphor with model-driven values and optional interaction • Geometry and browser review evidence when the checks are run Before You Start The kit requires Node.js 20.10+ and Chrome or Chromium for checks. The skills CLI has its own Node requirement; the README records 22.20+ for CLI 1.7.1.
Editorial summary · source reviewed 2026-10-12 · not a generated example

01 What It Does

Explain the System Through a Physical Mechanism

Anatomy uses a recognizable object to explain a technical relationship. The description here is based on its source, not on a figure we generated.

Source-based workflowNot an execution benchmark

The Working Approach

A queue might become a mechanism that holds and releases objects; a threshold might become a gauge with a marked limit. The useful part is the mapping: what moves, what it measures and what a viewer should learn. The skill asks the agent to establish that model before drawing the parts.

The included kit builds solid isometric forms with shaded faces and explicit depth ordering. A figure can ship as SVG, standalone HTML or React components. Interactive versions connect controls, motion and readouts to the same model; optional WebGL adds effects such as water or light within the SVG scene.

Expected Deliverables

  • An editable SVG figure, standalone HTML page or React components
  • A caption and, for interactive figures, controls and model-driven readouts
  • Geometry checks and browser captures, when executed in the target environment
See the Example Brief

From Brief to Review

  1. 01
    Map the Idea to an Object

    Supply the real behavior and choose one mechanism that explains it. Define what each movement and readout means before adding decorative detail.

  2. 02
    Plan the Parts and Camera

    List the supporting structure, working mechanism and controls. Choose a view that exposes the relationship rather than hiding it behind the enclosure.

  3. 03
    Build Geometry and Behavior

    Use the kit for solid shapes and depth ordering. Compute static geometry once; connect interactive parts and displayed values to the same model.

  4. 04
    Inspect the Figure in Context

    Run the relevant geometry and line checks, then inspect browser captures in both themes. A successful audit does not establish that the explanation is accurate or the composition is readable.

02 When to Use It

When to Use It

Use Anatomy when a physical analogy makes a technical idea easier to grasp. It is more specialized than a general diagram or illustration generator.

A Good Fit

  • Documentation That Explains a MechanismShow how a queue, threshold, control or component behaves through one visible physical relationship.
  • Editorial Technical FiguresBuild a detailed figure for a blog post or landing page where the object itself carries the explanation.
  • Interactive ExplanationsLet a reader change a parameter and see motion and values update together, with keyboard and reduced-motion behavior considered.

Limits to Check

  • Not a General Flowchart ToolFor a process best explained with labeled boxes and arrows, this physical-object approach may add unnecessary complexity.
  • 3D Is an Optional BetaThe pinned source limits its 3D evidence to an example and a test figure. Dense moving geometry needs its own performance checks; a smooth result is not guaranteed.
  • Checks Need a BrowserNode.js 20.10+ runs the kit; Chrome or Chromium is needed for browser checks. Installing the skill does not make those checks pass or supply every project dependency.

Bring These Inputs

  • The Behavior to ExplainProvide the real states, thresholds or equations, plus the audience’s existing knowledge. Label hypothetical values as hypothetical.
  • One Physical MetaphorDescribe the object, what moves and what that movement means. Share visual references for finish or materials, not as a request to copy an existing figure.
  • An Output and Interaction ScopeChoose SVG, standalone HTML or React components; specify size, theme and whether interaction, WebGL or experimental 3D is actually needed.

03 Decisions That Matter

Decisions That Matter

  1. Readouts Share the Motion Model

    A number is useful only if it reflects the same state as the mechanism. The skill asks for a common model for motion, caption and displayed values.

  2. Depth Ordering Is Part of the Drawing

    Overlapping solids, pipes and moving parts need a consistent front-to-back order. The included audit checks geometry; line endings require a separate check.

  3. Interaction Has a Still Version

    The documented workflow includes keyboard control, offscreen pausing and reduced motion. If WebGL is used, the SVG should remain understandable without it.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

The command below installs the skill into a project and lets you select an agent. Check the upstream README before running it.

Documented Install Command
npx skills add wheresryan22/anatomy

The kit needs Node.js 20.10+; the README records Node.js 22.20+ for skills CLI 1.7.1. Browser checks require Chrome or Chromium. In Claude Code or OpenCode, invoke /anatomy; in Codex, use $anatomy.

Start With One Mechanism

Use a small, explicitly defined model before attempting a dense scene. The brief below is an untested example, not a supplied finished figure.

Example Brief
Use Anatomy to explain a bounded queue as a small physical mechanism in a standalone HTML figure. The queue holds at most 5 items: enqueue adds one when there is room, dequeue removes one when it is not empty, and rejected operations leave the count unchanged. First propose the object and explain what its movement means. Use these hypothetical rules, not invented benchmark data. Make the controls keyboard-accessible and drive the count and motion from one model. Support light and dark themes, a 390 px viewport and reduced motion. Do not add WebGL or 3D. Show the static design before adding interaction, then report which geometry, line and browser checks you actually ran.

Check the Explanation and the Drawing

Inspect the result against the model and the browser evidence. Record checks that could not run.

  • The count, movement and empty/full states agree with the stated queue rules.
  • The figure remains readable on a narrow screen and without motion; its controls work with a keyboard.
  • Both themes and applicable geometry and line checks are reviewed; any unrun checks are named.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
wheresryan22
Repository
wheresryan22/anatomy
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-10-12 · 689dcf966e63
Editorial Source Summary
Anatomy combines a physical-object explanation method with an isometric SVG kit, optional interaction and source-defined geometry and browser checks. This is an editorial summary of the pinned source, not an execution report.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does Anatomy require React?

No. The source supports framework-free JavaScript or TypeScript that produces SVG and HTML, as well as React and Next.js components. Choose the output that fits the host project.

Do I need WebGL or 3D for an Anatomy figure?

No. SVG is the core output. WebGL is optional for effects such as water, fire or light; rotating 3D geometry is a separate beta option. Request only the modes the explanation needs.

Is the skill the same as the anatomy-figures package?

No. Anatomy is the authoring skill and toolkit. The separately documented anatomy-figures package provides prebuilt figures. Installing one should not be described as installing the other.

Anatomy

Make One Technical Idea Visible

Start with the real behavior, choose a physical metaphor and inspect the figure in its intended setting. Review the source and setup before running the skill.

Download OpenDesignBrowse Design Skills
Documented Install Command
npx skills add wheresryan22/anatomy