animateby Emil Kowalski

Animate Skill.

A Claude Code and Codex skill for motion and video: builds an animation from scratch, deciding purpose, tool, properties, curve, and duration in order.

Motion & Video
UI code

Download OpenDesign View usage guide

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

Front matter and section headings read from the upstream file on 2026-09-14 · 11,494 characters in full

01 What it does

What the animate Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A construction skill, not an audit: it turns a request for motion into an implementation that would survive a strict review, working in a fixed sequence — should it animate at all, purpose, tool, properties, curve and duration, interruption, exit — then writes the code.

It is for designers and developers who want the call made rather than a menu of options. Specifics come from hard tables: frequency tiers, transform and opacity only, named cubic-bezier curves, per-element duration ranges, and reduced-motion and hover gating shipped with the animation. For auditing a codebase or critiquing a diff, use the sibling skills.

UI code

See the example prompt ↗

How It Works

01
Gate on Frequency First
The first step can end the job before any code exists: anything opened 100+ times a day, or fired from a keyboard shortcut, gets no animation at all.
02
Name the Purpose in One Word
No purpose, no animation. Asking for it because it looks cool, on an element the user sees constantly, is a reason to stop rather than build.
03
Take the Cheapest Tool That Works
Walk down the tool table and stop at the first fit: CSS transition, @starting-style, CSS animation, WAAPI, Motion.
04
Restrict the Properties
Transform and opacity do the work because they skip layout and paint and run on the GPU; clip-path is the sanctioned fourth, and animating height is tolerated only for accordions.
05
Fix Curve and Duration from the Tables
Entering and exiting means ease-out, on-screen movement ease-in-out, hover and colour changes ease, constant motion linear, default ease-out.
06
Plan Interruption and Exit
Rapidly retriggered things use transitions, gestures use springs, and the exit mirrors the entrance so swipe-to-dismiss reads as obvious.

02 Find your fit

When to Use the animate Skill

Use the animate skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

You have been asked to animate something, add motion, make a component feel alive, or build a transition.
The work matches a common component case, so you start from a recipe instead of a blank file.

Know the Boundaries

Self-check before you finish.
Each of these is an automatic block in review-animations:

03 Inside the skill

Rules the animate Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Keyboard and 100+/day Actions Never Animate
Keyboard-initiated actions are a disqualifier rather than a judgment call, and tens-of-times-a-day elements get near-imperceptible motion only, or nothing.
No Approximated Values
Every curve, duration and spring config comes from the skill's tables. A familiar-looking cubic-bezier is not a source.
Extend Existing Tokens, Never Fork Them
If the codebase already has an --ease-out variable or a duration scale, use it; adding a parallel motion system counts as a defect.
Never ease-in on UI
ease-in starts slow and delays the exact moment the user is watching, so it is banned here; default to ease-out.
Never Scale(0)
Entrances start from scale(0.9–0.97) plus opacity 0, because nothing in the real world appears from nothing.
Ship Reduced Motion and Pointer Gating with the Code
The prefers-reduced-motion media query and hover gating belong in the same change as the animation, not as a later ticket or follow-up.
Make the Call, Do Not Offer a Menu
Presenting animation options as choices is itself a failure mode here; state the reasoning in one line and write the implementation.
Delight Only at the Rare Tier
Delight is allowed only at the rare or first-time tier such as onboarding, success and celebration; elsewhere it needs a real named purpose.

04 Put it to work

Install animate in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add animate to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/animate/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

The SKILL.md does not include an example prompt; this starter is written from the catalog one-liner. Replace the task line with your real brief.

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.

Source: starter prompt written from the catalog one-line use (not from the SKILL.md).

Check the First Result

Before accepting the output, look for these in the transcript and the files:

Steps 1 and 2 gate everything. Don't reach for a curve before you know whether it animates at all.
Every curve, duration, and spring config comes from the tables below. Never invent cubic-bezier(0.4, 0, 0.2, 1) because it looks familiar.
If --ease-out or a duration scale already exists, use it. Adding a parallel system is a defect.
Don't install a motion library for a fade.

In OpenDesign import animate from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill file: skills/animate/SKILL.md Content checksum recorded at verification; commit d23d7f8
License: MIT From LICENSE.
Repository stars: 37,516 GitHub snapshot taken 2026-09-14 for the whole emilkowalski/skills repository, which contains 9 skills in this catalog. Not a rating or usage count for animate.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

The Skill's Own 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; for auditing a whole codebase use improve-animations.”

Front-matter description from SKILL.md. The full file is about 11,494 characters. Read the full file on GitHub.

Animate

Run animate on a Real Motion and Video Task.

Download OpenDesign, import animate from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

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

What the animate Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the animate Skill

Good Fit

Know the Boundaries

Rules the animate Skill Gives Claude Code and Codex

Keyboard and 100+/day Actions Never Animate

No Approximated Values

Extend Existing Tokens, Never Fork Them

Never ease-in on UI

Never Scale(0)

Ship Reduced Motion and Pointer Gating with the Code

Make the Call, Do Not Offer a Menu

Delight Only at the Rare Tier