Repolode
Предложить
wheresryan22

wheresryan22/anatomy

Навык Claude Agent для создания интерактивных изометрических SVG-, WebGL- и 3D-иллюстраций машин, объясняющих технические идеи.

Открыть на GitHubСайт
Звёзды
14,993
Форки
1,145
Открытые issues
46
Последний коммит
3 дня назад

Что это?

Anatomy — это навык для агента, который предлагает Claude объяснить техническую идею, придумав физический объект, принцип работы которого отражает эту идею, а затем изобразить его в виде изометрической фигуры. Например, ключ кэша, позволяющий пропускать работу, если ничего не изменилось, может превратиться в штифтовый замок, который поворачивается, только когда совпадают все штифты. Иллюстрация состоит из множества небольших затенённых деталей, размещённых в карточке с рамкой, заголовком, подсказкой и текущими показателями; она реагирует на действия мышью и с клавиатуры.

Фигуры бывают трёх видов: на чистом SVG, на SVG со слоем WebGL-шейдера для огня, воды, света и пара, а также в бета-режиме 3D, где движущиеся детали пересчитываются в проекции на каждом кадре. Результат можно сохранить как отдельную HTML-страницу, один SVG-файл или компоненты React и Next.js. В наборе используются только встроенные модули Node.js, а в репозитории есть восемь примеров фигур со скриптами сборки.

В навык также входят проверки в headless Chrome: они делают скриншоты и проводят аудит геометрии, чтобы обнаруживать детали, проходящие сквозь друг друга. Он работает с Claude Code, а тот же формат загружают OpenCode, Codex и Antigravity.

Ключевые возможности

  • 01Превращает техническую концепцию в физическую машину, изображённую в виде изометрической фигуры.
  • 02Создаёт SVG-фигуры с четырёхтональной светотенью и текущими показателями.
  • 03Добавляет слои WebGL-шейдеров для огня, воды, света и пара.
  • 04Предлагает бета-режим 3D, в котором движущиеся детали заново затеняются на каждом кадре.
  • 05Экспортирует отдельную HTML-страницу, SVG-файл или компоненты React/Next.js.
  • 06Проводит аудит геометрии и делает скриншоты в headless Chrome.

Сценарии использования

  • Создание поясняющих иллюстраций для технической документации или публикации в блоге.
  • Разработка интерактивного объяснения для лендинга или учебного курса.
  • Иллюстрация принципа работы системы, например ограничителя частоты запросов или пула соединений.
  • Встраивание компонента React, визуализирующего процесс, в сайт на Next.js.

Темы

#agent-skill#svg#isometric#webgl#claude#visualization#documentation#react#open-source#vizualization

Частые вопросы

Что такое anatomy?
Навык Claude Agent для создания интерактивных изометрических SVG-, WebGL- и 3D-иллюстраций машин, объясняющих технические идеи. Anatomy — это навык для агента, который предлагает Claude объяснить техническую идею, придумав физический объект, принцип работы которого отражает эту идею, а затем изобразить его в виде изометрической фигуры. Например, ключ кэша, позволяющий пропускать работу, если ничего не изменилось, может превратиться в штифтовый замок, который поворачивается, только когда совпадают все штифты. Иллюстрация состоит из множества небольших затенённых деталей, размещённых в карточке с рамкой, заголовком, подсказкой и текущими показателями; она реагирует на действия мышью и с клавиатуры.
anatomy можно использовать бесплатно? Какая у него лицензия?
anatomy распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
anatomy всё ещё поддерживается?
Активно поддерживается. Последний коммит в anatomy — 15 окт. 2026 г..
Для чего можно использовать anatomy?
Создание поясняющих иллюстраций для технической документации или публикации в блоге. Разработка интерактивного объяснения для лендинга или учебного курса. Иллюстрация принципа работы системы, например ограничителя частоты запросов или пула соединений. Встраивание компонента React, визуализирующего процесс, в сайт на Next.js.
Где скачать anatomy?
Исходный код и инструкции по установке — на GitHub: https://github.com/wheresryan22/anatomy

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

caamer20 / Telegram-Drive

Приложение для компьютеров и Android, которое превращает ваш аккаунт Telegram в файловое хранилище с папками, передачей файлов, предпросмотром и шифрованием на стороне клиента по желанию.

Продуктивность и приложения#telegram#cloud-storage#tauri
5,5 тыс.822RustOtherОбновлён 3 дня назад