Anatomyавтор wheresryan22

Anatomy Skill.

Объясните техническую идею как машину, которую читатель может понять. Anatomy направляет вашего кодингового агента через изометрическую геометрию SVG, физические метафоры и показания, согласованные с движущимися частями.

Изометрический SVG
Технические объяснения
Интерактивные схемы

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · anatomySKILL.md

Задача Техническая иллюстрация Результат • Схема SVG, отдельная страница HTML или компоненты React • Физическая метафора со значениями на основе модели и необязательной интерактивностью • Свидетельства проверки геометрии и браузера, если проверки запускались Перед началом Набору нужны Node.js 20.10+ и Chrome или Chromium для проверок. У CLI навыков свои требования к Node; в README для CLI 1.7.1 указано 22.20+.

Редакционное резюме · источник проверен 2026-10-12 · не сгенерированный пример

01 Что делает навык

Объяснение системы через физический механизм

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

Процесс на основе источникаНе тест выполнения

Рабочий подход

Очередь может стать механизмом, который удерживает и выпускает объекты; порог — шкалой с отмеченным пределом. Полезно соответствие: что движется, что измеряется и чему должен научиться зритель. Навык просит агента сначала установить эту модель, а затем рисовать детали.

Входящий в набор инструментарий строит сплошные изометрические формы с затенёнными гранями и явным порядком глубины. Схему можно выпустить как SVG, отдельную страницу HTML или компоненты React. Интерактивные версии связывают элементы управления, движение и показания с одной моделью; необязательный WebGL добавляет эффекты вроде воды или света внутри сцены SVG.

Ожидаемые результаты

Редактируемая схема SVG, отдельная страница HTML или компоненты React
Подпись и, для интерактивных схем, элементы управления и показания на основе модели
Проверки геометрии и снимки браузера, если они выполнены в целевой среде

Смотреть пример задания

От задания до проверки

01
Сопоставьте идею с объектом
Опишите реальное поведение и выберите один механизм, который его объясняет. Определите, что означают каждое движение и показание, прежде чем добавлять декоративные детали.
02
Спланируйте детали и камеру
Перечислите несущую конструкцию, рабочий механизм и элементы управления. Выберите ракурс, который раскрывает связь, а не прячет её за корпусом.
03
Постройте геометрию и поведение
Используйте набор для сплошных форм и порядка глубины. Статическую геометрию вычисляйте один раз; интерактивные части и отображаемые значения связывайте с одной моделью.
04
Проверьте схему в контексте
Запустите нужные проверки геометрии и линий, затем просмотрите снимки браузера в обеих темах. Успешный аудит не доказывает, что объяснение точно или что композиция читаема.

02 Когда использовать

Когда использовать

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

Хорошо подходит

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

Ограничения для проверки

Не универсальный инструмент блок-схемДля процесса, который лучше объяснить подписанными блоками и стрелками, физический подход может добавить лишнюю сложность.
3D — необязательная бета-функцияЗафиксированный источник ограничивает свидетельства по 3D одним примером и одной тестовой схемой. Плотная движущаяся геометрия требует собственных проверок производительности; плавный результат не гарантирован.
Проверкам нужен браузерNode.js 20.10+ запускает набор; для проверок в браузере нужен Chrome или Chromium. Установка навыка не гарантирует прохождение проверок и не предоставляет все зависимости проекта.

Что подготовить

Поведение, которое нужно объяснитьУкажите реальные состояния, пороги или уравнения, а также что аудитория уже знает. Гипотетические значения помечайте как гипотетические.
Одна физическая метафораОпишите объект, что движется и что означает это движение. Визуальные референсы давайте для отделки или материалов, а не как просьбу копировать существующую схему.
Формат вывода и объём интерактивностиВыберите SVG, отдельную страницу HTML или компоненты React; укажите размер, тему и действительно ли нужны интерактивность, WebGL или экспериментальное 3D.

03 Важные решения

Важные решения

