菜单
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命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Always-on coding style and organization rules for naming, file shape, comments, types, module boundaries, pattern use, errors, and avoiding unnecessary abstraction across languages and tracks.
Use when setting up or modifying CI pipelines — the quality-gate sequence every change passes, shift-left ordering, feeding failures back to agents, and keeping the pipeline under 10 minutes.
Use when designing any public interface — REST/GraphQL endpoints, module contracts, component props — Hyrum's Law, contract-first, consistent error semantics, validate at boundaries, extend rather than break.
基于 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