animation-vocabularypor Emil Kowalski

Animation Vocabulary Skill.

Un skill de Claude Code y Codex para motion y video: glosario de búsqueda inversa que convierte una descripción vaga de movimiento en su término exacto.

Movimiento y video

Descargar OpenDesign Ver guía de uso

emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md

--- name: animation-vocabulary description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary

Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 12 884 caracteres en total

01 Qué hace

Qué hace el skill animation-vocabulary en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

animation-vocabulary es un glosario de búsqueda inversa para nombrar el movimiento web. Usted describe un efecto de forma vaga —"eso rebotoncito cuando se abre un popover", "el desplazamiento tipo banda elástica de iOS"— y devuelve el término exacto más la propia descripción del glosario, en el formato Stagger — Anima varios elementos uno tras otro.

Está pensado para diseñadores y desarrolladores que necesitan la palabra correcta para dar instrucciones a una IA o a un diseñador, no para diseñar o construir la animación. El glosario cubre Entradas y Salidas, Secuenciación y Tiempos, Movimiento y Transformaciones, Easing, Animaciones Spring, Scroll, Retroalimentación e Interacción, Rendimiento y Principios que Conocer, y contrasta pares cercanos como Clip-path frente a Mask.

Qué produce

El término coincidente más la definición propia del glosario, en una línea con formato
Una lista con viñetas de alternativas cercanas con una condición en cada una
Una aproximación marcada explícitamente cuando nada coincide

Ver el ejemplo de prompt ↗

Cómo funciona

01
Haga Coincidir la Sensación, No las Palabras Clave
El usuario dice cómo se ve o se siente el movimiento, y esa sensación se mapea sobre el glosario en lugar de compararse con cadenas técnicas.
02
Responder en el formato fijo del Skill
Una línea: el término en negrita, una raya, y luego la descripción propia del glosario. Sin preámbulo alrededor de la respuesta.
03
Clasificar la coincidencia y luego listar alternativas
Cuando varios términos encajan, la mejor coincidencia va primero y le siguen uno o dos rivales con una línea que explica en qué se diferencia cada uno.
04
Encabezar con el término y detenerse
El término aparece primero y el razonamiento se reserva a menos que el usuario pida más.

02 Encuentra tu caso de uso

Cuándo usar el Skill animation-vocabulary

Usa el skill animation-vocabulary en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. La idoneidad y límites siguientes están tomados del propio archivo del skill.

Buen caso de uso

Puede imaginar el efecto con precisión pero falta el nombre, por ejemplo el popover que crece desde el botón que lo abrió.
Necesita el vocabulario para dar un briefing a una IA o a un diseñador, en lugar de implementar algo usted mismo.
La solicitud llega como una pregunta de nomenclatura: ¿cómo se llama cuando…
Solo puede describir una sensación física, como un desplazamiento excesivo que resiste y vuelve a su lugar.

Conozca los límites

Diseñar o construir la animación: el skill se limita a nombrar el efecto únicamente.
Términos que quedan fuera de este glosario: en lugar de ampliarlo, el skill informa la carencia.

Qué proporcionar

EntradaNo se necesita nada técnico de antemano; el skill lee lo que se describe, no una lista de palabras clave.
EntradaIndique de qué elemento sale o a cuál se adhiere, ya que términos como la animación consciente del origen se definen por esa relación.

03 Dentro del skill