Показания используют ту же модель движения
Число полезно, только если отражает то же состояние, что и механизм. Навык требует общую модель для движения, подписи и отображаемых значений.
Порядок глубины — часть рисунка
Перекрывающиеся тела, трубы и движущиеся части требуют единого порядка спереди назад. Входящий в набор аудит проверяет геометрию; окончания линий требуют отдельной проверки.
У интерактивности есть статичная версия
Документированный процесс включает управление с клавиатуры, паузу вне экрана и уменьшенное движение. Если используется WebGL, SVG должна оставаться понятной и без него.

04 Попробуйте точное задание

Попробуйте точное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Проверьте настройку

Команда ниже устанавливает навык в проект и позволяет выбрать агента. Перед запуском сверьтесь с README исходного репозитория.

Документированная команда установки

npx skills add wheresryan22/anatomy

Набору нужен Node.js 20.10+; в README для CLI навыков 1.7.1 указан Node.js 22.20+. Для проверок в браузере нужен Chrome или Chromium. В Claude Code или OpenCode вызывайте /anatomy; в Codex используйте $anatomy.

Начните с одного механизма

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

Пример задания

Используйте Anatomy, чтобы объяснить ограниченную очередь как небольшой физический механизм в отдельной схеме HTML. Очередь вмещает не более 5 элементов: enqueue добавляет один, когда есть место, dequeue удаляет один, когда очередь не пуста, а отклонённые операции не меняют счётчик. Сначала предложите объект и объясните, что означает его движение. Используйте эти гипотетические правила, а не выдуманные данные тестов. Сделайте элементы управления доступными с клавиатуры и управляйте счётчиком и движением из одной модели. Поддержите светлую и тёмную темы, область просмотра 390 px и уменьшенное движение. Не добавляйте WebGL или 3D. Покажите статичный дизайн до добавления интерактивности, затем сообщите, какие проверки геометрии, линий и браузера вы действительно запускали.

Проверьте объяснение и рисунок

Сверьте результат с моделью и свидетельствами из браузера. Запишите проверки, которые не удалось запустить.

Счётчик, движение и состояния «пусто» и «заполнено» согласуются с заданными правилами очереди.
Схема остаётся читаемой на узком экране и без движения; её элементы управления работают с клавиатуры.
Обе темы и применимые проверки геометрии и линий просмотрены; незапущенные проверки названы.

OpenDesign предоставляет локальное дизайн-пространство для кодинговых агентов. Этот листинг не означает, что навык входит в комплект или что внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

Эта страница описывает зафиксированную ревизию источника, ссылка на которую приведена ниже. Поведение и требования исходного проекта могут измениться.

Владелец источника: wheresryan22
Репозиторий: wheresryan22/anatomy
Файл навыка: SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-12 · 689dcf966e63

Редакционное резюме источника

Anatomy сочетает метод объяснения через физический объект с изометрическим набором SVG, необязательной интерактивностью и определёнными в источнике проверками геометрии и браузера. Это редакционное резюме зафиксированного источника, а не отчёт о выполнении.

Оригинальное резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не число использований навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Требуется ли Anatomy React?

Нет. Источник поддерживает JavaScript без фреймворка или TypeScript, создающий SVG и HTML, а также компоненты React и Next.js. Выберите вариант, подходящий основному проекту.

Нужны ли WebGL или 3D для схемы Anatomy?

Нет. SVG — основной результат. WebGL необязателен для эффектов вроде воды, огня или света; вращающаяся 3D-геометрия — отдельная бета-опция. Запрашивайте только те режимы, которые нужны для объяснения.

Это тот же навык, что и пакет anatomy-figures?

Нет. Anatomy — навык и набор инструментов для создания. Отдельно описанный пакет anatomy-figures содержит готовые схемы. Установку одного не следует описывать как установку другого.

Anatomy

Сделайте одну техническую идею видимой

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

Скачать OpenDesign Смотреть дизайн-навыки