Draw interactive isometric figures that explain a system

Get skill on GitHubRaw SKILL.md on GitHub

Opens the skill on GitHub

Source wheresryan22

Installnpx skills add wheresryan22/anatomy

Submit a skill

Overview

This skill builds detailed interactive SVG figures that show how a technical idea works as a physical object, such as a dial gauge, a plotter, or a lock. Each figure has many small parts with four-tone shading and a framed card that carries a title, a hint, and a number that updates as you interact, with gentle animated motion. You can build it as plain TypeScript or JavaScript that outputs SVG and HTML pages, or within a React or Next.js project, and it can add WebGL shaders for effects like fire, water, and lamp light. Eight example figures ship with it, and it can share a completed figure in the Anatomy community gallery if you request that.

Use cases

Alternatives

  • Draw diagrams and charts as HTML with SVGThis skill draws diagrams and charts as standalone HTML pages that use inline SVG, styled with an editorial look. It covers 45 visual types, from architecture, flowcharts, and sequence diagrams to org charts, Gantt charts, and database schemas, and it can import files from Mermaid, Excalidraw, and draw.io. On first use in a project it checks the style guide and asks whether to customize it, for example from a website URL or pasted tokens. Results can be exported to PNG or SVG.Document intelligenceDiagrams
  • Turn answers into one-page visual HTML explainersThis skill turns a complex answer into a single visual HTML page. The agent drafts the content in extended Markdown, and a bundled command-line tool named am takes care of layout, color, dark mode, and where diagram elements sit, so no HTML or SVG is written by hand. It is meant for explanations of how something works, comparisons and trade-offs, rankings, and anything with a table or several sections. The page follows the language of your question, and its settings can be changed with a config command.Document intelligenceDiagramsHTML
  • Annotate and sign PDFs in a viewerThis skill opens a PDF in a viewer on your machine so you and the agent can work on it visually. You can highlight, comment, stamp, fill in form fields, and place a signature or initials. Signatures are visual only, not certified. Use plain file reading for summaries or text extraction.Document intelligencePDFForms
  • Canvas DesignDesigns visual canvases and layouts as PNG/PDF artifacts with intentional composition and typography.Document intelligence
  • Check a contract against your negotiation playbookThis skill checks a vendor or customer contract clause by clause against your organization's standard negotiation positions. Each clause gets a green, yellow, or red rating, with suggested redlines, fallback positions, and a summary of business impact. It can route the result to a contract system when one is connected.Document intelligenceLegalContracts
  • Create PRD (Paweł Huryn)Drafts clear product requirements documents with problem, outcomes, scope, and acceptance criteria.Document intelligence