# How to export an explainer figure as SVG or React components with anatomy

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

Generate a figure once and ship it as a lone SVG file or React and Next.js components.

**Who it is for:** Frontend developer adding an interactive diagram to a docs site or landing page

**The problem:** A diagram made in a design tool is static and hard to keep in sync with the page.

**The outcome:** A figure delivered as an SVG file with embedded styles, or as React components you drop into your site.

## Steps

1. Install the skill: npx skills add wheresryan22/anatomy -g -a claude-code
2. Run /anatomy with your idea and ask for the output format you need, SVG or React.
3. Place the exported file or components in your project.
4. Load the page and check the figure renders and responds to hover.

## Prompt to paste into your agent

```text
Use wheresryan22/anatomy to create a figure explaining <idea> and export it as <SVG or React components>. Verify it renders correctly inside <my site or framework>.
```

## Caveat

The README lists HTML, SVG and React and Next.js outputs, but how a figure fits into your build setup is up to you.

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/export-a-figure-as-svg-or-react/