skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

animation-vocabulary

Maps vague descriptions of web motion effects to their exact animation terminology.

Updated Jul 1, 2026
Search Tags:#css#glossary#animation#transitions#motion design#terminology#ui animation
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill animation-vocabulary-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/animation-vocabulary
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill animation-vocabulary-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users often know what a motion effect looks or feels like but not its proper name, making it hard to prompt an AI, brief a designer, or search for implementation guidance. This Skill reverse-looks-up the precise term from a curated glossary. ## Core Features & Use Cases - Reverse glossary lookup: Converts loose descriptions like "the bouncy thing when a popover opens" into exact terms such as Pop in or Rubber-banding. - Disambiguation of close terms: Contrasts competing terms (Morph vs Crossfade vs Shared element transition) so the user can pick the right one. - Composed descriptions: When no single term fits, describes the effect using glossary vocabulary, e.g. a stagger of scale-in entrances. - Use Case: A user asks "what's it called when an iOS scroll resists and snaps back?" and receives the term Rubber-banding with its authoritative definition. ## Quick Start Ask what the effect is called when a thumbnail smoothly expands into a full card when tapped.

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 name of an animation effect I can only describe?▼

Describe what the effect looks or feels like in plain words, such as springy or draws itself in. The Skill maps that sensation to the exact glossary term, like Spring or Line drawing, and returns the term with its definition.

What is the difference between a morph and a shared element transition?▼

A morph is one shape smoothly turning into another shape, like Dynamic Island. A shared element transition is an element traveling and transforming from one position into another, like a thumbnail expanding into a card.

Can this Skill design or build the animation for me?▼

No. It only names effects by matching descriptions to glossary terms. It does not generate CSS, code, or design specs; it gives you the right word to use when prompting an AI or briefing a designer.

What happens when no glossary term matches my description?▼

The Skill names the closest term and states plainly that it is an approximation, or describes the effect by composing glossary vocabulary, such as a stagger of scale-in entrances. It does not invent new terms.

Does the glossary cover spring physics and performance terms?▼

Yes. The glossary includes spring concepts like stiffness, damping, and mass, plus performance terms like jank, compositing, will-change, and layout thrashing, alongside entrances, easing, scroll, and interaction effects.

Related Skills

Explore More Design & Creative Skills→
PAISHU-AIPAISHU-AI

soft-skill

Design websites with custom layouts, premium typography, and cinematic motion effects.

Community
Advanced
smithisrealdevsmithisrealdev

animation-designer

Design and implement web animations with Framer Motion and CSS.

Community
Intermediate
Saifeldin2401Saifeldin2401

Improving Animations

Analyze codebase animation code for performance, accessibility, and design issues.

Community
Advanced
AO-HySAO-HyS

animation-vocabulary

Identifies the precise animation term matching a described visual motion effect.

Official
Basic