Anatomy: 기술 개념을 아이소메트릭 그림으로 설명하는 스킬
기술적 개념을 작동하는 기계·도구 형태의 아이소메트릭 그림으로 설명하는 에이전트 스킬이에요. SVG 중심에 WebGL 효과·베타 3D 동작을 결합하고 HTML·SVG·React 출력을 지원해요.
주요 기능
- 카메라·입체 부품·4단계 음영·파이프·케이블을 갖춘 도면 키트로 작은 부품이 많은 설명 그림을 구성해요.
- 포인터·키보드 상호작용과 동일 모델에서 계산되는 실시간 표시값을 연결해요.
- Chrome 캡처·접합부 검사·기하 감사 도구와 예제들을 제공하며, A4·Letter 인쇄용 PDF 제작 흐름도 문서화되어 있어요.
구조
SKILL.md, kit의 Node ESM·TypeScript 도형 라이브러리, React 컴포넌트, references 문서, headless Chrome 검사 scripts와 예제로 구성돼요. capture.mjs 일부에서 Node 내장 모듈 및 WebSocket 기반 동작을 확인했어요.
누구에게 쓸모 있나요
개발 문서·블로그·교육 자료·제품 페이지에서 기술적 원리를 인터랙티브 그림으로 설명하려는 개발자와 기술 콘텐츠 제작자.
설치 전 준비
- 키트·빌드·검사는 Node.js 20.10 이상을 요구해요. README는 skills CLI 1.7.1이 별도로 Node 22.20 이상을 요구한다고 명시해요.
- 화면 검사에는 Chrome/Chromium이 필요하며 React 출력에는 React 18 이상이 필요해요.
- 키트는 React 출력 외에 Node 내장 모듈을 사용하며 자체 API 키는 필요하지 않습니다.
- Claude Code, Antigravity, OpenCode, Codex, MiniMax Code용 Agent Skill
- 일반 HTML·SVG 또는 React/Next.js 프로젝트, WebGL 지원 브라우저
설치 방법
Codex 사용자 스킬
공식 README 명령 예시예요. 설치·실행하지 않았어요.
npx skills add wheresryan22/anatomy -g -a codex사용 방법
- Codex는 $anatomy, Claude Code는 /anatomy 뒤에 설명할 개념·실제 수치·출력 형식을 지정해요.
- 공식 예제 빌드 명령은 node examples/dial-indicator/build.mjs예요. 현재 조사에서는 빌드하지 않았어요.
비용과 API 키
MIT 소스 이용료는 없지만 사용 중인 코딩 에이전트·모델 요금은 별도예요.
라이선스
MIT, Copyright 2026 Ryan. 저작권·허가 고지를 보존해야 해요.
주의사항과 알려진 이슈
- 차트·지도·인체 전문 도구가 아니에요. 기계적 비유가 실제 개념이나 물리 검증을 대신하지 않습니다.
- 3D 모드는 베타이며 공식 문서도 제한된 예제 검증만 명시해요. 복잡한 3D 감사와 제작에는 긴 시간이 걸릴 수 있어요.
- Chrome 검사에는 임시 프로필·로컬 포트가 필요해요. 문서의 샌드박스 완화 제안은 실행하지 않았으며 보안 설정을 임의로 변경하면 안 돼요.
- 커뮤니티 갤러리 제출 기능은 외부 공개예요. 자료 열람·등록이 공개 게시를 승인하는 것은 아니에요.
확인 범위
확인 날짜: 2026-11-08
확인 커밋: 1482e8469b0a9e0d8cc18ea2740a01423d29ae80
확인한 범위: 공식 GitHub 기본 브랜치의 관측 커밋과 고정 커밋 README·LICENSE 및 매니페스트/도구 일부를 읽은 정적 검토예요. 공식 문서의 기능 설명과 작성자 검증 주장은 독립 실행 검증과 구분했어요.
확인 한계: 저장소 설치·코드 실행·스킬 활성화·모델 호출·출력 생성·브라우저 시각 검수·전체 보안 감사를 하지 않았어요. 이슈 목록·현재 외부 요금은 별도 조사하지 않았으며 issues 빈 배열은 문제가 없다는 뜻이 아니에요.