Anatomy — навык, который объясняет идею через работающую механическую модель

Навык Anatomy отвечает на запрос «объясни мне, как работает X» не схемой из квадратиков со стрелками, а настоящей движущейся моделью. Вы спрашиваете у ассистента про устройство rate limiter, cache key или пул соединений — он придумывает физический предмет, который работает ровно так же, и собирает его из десятков мелких деталей в изометрии.

Обычная блок-схема говорит только «эти блоки связаны». Работающая модель показывает, что происходит: ключ кеша превращается в штифтовый замок, который поворачивается только когда совпали все штифты. Один GPU-контекст на много холстов — это мостовой плоттер с одной печатной головой, которая обходит 16 лунок.

Как это выглядит

Каждая фигура живёт в карточке: заголовок, подсказка и живая цифровая панель. Под курсором и с клавиатуры детали двигаются плавно, без рывков. Ассистент после сборки сам себя проверяет: приближает каждое соединение и смотрит, что нигде нет наложения и невидимой ошибки.

Важное свойство: любое число на рисунке берётся из той же маленькой модели, которая двигает детали. Цифры на панели — не текст, приклеенный для красоты.

Три вида фигур

Светлая и тёмная темы есть у каждой фигуры. Сначала набор проектирует светлую тему — вместе с шейдерами.

Установка

Это обычный Agent Skill: папка с файлом SKILL.md в корне. Сам репозиторий и есть эта папка.

npx skills add wheresryan22/anatomy -g

CLI спросит, для каких ассистентов поставить навык. Чтобы не спрашивал, добавьте флаг: -a claude-code, -a antigravity, -a opencode, -a codex или -a minimax-code.

Куда ставится:

Без ключей API и без npm install — набор использует только встроенные модули Node. CLI копирует репозиторий целиком, вместе с примерами: около 10 МБ.

Если не хочется использовать CLI, есть клон через git и распаковка архива вручную. Важно, чтобы файл SKILL.md оказался по пути <папка навыков>/anatomy/SKILL.md. Внутри папки навык обновляется обычным git pull.

Использование

В Claude Code, Antigravity, OpenCode и MiniMax Code команда называется /anatomy, в Codex — $anatomy.

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

Имя навыка можно и не называть: ассистент сам загрузит его, если попросить изометрическую иллюстрацию, поясняющий рисунок для документации, статьи или страницы сайта.

Три привычки дают лучший результат:

1. Называйте идею, а не рисунок. Опишите, что нужно объяснить, и дайте настоящие числа: размеры, количество, скорости, пороги. Предмет ассистент придумает сам — это и есть основная работа.
2. Или называйте предмет. Если вы точно знаете, какая машина нужна (кофемашина, горелка, замок), скажите это и добавьте, что должно двигаться.
3. Скажите, где будет жить фигура. Отдельная HTML-страница, один SVG-файл или компонент для React и Next.js; светлая или тёмная тема. Сборка под каждый случай своя.

Пример запроса из документации:

/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.

На выходе — исходники, которые вам принадлежат: скрипт сборки на Node и страница, которую он пишет, либо для React — модули геометрии, серверный компонент для статичной картинки и один клиентский компонент на движение. Набор инструментов идёт в комплекте.

Примеры из репозитория

Готовые страницы лежат в репозитории: откройте любой .html в папке examples и посмотрите, что получилось. Скриншоты сняты собственным набором — scripts/capture.mjs и scripts/drive.mjs.

Что внутри репозитория

• SKILL.md — то, что читает ассистент. Задаёт порядок работы: сначала собрать настоящие числа, потом придумать предмет, написать список деталей, спланировать сцену, собрать геометрию набором, покрасить сзади наперёд, оформить карточку, оживить и проверить как критик. Здесь же правила работы коротким списком.
• kit/ — библиотека рисования: изометрическая камера, сплошные детали, тела вращения на любой оси, трубы и кабели, WebGL-слой, среда выполнения 3D и компоненты для React.
• references/ — длинные руководства, которые ассистент открывает по мере надобности: работа с набором, движение, React, проверка, WebGL, разбор проектирования и режим 3D.
• evals/evals.json — тестовые запросы и признаки хорошего ответа.

Проверка качества

Отдельная часть набора — самопроверка. kit/audit.mjs доказывает геометрию: ничто не проходит сквозь другое, каждый конец трубы стоит на креплении, каждое перекрытие нарисовано в правильном порядке глубины. Запуск — node build.mjs --audit.

Дальше включается headless Chrome. scripts/capture.mjs снимает скриншоты и приближения, scripts/drive.mjs прогоняет сценарии и собирает раскадровки, scripts/lines.mjs отклоняет любую линию, оборвавшуюся в воздухе, а scripts/turn-check.mjs проверяет 3D-фигуры. Навык велит ассистенту открыть и посмотреть каждый снимок, который тот сделал.

Требования

Примеры пересобирались байт в байт на Node 20.19 и 22.11.

Ограничения

• Это не библиотека графиков. Осей, серий и диаграмм нет. Числа появляются как живая панель, посчитанная моделью, и как настоящие размеры деталей.
• Набор рисует машины, приборы, инструменты и мебель — не людей и не точные карты. Идея без механизма получится слабее.
• Это медленно и сделано так намеренно. Фигура собирается долго: список деталей, геометрия, проверка и приближение каждого стыка в обеих темах. Полный обзор 3D на 30 деталях занимает 15–20 минут.
• Режим 3D — бета. Он проверен на своём примере и одной тестовой фигуре, но не на рабочей. Маленькая 3D-фигура идёт на 60 fps; тестовая рука из 380 деталей показала около 20 fps на ширине 1440 px и 13–15 fps на замедленном профиле телефона, на сильно нагруженной машине.
• Шейдерам нужен WebGL. Без него SVG всё равно читается, а при включённом prefers-reduced-motion любая фигура замирает.

Участие и лицензия

Сделали что-то хорошее? Попросите ассистента опубликовать фигуру в общую галерею — он спросит название и ваш GitHub-ник, покажет, что именно отправит, и после вашего «да» сам откроет pull request. Без терминала есть форма отправки на GitHub Gist.

Задачи и pull request приветствуются. Перед правкой прочитайте CONTRIBUTING.md: там описаны сборка примеров, проверки и правила, которые обязаны выдержать изменения, — в том числе запрет комментариев в коде и требование, чтобы правки набора оставляли каждый существующий пример байт в байт прежним. Изменения перечислены в CHANGELOG.md.

Лицензия — MIT, © 2026 Ryan.