---
title: "Anatomy: интерактивные изометрические объяснения"
description: Навык Anatomy превращает техническую идею в работающий механизм и создаёт детальные SVG, WebGL и 3D-иллюстрации с моделью, анимацией и геометрической проверкой.
---

[Anatomy](https://github.com/wheresryan22/anatomy) — MIT-навык для объяснения технических идей через работающие физические объекты. Вместо обычной схемы со стрелками он строит изометрический механизм: множество точных деталей, освещение, движение, управление указателем и клавиатурой, живой readout и проверка соединений.

Например, ограничитель запросов token bucket можно представить как устройство с ёмкостью и подачей жетонов, а пул соединений базы данных — как набор соединений, которые запросы занимают и возвращают. Ценность такого результата не в декоративности: устройство должно своей работой раскрывать исходную концепцию.

## Три формата результата

**SVG.** Основной режим. Твёрдые изометрические детали с четырьмя уровнями shading рисуются от дальних к ближним. Результат может быть самостоятельной HTML-страницей, отдельным `.svg` со встроенными стилями или React/Next.js-компонентом.

**SVG + WebGL.** Шейдер размещается между задним и передним SVG в той же изометрической камере. Так добавляют пламя, выхлоп, воду, caustics, свет, свечение и пар. Без WebGL SVG-часть остаётся читаемой.

**3D, beta.** Отдельные детали вращаются и двигаются в настоящем 3D, а их проекция и shading пересчитываются каждый кадр. Статичная часть остаётся заранее построенной графикой. Режим проверен на примерах, но не стоит считать его универсальным production-решением.

Во всех вариантах числа на readout должны происходить из той же небольшой модели, которая двигает части объекта. Это отличает объяснение от анимированной картинки с независимым текстом.

## Как устроен процесс

`SKILL.md` задаёт последовательность: собрать реальные числа, придумать объект, составить список деталей, спланировать мир, один раз построить геометрию, настроить порядок отрисовки, добавить рамку и взаимодействие, затем проверить результат как критик.

В `kit/` находятся изометрическая камера, тела и библиотека деталей, токарные формы, трубы и кабели, WebGL layer, 3D runtime и React-компоненты. Объёмные правила вынесены в `references/` и загружаются по необходимости.

Проверка включает:

- геометрический аудит пересечений, креплений и порядка глубины;
- скриншоты и крупные планы стыков в headless Chrome;
- замедленные contact sheets движения;
- проверку линий, которые заканчиваются в воздухе;
- отдельные проверки 3D-фигур.

## Установка и использование

Для глобальной установки только в Claude Code:

```bash
npx skills add wheresryan22/anatomy -g -a claude-code
```

Без `-g` навык устанавливается в проект. Также поддерживаются Antigravity, OpenCode, Codex и MiniMax Code. Для сборки и проверок требуются Node.js 20.10+ и Chrome или Chromium; React 18+ нужен только для React-результата. Навык использует встроенные модули Node и не требует API-ключей или отдельного `npm install` для базового kit.

Пример запроса:

```text
/anatomy explain how a token bucket rate limiter works, interactive
```

Лучше описывать идею и давать настоящие параметры: количество соединений, ёмкость, скорость, пороги и ожидаемые состояния. Если объект уже известен, назовите его и укажите, что должно двигаться. Отдельно задайте среду результата — standalone HTML, SVG или React/Next.js, светлую или тёмную тему.

## Где применять

Anatomy подходит для документации, технических статей, образовательных материалов и продуктовых страниц, где сложный механизм нужно буквально показать. Это может быть CDN cache hit/miss, устройство espresso-машины или поведение тестового стенда.

Навык не предназначен для обычных графиков: в нём нет осей, серий и data plots. Он также не создаёт людей и точные карты. Идея без механизма, который можно построить, обычно даёт более слабый результат.

## Ограничения

Детальная фигура требует длинной сессии: проектирование деталей, геометрия, аудит и визуальная проверка занимают заметно больше времени, чем генерация обычной иллюстрации. Сложный 3D-аудит особенно медленный.

При `prefers-reduced-motion` фигуры должны останавливаться, а при отсутствии WebGL — сохранять смысл в SVG. Интерактивность не отменяет требований доступности: пояснение нельзя оставлять только в движении, hover или цвете.

## Чем отличается от остальных коллекций

Anatomy решает задачу объясняющей графики, а не общего UI-ревью. Его можно дополнить [Vercel Agent Skills](https://wpcraft.ru/kb/design/ai/skills/vercel-agent-skills.md) для проверки React-реализации и [Emil Kowalski Skills](https://wpcraft.ru/kb/design/ai/skills/emil-kowalski-skills.md) для оценки движения, но подменять ими геометрический аудит нельзя.

## Материалы и источники

- [Anatomy на GitHub](https://github.com/wheresryan22/anatomy)
- [Официальная страница навыка](https://skills.wheresryan.sh/anatomy)
- [Примеры готовых фигур](https://github.com/wheresryan22/anatomy/tree/main/examples)
- [Тестовые запросы и критерии](https://github.com/wheresryan22/anatomy/blob/main/evals/evals.json)