animatepor Emil Kowalski

Animate Skill.

Una skill de Claude Code y Codex para movimiento y video: construye una animación desde cero, decidiendo propósito, herramienta, propiedades, curva y duración en orden.

Movimiento y video
Código UI

Descargar OpenDesign Ver guía de uso

emilkowalski/skills · skills/animate/SKILL.mdSKILL.md

--- name: animate description: Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; … --- ## Operating Posture ## Hard Rules ## The Build Sequence ## Recipes ## Never Ship ## Output

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

01 Qué hace

Qué hace el skill animate 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

Un skill de construcción, no de auditoría: convierte una petición de movimiento en una implementación que sobreviviría a una revisión estricta, trabajando en una secuencia fija — si debe animarse, propósito, herramienta, propiedades, curva y duración, interrupción, salida — y después escribe el código.

Está pensado para diseñadores y desarrolladores que quieren que se tome la decisión, no un menú de opciones. Los detalles salen de tablas estrictas: niveles de frecuencia, solo transform y opacity, curvas cubic-bezier con nombre, rangos de duración por elemento, y el control de movimiento reducido y hover incluidos con la animación. Para auditar un código base o criticar un diff, use los skills hermanos.

Código UI

Ver el ejemplo de prompt ↗

Cómo funciona

01
El primer filtro: la frecuencia
El primer paso puede terminar el trabajo antes de que exista código: cualquier cosa que se abra más de 100 veces al día, o que se dispare desde un atajo de teclado, no lleva animación alguna.
02
Nombre el propósito en una palabra
Sin propósito, no hay animación. Pedirla porque queda bien, en un elemento que el usuario ve constantemente, es un motivo para detenerse en lugar de construir.
03
Use la herramienta más barata que funcione
Recorra la tabla de herramientas y deténgase en la primera que encaje: transición CSS, @starting-style, animación CSS, WAAPI, Motion.
04
Restrinja las propiedades
transform y opacity hacen el trabajo porque se saltan el layout y el pintado y se ejecutan en la GPU; clip-path es el cuarto autorizado, y animar height solo se tolera en acordeones.
05
Fije la curva y la duración según las tablas
Entrar y salir es ease-out; el movimiento en pantalla, ease-in-out; hover y cambios de color, ease; el movimiento constante, linear; por defecto, ease-out.
06
Planifique la interrupción y la salida
Lo que se reactiva con rapidez usa transiciones, los gestos usan springs, y la salida replica la entrada para que el deslizamiento de descarte resulte obvio.

02 Encuentra tu caso de uso

Cuándo Usar el animate Skill

Usa el skill animate en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. El ajuste y los límites a continuación se toman del archivo propio del skill.

Buen caso de uso

Se le ha pedido animar algo, añadir movimiento, hacer que un componente se sienta vivo o construir una transición.
El trabajo coincide con un caso de componente habitual, así que parte de una receta en lugar de un archivo en blanco.

Conozca los límites

Autocomprobación antes de terminar.
Cada uno de estos es un bloqueo automático en review-animations:

03 Dentro del skill

Reglas que el skill animate da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Las acciones de teclado y las de más de 100 veces al día nunca se animan
Las acciones iniciadas por teclado son un criterio de exclusión, no una cuestión de criterio, y los elementos que se usan decenas de veces al día solo reciben un movimiento casi imperceptible, o ninguno.
Sin valores aproximados
Cada curva, duración y configuración de resorte proviene de las tablas del skill. Un cubic-bezier que resulta familiar no es una fuente.
Extiende los tokens existentes, nunca los bifurques
Si el código ya tiene una variable --ease-out o una escala de duraciones, úsala; añadir un sistema de movimiento paralelo cuenta como defecto.
Nunca uses ease-in en la interfaz
ease-in empieza despacio y retrasa justo el momento que el usuario está mirando, así que aquí queda prohibido; por defecto, ease-out.
Nunca uses scale(0)
Las entradas parten de scale(0.9–0.97) más opacidad 0, porque nada en el mundo real aparece de la nada.
Entrega la reducción de movimiento y el condicionamiento por puntero junto con el código
La media query prefers-reduced-motion y el condicionamiento de hover deben ir en el mismo cambio que la animación, no en un ticket o seguimiento posterior.
Decide tú, no ofrezcas un menú
Presentar las opciones de animación como alternativas es en sí un modo de fallo aquí; expón el razonamiento en una línea y escribe la implementación.
Deleite solo en el nivel poco frecuente
El deleite solo se permite en el nivel poco frecuente o de primera vez, como el onboarding, el éxito y la celebración; en cualquier otro caso necesita un propósito real y con nombre.

04 Ponlo a trabajar

Instala animate 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 animate 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 animate

Forma genérica con la CLI skills para skills/animate/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

El SKILL.md no incluye un prompt de ejemplo; este iniciador está escrito desde la línea descriptiva del catálogo. Reemplaza la línea de tarea con tu briefing real.

Starter prompt

Use the animate skill on the material I attach. What the skill should do here: Builds an animation from scratch, deciding purpose, tool, properties, curve, and duration in order. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Fuente: prompt de inicio escrito desde el uso de una línea del catálogo (no desde el SKILL.md).

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

Los pasos 1 y 2 condicionan todo. No elija una curva antes de saber si debe animar del todo.
Cada curva, duración y configuración de resorte proviene de las tablas a continuación. Nunca inventes cubic-bezier(0.4, 0, 0.2, 1) porque te resulte familiar.
Si --ease-out o una escala de duración ya existe, úsala. Añadir un sistema paralelo es un defecto.
No instales una biblioteca de motion para un fade.

En OpenDesign importa animate desde el enlace de su SKILL.md: Plugins → Add → Skill → Import from link y luego selecciónalo 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/animate/SKILL.md Checksum de contenido registrado en verificación; commit d23d7f8
License: MIT De LICENSE.
Estrellas del repositorio: 37.516 Snapshot de GitHub tomado el 2026-09-14 para todo el repositorio emilkowalski/skills, que contiene 9 skills en este catálogo. No es una calificación ni un conteo de uso para animate.
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.

La descripción propia del Skill

"Construye una animación desde cero, tomando las decisiones en el orden que determina si se siente bien: si debe animar del todo, qué propósito, qué herramienta, qué propiedades, qué curva y duración, cómo interrumpe, cómo sale. Escribe la implementación. Úselo cuando le pidan animar algo, agregar movimiento, hacer que un componente se sienta vivo o construir una transición. Para revisar movimiento existente use review-animations; para auditar una base de código completa use improve-animations."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 11.494 caracteres. Lee el archivo completo en GitHub.

Animate

Ejecute animate en una tarea real de movimiento y video.

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

Descargar OpenDesign Ver todas las skills

Terminal

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

Qué hace el skill animate en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo Usar el animate Skill

Buen caso de uso

Conozca los límites

Reglas que el skill animate da a Claude Code y Codex

Las acciones de teclado y las de más de 100 veces al día nunca se animan

Sin valores aproximados

Extiende los tokens existentes, nunca los bifurques

Nunca uses ease-in en la interfaz

Nunca uses scale(0)

Entrega la reducción de movimiento y el condicionamiento por puntero junto con el código

Decide tú, no ofrezcas un menú

Deleite solo en el nivel poco frecuente