VorobeoffAnatomy — скилл для Claude Code, OpenCode и Codex, который объясняет техническую идею, строя её как реальный работающий объект. Абстракция превращается в изометрическую схему из десятков мелких деталей, которая движется под курсором и показывает живые показатели. Материал для тех, кто объясняет сложные механизмы и вместо слов и стрелок хочет получить наглядную интерактивную фигуру.
Что это
Anatomy — это скилл для кодинг-агента: папка с файлом SKILL.md в корне, которую понимают Claude Code, OpenCode и Codex. Вместо объяснения словами скилл предлагает агенту придумать физическую вещь, чья работа и есть объясняемая концепция, и собрать эту вещь как изометрическую фигуру.
Например, кэш, который пропускает повторную работу, если ничего не изменилось, становится штифтовым замком: он поворачивается, только когда совпали все штифты. Один контекст GPU, обслуживающий много холстов, становится портальным плоттером, чья единственная печатающая головка обходит 16 ячеек. Концепция превращается в предмет, который можно рассмотреть и покрутить.
Готовую фигуру скилл собирает из десятков небольших закрашенных деталей, помещает в карточку с заголовком, подсказкой и живым показателем и проверяет сам себя: приближает каждый стык, чтобы ни одна деталь не проходила сквозь другую. Каждое число на фигуре берётся из той же модели, что двигает её части.
Зачем нужно
- Объяснить сложную идею через механизм — читатель видит, как вещь работает, а не читает описание её работы.
- Получить иллюстрацию для документации, блога или лендинга — фигура выходит как HTML-страница, отдельный SVG-файл или React-компонент.
- Сделать объяснение интерактивным — фигура реагирует на курсор и клавиатуру и показывает живые показатели.
- Обойтись без внешних сервисов — нет API-ключей и npm-зависимостей, только встроенные модули Node.
Как устроено
| Компонент | Что делает |
|---|---|
SKILL.md | рабочий процесс и правила, которые читает агент |
kit/ | библиотека отрисовки: изометрическая камера, детали, SVG-рендер |
lathe.mjs, tube.mjs | круглые детали на любой оси; трубы, кабели |
gl.mjs, turn*.mjs | WebGL-слой для шейдеров; 3D-рантайм |
references/ | длинные руководства, которые агент открывает по необходимости |
kit/audit.mjs и scripts/ | проверка геометрии и скриншоты в headless Chrome |
Три вида фигур построены на одном наборе правил и одной камере. SVG — ядро: сплошные изометрические детали с четырёхтоновой заливкой, раскрашенные от заднего плана к переднему. SVG + WebGL добавляет то, что линии нарисовать не могут: огонь, воду, блики, пар и свет. Режим 3D (пока beta) поворачивает отдельные части в настоящем трёхмерном пространстве.
Когда использовать
| Ситуация | Что выбрать | Почему |
|---|---|---|
Схема механизма или инструмента | SVG | ядро скилла, работает без зависимостей |
Огонь, вода, свет, пар | SVG + WebGL | одними линиями такое не нарисовать |
Вращение, сгиб или падение деталей | 3D (beta) | движущиеся части пересчитываются каждый кадр |
График или диаграмма данных | не подходит | нет осей, серий и графиков |
Люди или точные карты | не подходит | скилл рисует машины, инструменты и мебель |
Пример
npx skills add wheresryan22/anatomy -g -a claude-code
/anatomy explain how a token bucket rate limiter works, interactiveПосле установки достаточно описать, что фигура должна объяснять, и дать реальные числа: размеры, количество, пороги. В Codex команда вызывается как $anatomy. Дальше агент сам придумывает объект, пишет список деталей и собирает фигуру, а затем проверяет геометрию.
Anatomy закрывает узкую, но востребованную нишу: не графики и не данные, а механическое объяснение. Тем, кто регулярно растолковывает технические концепции, он даёт способ превратить абстракцию в движущийся предмет, который читатель сам крутит и разбирает.
Ограничения
| Пункт | Пояснение |
|---|---|
Не библиотека графиков — нет осей, серий и графиков данных. | Числа появляются как живой показатель, которым управляет модель, и как реальные размеры и количество деталей. |
Рисует только механизмы — машины, инструменты, приборы и мебель. | Людей и точные карты скилл не делает, а идея без механизма получится слабой. |
Медленно по замыслу — фигура — это долгая сессия: список деталей, геометрия, проверка и крупные планы каждого стыка. | Сборка примера с двигателем занимает несколько минут. |
Шейдеры требуют WebGL | — без WebGL SVG всё равно читается, а при отключённой анимации фигура замирает. |
Режим 3D | — beta — проверен на примере и тестовой фигуре, но пока не на производственной. |
Антипаттерны
| Пункт | Пояснение |
|---|---|
Просить график с данными | — для осей, серий и точек данных нужен инструмент визуализации, а не Anatomy. |
Описывать коробки и стрелки — скилл лучше придумывает объект сам, чем собирает его по описанию прямоугольников. | Назовите идею и числа, а не чертёж. |
Не указывать место вывода — фигура собирается по-разному для HTML-страницы, отдельного SVG или React-компонента. | Без этого результат может не подойти под задачу. |
Ждать мгновенного результата — тщательная проверка геометрии — часть процесса. | Ускорять её в ущерб проверке не стоит. |
Чеклист
| Пункт | Пояснение |
|---|---|
Названа идея или объект — в запросе указано, что объяснить, и даны реальные числа: | размеры, количество, пороги. |
Определено место вывода | — HTML-страница, отдельный SVG или React-компонент, светлая или тёмная тема. |
Окружение готово | — установлен Node 20.10+, для проверок есть Chrome или Chromium. |
Выбран вид фигуры | — понятно, нужен ли WebGL для эффектов или режим 3D для вращающихся деталей. |
Проверка запущена | — геометрия проверена командой с флагом —audit, ошибки не остались незамеченными. |
Ссылки
- Сайт: Anatomy — skills.wheresryan.sh
- Документация: Agent Skills
- Документация: Claude Code — Skills
