# Build Interactive Isometric Technical Explainers

Technical concepts can be difficult to explain with static diagrams. Anatomy guides assistants to build detailed physical mechanisms with interactive motion and consistent numeric readouts.

## Install

```bash
npx skillstore add wheresryan22/anatomy
```

## Metadata

- Status: approved
- Slug: wheresryan22-anatomy
- Skillstore revision: r1
- Version status: missing
- Tree hash: c5094cb108cda96d41403fd91ea4be03d364a73098a1afea8408904e763998c4
- Author: wheresryan22
- GitHub username: wheresryan22
- License: MIT
- Repository: https://github.com/wheresryan22/anatomy/tree/dbf697a527bbf7d358668e1557cb1e35ff725d46/
- Ref: a5d66e6915301b999741c6b4437f9eacacc9af0d
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, filesystem, scripts, env\_access
- Quality score: 50
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/wheresryan22-anatomy
- Manifest: https://skillstore.pages.dev/api/skills/wheresryan22-anatomy/manifest

## Capabilities

- Build shaded isometric solids, round parts, pipes, and cables with the included drawing kit.
- Generate standalone HTML pages, styled SVG files, and React or Next.js figure components.
- Drive pointer interactions, keyboard controls, motion, and numeric readouts from a shared model.
- Combine SVG geometry with registered WebGL effects for water, light, exhaust, and steam.
- Check geometry clearance, support, depth ordering, and line endpoints with included verification tools.
- Capture browser screenshots, close-ups, and motion contact sheets in light and dark themes.

## Use Cases

- Explain Software Mechanisms: Create interactive figures for caching, rate limiting, or connection pooling, using supplied counts and thresholds.
- Integrate Documentation Figures: Add reusable React or Next.js figures with static geometry, client-side motion, and model-driven readouts.
- Demonstrate Physical Processes: Build instrument or machine explainers with moving parts and optional WebGL water, lighting, or exhaust effects.

## Prompt Templates

### Create a Simple Figure

```
Use Anatomy to explain a token bucket with 20 tokens and a refill rate of five tokens per second. Produce light standalone HTML.
```

### Add Model-Driven Interaction

```
Build an interactive connection-pooling figure with ten connections and a waiting queue. Include keyboard controls, accurate readouts, both themes, and mobile screenshots.
```

### Integrate a React Figure

```
Create a React figure explaining cache hits, misses, and a 60-second TTL. Separate static geometry from client motion and provide an HTML preview.
```

### Build and Verify a Shader Explainer

```
Create a ripple-tank explainer with SVG apparatus and registered WebGL water effects. Verify geometry, reduced motion, shader transitions, and fallback rendering on trusted local pages.
```

## Limitations

- Node.js is required for builds; Chrome or Chromium is required for browser checks.
- Shader effects require WebGL; fallback views retain SVG geometry without those effects.
- The optional 3D mode is beta, and dense scenes can perform poorly on mobile devices.
- Verification can be slow, and executable build modules and local pages require trust.

## Best Practices

- Provide the concept, real numeric parameters, output format, and theme before requesting geometry.
- Keep motion and readouts connected to one model, then review both themes and mobile dimensions.
- Inspect build modules and pages before verification; isolate unknown content and review screenshots before sharing them.

## Anti Patterns

- Do not replace the mechanism with decorative boxes or unrelated animation.
- Do not hide geometry failures with depth biases or inaccurate recorded shapes.
- Do not run unknown build modules or local pages with unrestricted verification privileges.

## Security Audit

- Audited at: 2026-10-11T14:34:18.078\+00:00
- Summary: Most presented matches are benign geometry, documentation, local screenshots, and loopback browser control; no evidence found of prompt injection or intentional exfiltration. CLI-selected imports execute host code, and browser checks relax local-file isolation. Three oversized files and 2,518 omitted matches remain review gaps; this audit does not establish complete repository safety. Static review was capped at 400/2918 representative findings; omitted static matches are unconfirmed, so automatic publishing stays disabled until manual review.

## Stats

- Views: 0
- Downloads: 1
- Favorites: 0
- Popularity score: 0