Anatomy: интерактивные изометрические объяснения

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:

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.

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

/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 для проверки React-реализации и Emil Kowalski Skills для оценки движения, но подменять ими геометрический аудит нельзя.