# AI use cases for Anatomy (wheresryan22/anatomy) Repo: [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) | Use cases: 4 | Page: https://dedupedai.com/use-cases/wheresryan22-anatomy/ Anatomy is an agent skill that turns a technical idea into an interactive isometric figure built from physical parts, output as HTML, SVG, WebGL or 3D. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Explain a technical concept as an interactive HTML page: https://dedupedai.com/use-cases/wheresryan22-anatomy/explain-concept-as-interactive-page/ - Create a standalone SVG illustration for a landing page: https://dedupedai.com/use-cases/wheresryan22-anatomy/make-svg-illustration-for-landing-page/ - Build a figure with a WebGL fire or water effect: https://dedupedai.com/use-cases/wheresryan22-anatomy/add-shader-effect-to-physics-figure/ - Generate a React component of a figure for a docs site: https://dedupedai.com/use-cases/wheresryan22-anatomy/generate-react-component-for-docs-site/ ## How to explain a technical concept as an interactive HTML page with Anatomy Repo: [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Generate a standalone interactive isometric figure that explains a concept like a rate limiter. **Who it is for:** A developer or technical writer who needs an explainer figure for docs or a blog post and has a concept to illustrate. **The problem:** Plain text and box-and-arrow diagrams fail to show how a mechanism actually moves over time. **The outcome:** A standalone HTML page where a physical model of the concept moves under the pointer and keyboard, with a live readout. ### Steps 1. Run `npx skills add wheresryan22/anatomy -g -a claude-code` to install the skill for Claude Code. 2. Start a session and run `/anatomy explain how a token bucket rate limiter works, interactive`, replacing the concept with your own. 3. Give real numbers for sizes, counts, rates and thresholds so the figure's readout matches your system. 4. Open the generated `.html` file in a browser and move the pointer over the parts to check the motion. 5. Run `node scripts/capture.mjs page.html --out shots/page.png` to save a preview image of the page. ### Prompt to paste into your agent ```text Using the skill from wheresryan22/anatomy, create an interactive standalone HTML figure explaining , with real numbers from . Expected output: one HTML file plus a PNG preview. Verify that the readout values match the numbers you were given before reporting done. ``` ### Caveat The skill invents the physical object itself, so you should check that the chosen metaphor matches how your real system behaves. 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/explain-concept-as-interactive-page/ ## How to create a standalone SVG illustration for a landing page with Anatomy Repo: [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Produce a lone isometric SVG file with embedded styles for a web page or article. **Who it is for:** A marketing designer or front-end developer who needs a polished technical illustration for a landing page or article. **The problem:** Commissioning or hand-drawing isometric technical art takes time and is hard to keep consistent with a site's visual style. **The outcome:** A single SVG file with its styles embedded, ready to drop into a page, plus a PNG preview. ### Steps 1. Run `npx skills add wheresryan22/anatomy -g -a claude-code` to install the skill. 2. Run `/anatomy` and describe the concept, asking for an isometric SVG on a dark theme. 3. Ask for the SVG file and a PNG preview in the same request. 4. Run `node scripts/capture.mjs page.html --out shots/page.png` on any HTML page you want to check visually. ### Prompt to paste into your agent ```text Using the skill in wheresryan22/anatomy, generate a dark-theme isometric SVG illustrating for . Expected output: one .svg file with styles embedded and one PNG preview. Verify that the SVG still reads when opened on its own, without any WebGL layer. ``` ### Caveat The SVG tier is the core output, but the README says the figure ships as HTML, SVG or React, so confirm the format you asked for before using it. 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/make-svg-illustration-for-landing-page/ ## How to build a figure with a WebGL fire or water effect with Anatomy Repo: [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) | Difficulty: Advanced | Time: 45 minutes | Basis: From the README Make an isometric explainer where a shader shows fire, water or light inside the drawing. **Who it is for:** A science educator or lab content author who needs a figure where flame, water or light is part of the explanation. **The problem:** Static SVG cannot show fire, water or caustics convincingly, so the physical effect gets lost. **The outcome:** A figure where a WebGL shader renders the effect in the same isometric camera as the SVG parts. ### Steps 1. Run `npx skills add wheresryan22/anatomy -g -a claude-code` to install the skill. 2. Run `/anatomy` and describe the apparatus, naming the effect that needs a shader, such as a flame or water. 3. Open the built HTML file and confirm the shader layer sits between the back and front SVG. 4. Run `node scripts/capture.mjs page.html --out shots/page.png` to save a preview. ### Prompt to paste into your agent ```text Using the skill in wheresryan22/anatomy, build a figure of with a WebGL shader for . Expected output: an HTML file where the shader is inside the isometric camera. Verify that the SVG still renders with WebGL turned off. ``` ### Caveat The README marks the 3D mode as beta, so stick to the SVG and WebGL tiers for production figures. 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/add-shader-effect-to-physics-figure/ ## How to generate a React component of a figure for a docs site with Anatomy Repo: [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Create a React or Next.js component version of an explainer figure for a documentation site. **Who it is for:** A developer maintaining a Next.js documentation site who wants a figure built as a component. **The problem:** Pasting an HTML file into a component-based docs site breaks the page structure and styling. **The outcome:** A React component and a static HTML preview of the same figure, ready to import into a docs project. ### Steps 1. Run `npx skills add wheresryan22/anatomy` to install the skill into the current project. 2. Run `/anatomy` and ask for a React component plus a static HTML preview for your docs site. 3. Place the generated component in your Next.js project and import it into the page. 4. Run `node scripts/capture.mjs page.html --out shots/page.png` on the HTML preview to check the look. ### Prompt to paste into your agent ```text Using the skill in wheresryan22/anatomy, create a React component of for a Next.js docs page, with a static HTML preview. Expected output: one component file and one HTML preview. Verify that the component imports cleanly into your existing project before committing it. ``` ### Caveat The README lists React and Next.js components as an output, but it does not describe how they plug into a specific docs framework, so test the import in your own project. 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/generate-react-component-for-docs-site/