animation-vocabulary

Translate subjective motion descriptions into standardized animation and UI terminology.

4|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/k97/dock-tile --skill animation-vocabulary-k97
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/k97/dock-tile/tree/main/.agents/skills/animation-vocabulary
Command: npx skills add https://github.com/k97/dock-tile --skill animation-vocabulary-k97

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the communication gap between non-technical users and designers or developers by mapping descriptive, feel-based language to industry-standard animation terminology.

Core Features & Use Cases

  • Terminology Mapping: Converts subjective descriptions like "the bouncy thing" into technical terms like "Pop in" or "Spring".
  • Disambiguation: Clarifies the differences between similar effects (e.g., Morph vs. Crossfade) to ensure design intent is clear.
  • Use Case: A product manager wants to describe a specific UI transition to a developer but doesn't know the name; they use this skill to find the correct term, ensuring the final implementation matches the vision.

Quick Start

Use the animation-vocabulary skill to identify the technical name for an effect described as a bouncy popover opening.

Frequently Asked Questions about animation-vocabulary

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find the correct UI animation terminology for a specific motion effect?

To find the correct UI animation terminology, you translate subjective descriptions like "bouncy" into standardized terms such as "Spring" or "Pop in". This ensures clear communication of design intent between stakeholders and developers.

What is the difference between a morph and a crossfade in UI transitions?

The difference between morph and crossfade in UI transitions lies in their physics-based effects mapping. Disambiguation clarifies these specific differences to ensure your final design implementation accurately matches the intended visual vision.

How do I communicate animation easing descriptions to a developer?

To communicate animation easing descriptions to a developer, map your feel-based language to industry-standard terminology. This bridges the communication gap, ensuring non-technical users and developers share consistent naming conventions for transitions.

Can I use a glossary to standardize motion design vocabulary across my team?

You can use a curated glossary to standardize motion design vocabulary across your team. This provides authoritative definitions for transitions and physics-based effects, ensuring consistent naming conventions across your design and development workflows.

Does terminology mapping work for non-technical product managers describing UI motion?

Terminology mapping works effectively for non-technical product managers describing UI motion. It converts descriptive language into precise animation terms, ensuring the final implementation matches the product vision without requiring technical expertise.