Перейти к руководству
animation-vocabularyавтор Emil Kowalski

Animation Vocabulary Skill.

Skill для Claude Code и Codex в области моушн и видео: обратный глоссарий, который превращает нечёткое описание движения в точный термин.

  • Анимация и видео
emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md
--- name: animation-vocabulary description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary
Преамбула и заголовки секций считаны из исходного файла 2026-09-14 · 12 884 символа всего

01 Что делает

Что делает skill animation-vocabulary в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

animation-vocabulary — это обратный словарь для называния веб-движения. Вы описываете эффект приблизительно — «упругая штука при открытии поповера», «резиновый скролл как в iOS» — а он возвращает точный термин плюс собственное описание из глоссария, в формате Stagger — Анимировать несколько элементов один за другим.

Это для дизайнеров и разработчиков, которым нужно нужное слово, чтобы дать промпт ИИ или дизайнеру, а не для того, чтобы проектировать или собирать анимацию. Глоссарий охватывает Entrances & Exits, Sequencing & Timing, Movement & Transforms, Easing, Spring Animations, Scroll, Feedback & Interaction, Performance и Principles to Know, а также противопоставляет близкие пары, например Clip-path и Mask.

Что он выдаёт

  • Подходящий термин плюс собственное определение глоссария, в одной отформатированной строке
  • Маркированный список близких альтернатив с условием для каждой
  • Явно обозначенное приближение, если ничего не подходит
Смотрите пример запроса ↗

Как это работает

  1. 01
    Сопоставляйте ощущение, а не ключевые слова

    Пользователь описывает, как выглядит или ощущается движение, и это ощущение сопоставляется с глоссарием, а не с техническими строками.

  2. 02
    Отвечать в фиксированном формате Skill

    Одна строка: термин жирным шрифтом, тире, затем собственное описание из глоссария. Никаких предисловий вокруг ответа.

  3. 03
    Сначала ранжировать совпадение, затем перечислить альтернативы

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

  4. 04
    Начинать с термина и остановиться

    Термин указывается первым, а рассуждение придерживается, если пользователь не просит подробностей.

02 Определите своё применение

Когда использовать skill animation-vocabulary

Используйте skill animation-vocabulary в Claude Code или Codex, когда задача — анимация и видео такого рода. Применимость и ограничения ниже взяты из собственного файла skill.

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

  • Вы можете точно представить эффект, но не знаете название, например, поповер, вырастающий из кнопки, которая его открыла.
  • Вам нужна терминология, чтобы составить бриф для AI или дизайнера, а не для самостоятельной реализации.
  • Запрос приходит в виде вопроса о названии: как называется, когда…
  • Вы можете описать только физическое ощущение, например, оверскролл с сопротивлением и возвратом на место.

Знайте границы

  • Проектирование или создание анимации — область применения skill ограничена только называнием эффекта.
  • Термины, выходящие за пределы этого глоссария: вместо расширения глоссария skill сообщает о пробеле.

Что предоставить

  • ВводНикакой технической информации заранее не требуется; skill читает описание, а не список ключевых слов.
  • ВводУкажите, из какого элемента это появляется или к какому элементу прикрепляется, поскольку такие термины, как анимация с учётом источника (origin-aware animation), определяются именно этой связью.

03 Внутри скилла

Правила словаря анимации, которые Skill animation-vocabulary даёт Claude Code и Codex

6 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

  1. Цитировать глоссарий, а не пересказывать

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

  2. Явно противопоставлять конкурирующие термины

    Близкие пары, такие как Clip-path и Mask, Pop in и Bounce, Shared element transition и Layout animation, нужно сопоставлять друг с другом, а не выбирать один молча.

  3. Никогда не придумывать термин

    Если точного термина нет в глоссарии, об этом нужно прямо сказать; существующие слова из глоссария можно использовать для объяснения концепции, но нельзя придумывать новое название.

  4. Читать с учётом намерения

    Триггером служит обычное описание пользователем того, что он видит, а не поиск по ключевым словам; интуитивно уловленное ощущение — это и есть вход, который нужно распознать.

  5. Быть кратким

    Вопрос об именовании должен получить название, а не эссе; длина увеличивается только тогда, когда пользователь просит об этом.

  6. Синхронизация глоссария

    Встроенный в skill глоссарий — это выверенный снимок страницы /vocabulary проекта, и оба источника должны обновляться вместе при любом изменении.

04 Применение

Установить animation-vocabulary в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить animation-vocabulary в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

Общая форма CLI skills для skills/animation-vocabulary/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Источник: SKILL.md § Examples (блок кода).

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Ответ выглядит как одна строка глоссария: термин полужирным, тире, собственная формулировка из файла, например запись про rubber-banding.
  • Варианты, если они есть, оформлены как маркированный список, где каждый пункт содержит однострочное условие применения термина.
  • Конкурирующие термины разделяются перед выбором, а не объединяются в один ответ.

В OpenDesign импортируйте animation-vocabulary по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите skill в верхней панели.

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Repository
github.com/emilkowalski/skills Ветка main
Файл skill
skills/animation-vocabulary/SKILL.md Контрольная сумма содержимого записана при верификации; коммит d23d7f8
License
MIT Из LICENSE.
Звёзды репозитория
37 516 Снимок GitHub сделан 2026-09-14 для всего репозитория emilkowalski/skills, который содержит 9 скиллов в этом каталоге. Не является рейтингом или счётчиком использования для animation-vocabulary.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Быстрый стартПоказывает форму однострочного ответа: термин полужирным, тире, описание из глоссария.
  2. ИнструкцииШесть пронумерованных правил: читать намерение, цитировать точно, устранять неоднозначность, аппроксимировать, оставаться в рамках глоссария, быть кратким.
  3. ПримерыТри разобранных запроса: основанный на ощущении, требующий устранения неоднозначности, и физическое ощущение.
  4. ГлоссарийДвенадцать сгруппированных списков терминов — от «Появления и исчезновения» до «Принципов, которые нужно знать».
Собственное описание skill
«Глоссарий обратного поиска, который превращает смутное описание веб-анимации или эффекта движения в точный термин («отскакивающая штука, когда открывается поповер» → Pop in; «резиновая прокрутка из iOS» → Rubber-banding). Используйте, когда пользователь спрашивает «как называется, когда…» или описывает эффект движения, не зная его названия, и хочет получить правильный термин для промпта AI или дизайнера. Для названия эффекта, а не для его проектирования или создания.»

Описание из заголовка SKILL.md. Полный файл содержит около 12 884 символов. Читайте полный файл на GitHub.

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

Вопросы о skill animation-vocabulary

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Нужно ли мне уже знать термин, чтобы использовать это?

Нет. Вы описываете эффект как можете — собственный пример из файла — просто «скролл iOS с эффектом резинки» — и в ответ приходит термин Rubber-banding с прикреплённым описанием из глоссария.

Что произойдёт, если моего эффекта нет в глоссарии?

Skill называет ближайший термин и прямо говорит, что это лишь приближение, либо переформулирует эффект словами из глоссария, например «это стаггер входов с увеличением масштаба». Он не станет придумывать термин, которого нет в списке.

Спроектирует или создаст ли он анимацию за меня?

Нет. Skill ограничен названием эффекта; проектирование или создание анимации явно выходит за рамки его задач. Вы берёте возвращённый термин и используете его, чтобы дать бриф тому, кто или что будет создавать движение.

Animation Vocabulary

Запустите animation-vocabulary на реальной задаче из категории «Движение и видео».

Скачайте OpenDesign, импортируйте animation-vocabulary по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Терминал
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows