メニュー
Use when someone describes a motion effect vaguely and needs its precise name to write a design brief, prompt, or implementation specification; this skill names effects, not designs them.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/blackprince001/skills --skill core-design-animation-vocabularyコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | core-design-animation-vocabulary |
| description | Use when someone describes a motion effect vaguely and needs its precise name to write a design brief, prompt, or implementation specification; this skill names effects, not designs them. |
Turn a description of what someone sees or feels into the most useful motion term.
This skill includes a local copy of Emil Kowalski's original vocabulary glossary at
references/upstream-animation-vocabulary.md.
Read that reference when the quick map is insufficient. Provenance and update instructions live
in UPSTREAM_SOURCES.md.
Lead with the best term and a one-sentence definition. If there are plausible alternatives, give at most two and say how they differ. Name the effect; do not turn a naming question into a design lecture.
| What it does | Preferred term | Distinguish from |
|---|---|---|
| Several items enter one after another | Stagger | Orchestration is the overall timing plan. |
| A popover grows from the clicked control | Origin-aware animation | A generic scale-in grows from its own center. |
| A thumbnail becomes its detail view | Shared element transition | A morph changes one shape; a crossfade only overlaps states. |
| Layout shifts smoothly into its new position | Layout animation | A page transition changes views/routes. |
| Content is uncovered by a boundary | Reveal | A mask supports soft edges; clip-path is the hard-edge mechanism. |
| A drag resists beyond an edge then returns | Rubber-banding | Momentum is the carried release velocity. |
| Elements respond to viewport position | Scroll-driven animation | A scroll reveal is one specific entrance pattern; parallax uses differing speeds. |
| A component overshoots slightly into place | Pop in | A spring is the physics mechanism; bounce describes the overshoot. |
| A value changes digit by digit | Number ticker | Use tabular numbers to avoid width jitter. |
| One state fades out as another fades in | Crossfade | Use continuity/shared-element language when identity is preserved. |
Once named, state the trigger, target, origin, animated properties, easing or spring behavior,
duration or response, interruption rule, and reduced-motion equivalent. Then load
core-design-design-engineering to decide whether the effect is justified.
references/upstream-animation-vocabulary.md