102.7K+Download
Skip to the usage guide
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 OpenDesignView 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

  1. 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.

  2. 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.

  3. 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.

  4. 04
    Restrict the Properties

    The source prioritizes transform and opacity, with clip-path recipes and an exception for accordion height. Choose properties that avoid unnecessary layout work, then check the result in the browser.

  5. 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.

  6. 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 animate to implement a specific web interaction. It first decides whether motion is warranted, then selects the tool, properties, timing and interruption behavior.

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

  • This is a construction skill, not a whole-codebase audit or a critique of an existing animation diff. The source points those tasks to improve-animations and review-animations.
  • The source rejects motion for keyboard shortcuts and actions used more than 100 times a day. An instant state change may be the intended result.
  • React Native is outside this skill's stated scope; the source names animate-expo for that platform.

What to Provide

  • Component and InteractionIdentify the component to animate, the state change and how often people trigger it. Share the existing implementation and motion tokens if there are any.

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.

  1. 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.

  2. No Approximated Values

    Every curve, duration and spring config comes from the skill's tables. A familiar-looking cubic-bezier is not a source.

  3. 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.

  4. 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.

  5. Never Scale(0)

    Entrances start from scale(0.9–0.97) plus opacity 0, because nothing in the real world appears from nothing.

  6. 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.

  7. 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.

  8. 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

Adapt this editorial example to a real component and interaction.

Starter prompt
Use animate to add open and close motion to [drawer component]. Users open it occasionally to inspect [content]. Keep the existing motion tokens, support interruption and reduced motion, and explain the gate result, chosen tool and timing. If this interaction should not animate, say why.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

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

  • Confirm the result names the frequency tier and purpose before adding motion.
  • Check that existing motion tokens were reused and reduced-motion and pointer gating shipped with the change.
  • Rapidly reverse or repeat the interaction and check for jumps, restarts or blocked input.
  • Verify the chosen curve and duration against the skill's tables; inspect motion in the browser rather than assuming code quality proves visual quality.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill animate