# How to publish an interactive explainer of how a network works with anatomy

Repo: [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) | Difficulty: Intermediate | Time: 1 hour | Basis: Seen in the wild

Turn a technical flow, like a message hopping across a radio mesh, into an animated page people can explore.

**Who it is for:** Community organizer or maintainer who wants newcomers to understand how their network moves a message

**The problem:** Newcomers do not grasp what happens between pressing send and the message arriving.

**The outcome:** A public interactive explainer page, in more than one language if you ask for it.

## Steps

1. Install the skill: npx skills add wheresryan22/anatomy -g
2. Describe the flow you want explained with /anatomy and ask for a standalone HTML page.
3. Test the page and fix unclear labels with follow-up requests.
4. Host the HTML file on any static site.

## Prompt to paste into your agent

```text
Using wheresryan22/anatomy, build an interactive explainer of how <message or data flow> travels through <network>. Output a hostable HTML page and verify each step in the flow is clickable.
```

## Caveat

Review the technical claims in the figure before publishing, since the agent may simplify or misstate protocol details.

## Seen in the wild

- Reddit: https://v.redd.it/xg6nyvw8bbvh1

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/wheresryan22-anatomy/build-an-interactive-network-explainer/