使い方ガイドへスキップ
animation-vocabulary作者 Emil Kowalski

Animation Vocabulary スキル。

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年9月14日にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全12,884文字

01 できること

Claude CodeとCodexにおいて、animation-vocabulary Skillが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

animation-vocabularyは、ウェブモーションに名前を付けるための逆引き用語集です。「ポップオーバーが開くときの弾むような動き」「iOSのラバーバンドスクロール」のようにざっくりとエフェクトを説明すると、正確な用語とグロッサリー独自の説明を、Stagger — Animate several items one after another. という形式で返します。

これは、アニメーション自体を設計・実装するのではなく、AIやデザイナーに指示を出す際に正しい言葉が必要なデザイナーや開発者向けです。このグロッサリーはEntrances & Exits、Sequencing & Timing、Movement & Transforms、Easing、Spring Animations、Scroll、Feedback & Interaction、Performance、Principles to Knowを網羅し、Clip-pathとMaskのような似た用語同士を対比します。

生成されるもの

  • 一致する用語と、グロッサリー独自の定義を、整形された一行で
  • それぞれに条件を付した、近い代替候補の箇条書きリスト
  • 一致するものがない場合に、明示的にフラグ付けされた近似値
プロンプト例を見る ↗

仕組み

  1. 01
    キーワードではなく、感触に一致させます

    ユーザーはその動きがどのように見え、どのように感じられるかを述べ、その感触は技術的な文字列と照合されるのではなく、グロッサリーに対応付けられます。

  2. 02
    スキルの決められた形式で回答する

    1行で、用語を太字にし、emダッシュを置いた後に、glossary自体の説明をそのまま記載します。回答の前置きは不要です。

  3. 03
    一致度でランク付けし、それから候補を列挙する

    複数の用語が当てはまる場合は、最も一致するものを先に示し、続けて1〜2件の候補を挙げ、それぞれの違いを一文で説明します。

  4. 04
    用語を先に示して、そこで止める

    用語を最初に示し、ユーザーがさらに求めない限り、根拠の説明は控えます。

02 適合性を確認

animation-vocabulary Skill を使用するタイミング

Claude Code または Codex でモーションとビデオがこの種類の仕事である場合に animation-vocabulary スキルを使用します。適合性と制限は以下のとおり、スキル自身のファイルから取得されています。

適している場合

  • 効果は正確に思い描けるが、名前が分からない場合。たとえば、開いたボタンからポップオーバーが広がっていくような場合です。
  • 自分で実装するためではなく、AIやデザイナーへのブリーフに使う語彙が必要な場合です。
  • リクエストが「これは何と呼ばれますか」という命名に関する質問として届く場合です。
  • オーバースクロールが抵抗して戻るような、物理的な感触しか説明できない場合です。

境界を知る

  • アニメーションのデザインや実装は対象外です。このスキルは効果の命名のみに限定されています。
  • このglossaryの範囲外にある用語については、拡張するのではなく、その不足をそのまま報告します。

提供すべきもの

  • 入力事前に技術的な情報は必要ありません。このスキルはキーワードのリストではなく、説明された内容そのものを読み取ります。
  • 入力origin-aware animationのような用語はその関係性によって定義されるため、どの要素から出てくるか、あるいはどの要素に付随するかを伝えてください。

03 スキルの内部

animation-vocabularyスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する6つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を変える部分です。

  1. glossaryを引用し、言い換えない

    説明は権威ある参照テキストとして扱われるため、ユーザー向けに言い換えるのではなく、文言をそのまま引用します。

  2. 競合する用語を明示的に対比する

    Clip-pathとMask、Pop inとBounce、Shared element transitionとLayout animationのような近い用語は、暗黙のうちに一方を選ぶのではなく、並べて示す必要があります。

  3. 用語を決して創作しない

    glossaryに正確な用語が存在しない場合は、そのことを明確に伝えます。概念を説明するために既存のglossaryの用語を使うことはできますが、新しい名称を作ってはいけません。

  4. 意図を読み取る

    きっかけとなるのはキーワード検索ではなく、ユーザーが見たものをそのまま説明した言葉です。直感的に感じ取った感触こそが、解決すべき入力となります。

  5. 簡潔に保つ

    命名に関する質問には名前で答えるべきで、エッセイのような回答は不要です。長さが増えるのは、ユーザーがそれを求めた場合のみです。

  6. グロッサリーを同期させる

    スキル内のグロッサリーは、プロジェクトの /vocabulary ページのキュレートされたスナップショットであり、どちらかが変更された際には両方を一緒に更新することが想定されています。

04 実際に使う

Claude Code または Codex に animation-vocabulary をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex またはあなたのエージェントに animation-vocabulary を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

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

skills/animation-vocabulary/SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初のモーション・動画タスクを与える

このプロンプトを独自のコンテンツと制約に合わせて調整し、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 自体が正しい結果として示しているもの:

  • 回答はグロッサリーの1行のように読めます:太字の用語、em dash、ファイル自体の表現、例えばラバーバンディングの項目のような形式です。
  • 代替語がある場合、それぞれの用語が当てはまる条件を1行で示す箇条書きとして表示されます。
  • 競合する用語は、単一の回答に統合される前に、あなたが選択できるように分けて示されます。

OpenDesignの場合SKILL.mdのリンクからanimation-vocabularyをインポートしてください:Plugins → Add → Skill → Import from link、その後トップバーで選択します。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/emilkowalski/skills ブランチ main
スキルファイル
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. クイックスタート1行の回答形式を示します:太字の用語、em dash、グロッサリーの説明。
  2. 指示6つの番号付きルール:意図を読み取る、原文通りに引用する、意味を明確化する、近似する、グロッサリー内に留まる、簡潔さを保つ。
  3. 例3つの実例:感覚に基づくもの、意味の明確化、物理的な感覚。
  4. グロッサリー「Entrances & Exits」から「Principles to Know」まで、12のグループ化された用語リストです。
スキル自身による説明
「Web アニメーションやモーション効果の曖昧な説明を正確な用語に変換する逆引き用語集(「ポップオーバーが開くときのバウンドするやつ」→ Pop in;「iOS のゴムバンドスクロール」→ Rubber-banding)。ユーザーが「…というのは何と呼ばれますか」と尋ねるか、名前を知らずにモーション効果を説明し、AI やデザイナーにプロンプトするための正しい言葉を知りたい場合に使用します。効果に名前を付けるためのもので、デザインや構築のためのものではありません。」

SKILL.md のフロントマター説明。完全なファイルは約 12,884 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

animation-vocabularyスキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

これを使うには用語をあらかじめ知っている必要がありますか?

いいえ。効果をどのように説明しても構いません——ファイル自体の例も「iOSのラバーバンドスクロール」というだけです——すると、Rubber-bandingという用語とグロッサリーの説明が添えられて返答が来ます。

自分の効果がグロッサリーにない場合はどうなりますか?

最も近い用語を挙げ、それが近似にすぎないことを明確に伝えるか、「それはスケールインエントランスのstaggerです」のようにグロッサリーの言葉で効果を言い換えます。リストにない用語を作り出すことはありません。

アニメーションを設計または構築してくれますか?

いいえ。このスキルは効果の命名に限定されており、設計や構築は明確に対象外です。返ってきた用語を使って、モーションを構築する人やものにブリーフを伝えてください。

Animation Vocabulary

実際のモーションとビデオのタスクで animation-vocabulary を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから animation-vocabulary をインポートし、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

ターミナル
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応