Reglas que el Skill animation-vocabulary proporciona a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Citar el glosario, no parafrasear
Las descripciones se tratan como texto de referencia autorizado, por lo que la redacción se traslada exactamente en lugar de reformularse para el usuario.
Contrastar explícitamente términos en competencia
Pares cercanos como Clip-path frente a Mask, Pop in frente a Bounce, Shared element transition frente a Layout animation deben presentarse uno junto al otro en lugar de elegirse en silencio.
Nunca inventar un término
Si el término exacto no está en el glosario, hay que decirlo con claridad; pueden usarse palabras existentes del glosario para explicar el concepto, pero no puede acuñarse un nombre nuevo.
Leer con atención a la intención
El disparador es la descripción sencilla del usuario de lo que ve, no una búsqueda por palabras clave; la sensación intuida es la entrada que se resuelve.
Mantenerlo conciso
Una pregunta de nomenclatura debe recibir un nombre, no un ensayo; la extensión solo crece si el usuario lo solicita.
Mantenga el Glosario Sincronizado
El glosario dentro del skill es una instantánea curada de la página /vocabulary del proyecto, y ambos deben actualizarse juntos cada vez que uno de los dos cambie.

04 Ponlo a trabajar

Instalar animation-vocabulary en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añade animation-vocabulary a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

Formulario genérico de la CLI de skills para skills/animation-vocabulary/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Adapta esta instrucción con tu propio contenido y restricciones, luego ejecútala en Claude Code o Codex.

Example prompt

**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Fuente: SKILL.md § Examples (bloque de código).

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

La respuesta se lee como una línea del glosario: término en negrita, raya, la redacción propia del archivo, por ejemplo la entrada de rubber-banding.
Las alternativas, cuando existen, aparecen como viñetas, cada una con una condición de una línea sobre cuándo aplica ese término.
Los términos que compiten se separan antes de elegir, en lugar de fusionarse en una sola respuesta.

En OpenDesign importe animation-vocabulary desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego seleccciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Archivo de skill: skills/animation-vocabulary/SKILL.md Checksum del contenido registrado en la verificación; commit d23d7f8
License: MIT De LICENSE.
Estrellas del repositorio: 37,516 Captura de GitHub tomada el 2026-09-14 para todo el repositorio emilkowalski/skills, que contiene 9 skills en este catálogo. No es una valoración ni recuento de uso para animation-vocabulary.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Inicio RápidoMuestra la forma de respuesta de una línea: término en negrita, raya, descripción del glosario.
InstruccionesSeis reglas numeradas: leer la intención, citar textualmente, desambiguar, aproximar, permanecer dentro del glosario, ser conciso.
EjemplosTres búsquedas resueltas: una basada en sensación, una de desambiguación y una sensación física.
GlosarioDoce listas de términos agrupados, desde Entradas y Salidas hasta Principios que Conocer.

La descripción propia del Skill

"Glosario de búsqueda inversa que convierte una descripción vaga de una animación web o efecto de movimiento en su término exacto ("la cosa que rebota cuando un popover se abre" → Pop in; "el desplazamiento de banda elástica de iOS" → Rubber-banding). Úselo cuando el usuario pregunta "cómo se llama cuando…", o describe un efecto de movimiento sin conocer su nombre y desea la palabra correcta para dar a una IA o diseñador. Para nombrar un efecto, no para diseñar o construir uno."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 12,884 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill animation-vocabulary

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Necesito conocer ya el término para usar esto?

No. Usted describe el efecto como pueda —el propio ejemplo del archivo es simplemente "el desplazamiento de goma de iOS"— y la respuesta vuelve como el término Rubber-banding con la descripción del glosario adjunta.

¿Qué ocurre si mi efecto no está en el glosario?

Nombra el término más cercano y dice claramente que es solo una aproximación, o reformula el efecto con palabras del glosario, como "eso es un stagger de entradas de scale-in". No inventará un término que no esté en la lista.

¿Diseñará o construirá la animación por mí?

No. El skill se limita a nombrar el efecto; diseñarlo o construirlo queda explícitamente fuera de alcance. Usted toma el término que devuelve y lo usa para dar el briefing a quien o lo que construya el movimiento.

Animation Vocabulary

Ejecuta animation-vocabulary en una tarea real de movimiento y vídeo.

Descargue OpenDesign, importe animation-vocabulary desde su enlace SKILL.md, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills