Available1One-Page Site Builder
Turn your product brief into a responsive one-page website and a portable content document. An original, free Skillrove workflow with an editable fictional example.
Codex +2Anatomyv1.0.0
Build detailed, interactive isometric machine illustrations for technical ideas, documentation and product pages. Free open-source Anatomy skill by Ryan, with SVG, optional WebGL and React examples.
Interact with the sample. Scroll inside to explore.
Made with this SkillInteractive isometric machine illustrations
Open full exampleActual upstream example · keyboard interaction · MIT / Ryan
What you get
Interactive isometric machine illustrationsWhat you can make
- Explain a technical idea with a detailed, interactive physical mechanism.
- Create standalone SVG/HTML or integrate the supplied React drawing kit.
- Explore all eight upstream examples, light/dark themes and optional WebGL effects.
Explore delivered files6 groups
SKILL.md + original READMEDrawing kit + React componentsAll eight upstream source examplesSix standalone light/dark preview pagesMIT license + pinned source recorddelivery-manifest.json
Good fit
Developers, educators and designers illustrating how a system works.
Know the limits
Anatomy by Ryan, MIT licensed. WebGL depends on browser support; 3D is beta. Illustrations are not engineering certification.
About this skill
Anatomy by Ryan / wheresryan22, distributed free under MIT. Original SKILL.md, drawing kit, references, browser-check tools and all eight source examples are preserved. Skillrove adds a fresh-folder preview helper and six actually built public examples.
Explain technical ideas as working physical objects, with isometric geometry, four-tone shading, live readouts, keyboard and pointer interaction. Outputs include standalone HTML/SVG and React/Next.js source. Optional WebGL adds fire, water and lighting; true 3D is beta.
Read the full workflow
Requirements: Node.js 20.10+ for builds, Chrome/Chromium for upstream browser checks and React 18+ for React examples only. Agent/model access is separate. Included sample builders need no API key.
Source: https://github.com/wheresryan22/anatomy at 689dcf966e63d92be10a5d593c6e19e10acd4422. Ryan copyright and MIT license are included. Platform version 1.0.0 is a pinned distribution snapshot, not an upstream semantic release.
Limits: illustrative mechanisms, not CAD or an engineering certification. Complex figures and geometry audits take time. WebGL depends on browser support and 3D remains beta. Existing examples demonstrate capability; custom figures require agent work and review.
FROM PACKAGE TO FIRST RESULT
Your first interactive machine.
Try the actual Anatomy examples, then ask your agent to explain your own technical idea as a working physical object.
Open-source skill by Ryan / wheresryan22 · MIT · Original repository · Pinned source snapshot
Free · MIT licenseNode.js 20.10+ · optional Chromium / ReactNo API key or paid provider
- 01
Choose your agent
These steps use a project folder. Open the project in your agent and run terminal commands from its root.
Package folder
.agents/skills/anatomy - 02
Add the package
Download and unzip the package into the folder above. Keep all its files together, with SKILL.md directly inside that folder.
Downloads require a verified account. Choose a new folder if this Skill is already installed.
- 03
Run the included sample
Manual sample commands and technical details
Read SKILL.md, review the generator and check its runtime requirements before running:
cd .agents/skills/anatomy node scripts/skillrove-preview.mjs --output ./sample-anatomy python3 -m http.server 8080 --bind 127.0.0.1 --directory sample-anatomyYour first resultOpen http://127.0.0.1:8080/. Type in the desk computer and use Escape to switch power. Press C to insert a coin in the arcade. Use arrow keys on the dial indicator. Compare both themes and the output hashes.
Original Anatomy examples by Ryan / wheresryan22, MIT licensed. Node.js 20.10+; Python 3 only serves the preview. Chrome/Chromium is needed for upstream browser checks; React 18+ for React examples. Agent/model access is separate. WebGL needs browser support; 3D is beta. Platform 1.0.0 identifies the pinned source snapshot.
If sample-anatomy already exists, change the output to ./sample-anatomy-2. Existing files are never overwritten.
Prefer to ask your agent?
Use Anatomy at .agents/skills/anatomy. Read SKILL.md. Explain a token-bucket rate limiter with 10 tokens and a refill of 2 tokens per second as an interactive physical object. Deliver light-theme standalone HTML. Agree on the build size first, review the mechanism and preserve the original license.
Reviews0
Share your first result
Tried this workflow? Help others decide with an honest review.
Before you choose this Skill
How do I get Anatomy?
The package is free to download with a verified Skillrove account. Your agent subscription, model access and external provider credits are separate.
Which agents can use this skill?
This release lists Codex, Claude Code as intended installation hosts. Check the package’s dependencies and permissions before running it. These labels do not certify that every workflow has been tested in every agent.
What files can this workflow generate?
The documented 1.0.0 workflow lists: SKILL.md + original README; Drawing kit + React components; All eight upstream source examples; Six standalone light/dark preview pages; MIT license + pinned source record; delivery-manifest.json. Some files or exports are optional; follow the package’s setup and inspect the delivered result.
What should I check before using the result?
Original Anatomy examples by Ryan / wheresryan22, MIT licensed. Node.js 20.10+; Python 3 only serves the preview. Chrome/Chromium is needed for upstream browser checks; React 18+ for React examples. Agent/model access is separate. WebGL needs browser support; 3D is beta. Platform 1.0.0 identifies the pinned source snapshot.
More skills to explore
View all skillsAvailable1Codex +2
FreeFree package