An agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional WebGL shaders and 3D effects.
이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.
아이디어를 실제로 작동하는 물체로 만들어 설명하는 Claude 스킬입니다. Antigravity, OpenCode, Codex, MiniMax Code에서도 실행됩니다. SVG, WebGL, 3D로 정교하고 인터랙티브한 아이소메트릭 도해를 제작합니다.
Claude에게 기술적 아이디어를 설명하는 도해를 요청하면, Anatomy는 그 개념의 작동 방식 자체가 되는 물리적 사물을 고안합니다. 변경이 없을 때 작업을 건너뛰는 캐시 키는 모든 핀이 맞아야만 돌아가는 핀 텀블러 자물쇠가 됩니다. 여러 캔버스를 서비스하는 하나의 GPU 컨텍스트는 단일 프린트 헤드가 16개의 웰을 방문하는 갠트리 플로터가 됩니다.
그런 다음 Claude는 수십 개의 작고 단단한 음영 처리된 부품으로 그 물체를 만들고, 제목, 힌트, 실시간 판독값이 있는 프레임 카드에 넣고, 포인터와 키보드에 따라 차분하게 움직이게 하며, 모든 조인트를 확대하여 자체 작업을 검증합니다. 도해가 보여주는 모든 숫자는 부품을 움직이는 동일한 작은 모델에서 나옵니다.
npx skills add wheresryan22/anatomy -gCLI가 어떤 에이전트를 설정할지 묻습니다(Claude Code, Antigravity, OpenCode, Codex, MiniMax Code). 질문을 건너뛰려면 -a claude-code, -a antigravity, -a opencode, -a codex, -a minimax-code 중 하나를 추가하세요.
그런 다음 Claude Code에서:
/anatomy explain how a token bucket rate limiter works, interactiveAntigravity, OpenCode, Codex, MiniMax Code의 경우 해당 에이전트를 지정하세요: -a antigravity, -a opencode, -a codex, -a minimax-code. Antigravity, OpenCode, MiniMax Code는 동일한 /anatomy 명령을 사용하고, Codex에서는 $anatomy를 입력합니다.
이게 전부입니다. API 키도 필요 없고 npm install 할 것도 없습니다. 이 키트는 Node의 내장 모듈만 사용합니다.
raptor-engine: 호버하면 11개의 어셈블리로 분해됩니다. 감사(audit)는 정지 상태, 분해 상태, 그리고 그 사이 모든 프레임에서 어떤 파이프도 다른 물체를 관통하지 않음을 증명합니다. ripple-tank: 두 개의 WebGL 레이어(종이 위의 램프 빛과 코스틱스, 물속의 반사) 위에 SVG 장치가 있으며, 분산 및 광학 모델로 구동됩니다.
turning-dial: 3D 모드(베타). 다이얼을 드래그하면 약 90개의 부품이 매 프레임 재투영되고 재음영 처리됩니다. dial-indicator: 가장 작은 예제로 약 300줄입니다. 호버하면 캐리지가 미끄러지고, 바늘이 각 블록을 읽습니다.
모든 스크린샷은 examples/에 있는 페이지의 라이트 테마이며, 스킬 자체의 scripts/capture.mjs와 scripts/drive.mjs로 캡처했습니다. 빌드된 페이지는 커밋되어 있습니다. examples/의 아무 .html이나 열어서 사용해 보세요.
세 가지 종류의 도해가 있습니다. 세 가지 모두 하나의 키트, 하나의 카메라, 하나의 제작 규칙 세트를 공유합니다.
| 종류 | 설명 | 예시 | ||
|---|---|---|---|---|
| SVG | 핵심. 4톤 음영 처리된 단단한 아이소메트릭 부품을 뒤에서 앞으로 칠하고, 실시간 판독값과 이징 모션이 있는 카드에 담습니다. 독립형 HTML 페이지, 스타일이 내장된 단일 .svg 파일, 또는 React/Next.js 컴포넌트로 제공됩니다. |
dial-indicator, desk-computer, arcade-cabinet, test-rig |
||
| SVG + WebGL | 선으로 그릴 수 없는 것(불, 배기, 물, 코스틱스, 램프 빛, 글로우, 증기)을 위해. 셰이더는 뒤쪽 SVG와 앞쪽 SVG 사이의 캔버스에서 도해 자체의 아이소메트릭 카메라로 실행되므로 그림 안에 자리합니다. SVG는 WebGL 없이도 읽힙니다. | raptor-engine, ripple-tank |
||
| 3D 베타 | 진정한 3D로 회전하는 부품: 회전하는 다이얼이나 턴테이블, 구부러지는 손가락, 떨어져 나와 떨어지는 조각. 움직이는 부품은 키트 자체 규칙에 따라 매 프레임 재투영 및 재음영 처리되고, 나머지 도해는 정적 아트로 유지됩니다. | turning-dial |
각 도해는 라이트 또는 다크입니다. 라이트는 셰이더를 포함하여 스킬이 먼저 디자인하는 테마입니다.
Anatomy는 표준 Agent Skill입니다. 루트에 SKILL.md가 있는 폴더입니다. 이 저장소가 바로 그 폴더입니다. 다음 중 하나를 선택하세요:
| 명령 | 설치 위치 | |||
|---|---|---|---|---|
| skills CLI, 사용자용 (Claude Code) | npx skills add wheresryan22/anatomy -g -a claude-code |
~/.claude/skills/anatomy |
||
| skills CLI, 사용자용 (Antigravity) | npx skills add wheresryan22/anatomy -g -a antigravity |
~/.gemini/antigravity/skills/anatomy |
||
| skills CLI, 사용자용 (OpenCode) | npx skills add wheresryan22/anatomy -g -a opencode |
~/.config/opencode/skills/anatomy |
||
| skills CLI, 사용자용 (Codex) | npx skills add wheresryan22/anatomy -g -a codex |
~/.agents/skills/anatomy |
||
| skills CLI, 사용자용 (MiniMax Code) | npx skills add wheresryan22/anatomy -g -a minimax-code |
~/.minimax/skills/anatomy |
||
| skills CLI, 프로젝트용 | npx skills add wheresryan22/anatomy |
Claude Code는 .claude/skills/anatomy, Antigravity, OpenCode, Codex는 .agents/skills/anatomy, MiniMax Code는 .minimax/skills/anatomy |
||
| git, 사용자용 (Claude Code) | git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy |
~/.claude/skills/anatomy |
||
| git, 사용자용 (Antigravity) | git clone https://github.com/wheresryan22/anatomy.git ~/.gemini/antigravity/skills/anatomy |
~/.gemini/antigravity/skills/anatomy |
||
| git, 사용자용 (OpenCode) | git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy |
~/.config/opencode/skills/anatomy |
||
| git, 사용자용 (Codex) | git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy |
~/.agents/skills/anatomy |
||
| git, 사용자용 (MiniMax Code) | git clone https://github.com/wheresryan22/anatomy.git ~/.minimax/skills/anatomy |
~/.minimax/skills/anatomy |
||
| git, 프로젝트용 | git clone https://github.com/wheresryan22/anatomy.git.claude/skills/anatomy |
.claude/skills/anatomy (Claude Code 및 OpenCode) 또는 .agents/skills/anatomy (Antigravity, OpenCode, Codex 및 MiniMax Code) |
||
| 다운로드, git 없이 | 아래 참조 | 위 폴더 중 하나 |
skills CLI는 이 저장소 루트의 SKILL.md를 찾아 anatomy로 설치합니다. 기본적으로 현재 프로젝트에 설치하고 어떤 에이전트를 설정할지 묻습니다. -g는 사용자용으로 설치하고, -a claude-code는 Claude Code만 설정합니다. Antigravity, OpenCode, Codex, MiniMax Code만 설정하려면 -a antigravity, -a opencode, -a codex, -a minimax-code를 사용하세요.
CLI는 예제를 포함한 전체 저장소(약 10MB)를 복사합니다. 최신 Node.js가 필요합니다. CLI 버전 1.7.1은 22.20 이상을 요구합니다.
저장소를 스킬 폴더 중 하나에 클론하여 SKILL.md가 /anatomy/SKILL.md에 위치하도록 하세요. Claude Code는 ~/.claude/skills/anatomy 또는 .claude/skills/anatomy를 사용합니다. Antigravity는 ~/.gemini/antigravity/skills/anatomy 또는 .agents/skills/anatomy를 사용합니다. OpenCode는 ~/.config/opencode/skills/anatomy 또는 .opencode/skills/anatomy를 사용하며, OpenCode는 Claude Code 및 .agents 폴더도 읽습니다. Codex는 ~/.agents/skills/anatomy 또는 .agents/skills/anatomy를 사용합니다. MiniMax Code는 ~/.minimax/skills/anatomy(데이터 폴더를 옮겼다면 $MINIMAXDATADIR/skills/anatomy) 또는 .minimax/skills/anatomy를 사용하며, MiniMax Code는 Claude Code, Codex 및 .agents 폴더도 읽습니다. 프로젝트 설치의 경우 팀원도 받을 수 있도록 폴더를 커밋하세요. 나중에 업데이트하려면 해당 폴더에서 git pull을 실행하세요.
ZIP을 다운로드하여 압축을 풀고, 폴더 이름을 anatomy-main에서 anatomy로 바꾼 뒤 ~/.claude/skills/(Claude Code), ~/.gemini/antigravity/skills/(Antigravity), ~/.config/opencode/skills/(OpenCode), ~/.agents/skills/(Codex) 또는 ~/.minimax/skills/(MiniMax Code)로 이동하세요.
또는 macOS나 Linux에서 한 줄로:
mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomyAntigravity, OpenCode, Codex, MiniMax Code의 경우 동일한 파일을 ~/.gemini/antigravity/skills/anatomy, ~/.config/opencode/skills/anatomy, ~/.agents/skills/anatomy 또는 ~/.minimax/skills/anatomy에 넣으세요:
mkdir -p ~/.gemini/antigravity/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.gemini/antigravity/skills/anatomymkdir -p ~/.config/opencode/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.config/opencode/skills/anatomyClaude Code는 실행 중인 세션에서 새 스킬을 인식합니다. 세션 시작 시 skills 폴더 자체가 없었다면 /reload-skills를 실행하세요. Antigravity와 OpenCode는 채팅에서 /anatomy로 표시됩니다. 표시되지 않으면 재시작하세요. Codex는 /skills 아래에 표시되고 $anatomy로 실행합니다. 표시되지 않으면 Codex를 재시작하세요. MiniMax Code는 /anatomy로 표시됩니다. 표시되지 않으면 mcode를 재시작하세요.
스킬은 헤드리스 Chrome을 시작하여 자체 도해를 검사합니다. Chrome은 임시 프로필을 작성하고 로컬 포트를 통해 통신합니다. Codex는 샌드박스에서 명령을 실행하며, 이 샌드박스가 Chrome을 막을 수 있습니다. 도해는 여전히 빌드되지만 검사만 실패합니다. 선호 순서대로:
approval_policy = "on-request"가 필요합니다.~/.codex/config.toml에서 한 번 허용하세요: approval_policy = "on-request"
sandbox_mode = "workspace-write"
[sandbox_workspace_write]
network_access = true
writable_roots = ["/tmp"]node scripts/capture.mjs page.html --out shots/page.png최신 Codex 릴리스는 이 설정 이름이 다를 수 있으니 해당 버전의 구성 참조를 확인하세요.
Codex를 --sandbox danger-full-access로 시작해도 작동하지만, 해당 세션의 모든 제한이 해제되므로 신뢰하는 프로젝트에만 사용하세요.
/anatomy(Codex에서는 $anatomy)를 입력하고 도해가 무엇을 설명해야 하는지 말하세요:
/anatomy explain how a token bucket rate limiter works, interactive스킬 이름을 반드시 지정할 필요는 없습니다. Claude는 아이소메트릭 일러스트, 문서·블로그 글·랜딩 페이지용 설명 도해, 또는 인터랙티브 설명을 요청할 때도 이 스킬을 로드합니다. Antigravity, OpenCode, Codex, MiniMax Code도 마찬가지입니다.
스킬의 평가(eval)에서 가져온 추가 프롬프트
/anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme./anatomy an isometric SVG explaining how a CDN edge cache works, cache hit vs miss, TTL of 60 s, for a dark landing page. Just the SVG file and a PNG preview./anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme./anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.최고의 도해를 얻는 세 가지 습관:
도해는 소유한 소스로 제공됩니다. Node 빌드 스크립트와 그것이 작성하는 페이지, 또는 React의 경우 지오메트리 모듈,
[...잘림...]