animation-vocabulary

Translate vague web animation descriptions into precise technical terms.

Updated Jun 21, 2026
One-click install
npx skills add https://github.com/jpmorillom1/io-project --skill animation-vocabulary-jpmorillom1
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/jpmorillom1/io-project/tree/main/io-ui/.agents/skills/animation-vocabulary
Command: npx skills add https://github.com/jpmorillom1/io-project --skill animation-vocabulary-jpmorillom1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of identifying the technical term for a vague description of a web animation or motion effect, enabling users to accurately communicate their needs to designers or AI systems.

Core Features & Use Cases

  • Reverse-Lookup Glossary: Translate a vague description of a motion or effect into its exact term.
  • Quick Start: Describe an effect, and receive the matching term(s) in a simple format.
  • Use Case: When a user asks, "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?", the Skill returns "Origin-aware animation."

Quick Start

Describe an effect to the Skill, and receive the matching term in this format:

**Term** — Description of the effect.

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 technical term for a web animation when I only have a vague description?

A reverse lookup glossary identifies precise web animation terms from vague motion effect descriptions. You provide a description of the desired motion, and it returns the exact technical terminology to facilitate accurate communication with designers and AI systems.

What is the term for a motion effect where a popover grows out of the clicked button?

This specific web animation is called an origin-aware animation. The glossary identifies this technical term by matching your description of a UI element expanding from its interaction trigger rather than its geometric center.

How do I communicate design terminology for motion effects to an AI system?

You can communicate motion effect requirements to an AI system by translating your visual description into recognized design terminology. This glossary provides the exact technical terms needed to generate or request specific web animations accurately.

Can I search for web animation terms if I do not know the exact motion effect name?

Yes, you can identify web animation terms without knowing them by describing the visual behavior. This reverse lookup process matches your plain language description of the motion effect against a glossary to return the correct technical term.

What format does the design terminology glossary use to return animation terms?

The glossary returns animation terms in a simple format pairing the technical term with its description. When you query a motion effect, it outputs the matching term and a brief explanation to clarify the specific web animation behavior.