Anatomy - 기술 개념을 움직이는 입체 도해로 만드는 AI 에이전트 스킬

GitHub README 앞부분을 기준으로 옮겼어요. 동작 원리와 한계 절은 다 읽지 않았어요.

무엇인가

아이디어를 실제로 작동하는 물건으로 지어 설명하는 Claude 스킬이에요. Antigravity, OpenCode, Codex, MiniMax Code에서도 돌아가요. 작고 정밀한 부품이 많은 대화형 아이소메트릭 도해를 SVG, WebGL, 3D로 만들어요.

어떻게 설명하나

기술 개념을 설명하는 그림을 요청하면, Anatomy는 그 작동 방식이 곧 개념인 물건을 지어내요.

• 바뀐 게 없으면 작업을 건너뛰는 캐시 키는 모든 핀이 맞을 때만 돌아가는 핀 텀블러 자물쇠가 돼요.
• 여러 캔버스를 하나의 GPU 컨텍스트로 처리하는 구조는 인쇄 헤드 하나가 웰 16개를 도는 갠트리 플로터가 돼요.

그다음 Claude가 그 물건을 음영 있는 작은 부품 수십 개로 만들고, 제목·힌트·실시간 수치가 있는 카드에 넣어요. 포인터와 키보드에 차분하게 반응하게 하고, 모든 이음매를 확대해 스스로 검사해요. 도해에 나오는 숫자는 모두 부품을 움직이는 같은 작은 모델에서 나와요.

시작하기

npx skills add wheresryan22/anatomy -g로 설치하고, 설치 도구가 어떤 에이전트에 설정할지 물어요. Claude Code에서는 /anatomy explain how a token bucket rate limiter works, interactive처럼 쓰고, Codex에서는 $anatomy로 불러요. API 키도, 따로 npm install할 것도 없고 Node 내장 모듈만 써요.

갤러리 예시

• raptor-engine: 마우스를 올리면 11개 조립체로 분해되고, 어떤 배관도 다른 부품을 관통하지 않는다는 검사를 모든 프레임에서 통과해요.
• ripple-tank: SVG 장치 위에 WebGL 두 층(종이 위 빛과 굴절 무늬, 물 반사)을 얹고 분산·광학 모델로 움직여요.
• turning-dial: 베타인 3D 모드 예시로 부품이 약 90개예요.