Anatomy: Agent Skill for Animated Isometric SVG Explainers

X postMeng ToTool

Meng To showcases 'Anatomy', an open-source agent skill by developer Ryan (@wheresryan22) that enables coding agents like Claude Code to generate interactive isometric SVG and WebGL visualisations.

Key points

  1. Meng To demonstrated using the 'Anatomy' skill to generate an animated SVG explainer showing how Seedream 5.0 splits images into layers, packaged as a single HTML file.
  2. Meng To highlighted that the prompt guides Opus 5.5 to consult the documentation and apply custom camera zooms across scenes.
  3. The Anatomy repository by wheresryan22 works with Claude Code, OpenCode, Codex, and Antigravity, requiring only built-in Node.js modules without extra API keys.
  4. Output formats range from standalone isometric SVGs to layered SVG plus WebGL shaders (for fire, water, and glow) and a beta 3D rotation mode.

Why it matters

This approach transforms complex technical documentation into lightweight, browser-native interactive components instead of static diagrams or video assets.

Analysis

Agent skills provide AI CLI tools with structural design and domain instructions. Anatomy standardises isometric rendering rules and camera maths, allowing models like Opus 5.5 to generate functional, code-based educational graphics reliably.

Original post

Meng To

@MengTo · 11 October 2026

Such a good skill for visual explainers. All SVG and animated. Prompt I used: t.co/oUH4TdIZLw install skill /anatomy Explain how Seedream 5.0 is able to split an image into layers and what cool things you can produce with it. Do that in a single HTML file. Change the t.co/wOBPsPh6Dd t.co/VL6HzuvlNB

2.5k likes32 replies3.4k bookmarks101.5k views

View on X
More posts in the thread (1)
  1. @asmirkn the prompt pushes opus 5.5 to check the docs.
Selected replies (5)
  • @ItsGoharr @MengTo designers discovering AI can do their busywork and calling it a skill
  • @uladluch @MengTo one line prompt to an animated svg walkthrough is wild, does it hold up when the machine has like 30 parts or does the camera get lost
  • @asmirkn @MengTo i think the follow up prompt does more than the skill. first pass is never clear, telling it which scenes to zoom in on is what fixes it. did you give it seedream's docs or let claude guess how the layers work?
  • @gavinelliott @MengTo This has me thinking about product onboarding. Let someone change one input and see what happens, rather than watch the whole walkthrough. Especially useful for explaining something like permissions or pricing. Have you tried it with a product flow yet?
  • @eyadnour @MengTo Love this direction. These explainers can go way beyond video and be fully interactive browser experiences. We're about to see new forms of video-like content. Opus is surprisingly good at this. It built me this QR code explainer without any skills. We'll all be Meng Tos. t.co/r4axHedGpA

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 13 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:wheresryan22/anatomy

    Anatomy: Agent Skill for Isometric SVG and WebGL Visualisations

    Anatomy is an open-source skill for Claude Code, OpenCode, and Codex that explains complex technical concepts by turning them into detailed physical machinery. It generates interactive isometric figures using SVG, optional WebGL shaders, and 3D effects.

    6.6kstarsJavaScript

    AI & LLMs· Tool

  • Link:Ryan

    Anatomy: An Interactive Isometric Machine Generator Skill for Claude Code

    Anatomy is a skill for Claude Code that translates abstract technical concepts into interactive isometric machines. Instead of conventional box-and-arrow diagrams, the tool operates on the principle that a functioning physical object should serve as the explanation itself.

    AI & LLMs· Tool

  • X post:Guillermo Rauch

    Anatomy: Generating Interactive 3D Machine Models via Claude

    Guillermo Rauch highlighted the open-source project Anatomy by developer R (@wheresryan22). Designed as an agent skill for Claude, the tool transforms single-line machine descriptions into interactive 3D isometric models.

    2.2kbookmarks218.5kviews

    AI & LLMs· Demo

  • Repository:MengTo/Skills

    Agent Skills: Reusable Playbooks for AI Coding Agents

    The GitHub repository MengTo/Skills provides a curated collection of Markdown-based 'agent skills'. It enables designers and builders to guide AI coding agents like Codex, Claude, and Cursor through complex web design, interaction, and 3D rendering tasks.

    6.2kstarsHTML

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.