106.9K+Download
Skip to the usage guide
UI Animationby mblode

UI Animation Skill.

Build, debug and measure purposeful interface motion.

  • UI Motion
  • Reduced Motion
Download OpenDesignView Usage Guide
Source Review · ui-animationSKILL.md
Task Build, debug and measure purposeful interface motion. Produces A targeted interface-motion implementation or review. Before You Start Provide the component code or a clear reference recording, together with the action's frequency and target devices. Decide whether the task is a motion review, an implementation change or a measured reconstruction.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Build, debug and measure purposeful interface motion

Review UI transitions, springs and gestures, or fit motion from recordings with explicit interruption, frame-rate and reduced-motion checks.

Source-based workflowNot an execution benchmark

The Working Approach

ui-animation covers building, reviewing and measuring interface motion. It begins with the interaction's purpose and frequency, then chooses the timing and implementation. Feedback, orientation and continuity guide the decision; frequently repeated actions should remain immediate.

A second workflow measures motion from a recording. It extracts frames, tracks an element and fits spring or easing curves before generating implementation parameters. Open and close behavior are treated separately, and a new recording is compared with the reference to check whether the reconstructed phases survived.

Expected Deliverables

  • A targeted interface-motion implementation or review.
  • A measured easing or spring specification from a recording.
  • A handoff with timing, property phases and validation observations.
See the Example Brief

From Brief to Review

  1. 01
    Decide why the state should move

    Identify feedback, continuity or orientation needs and how often the action occurs. Preserve immediate task completion and keyboard focus.

  2. 02
    Choose or measure the motion

    Select the component recipe, or extract a recording at its real frame rate and fit the relevant movement. Keep open and close phases distinct.

  3. 03
    Test the actual interaction

    Retoggle rapidly, inspect slow playback and test touch and reduced motion. For reconstruction, compare a recording of the implementation with the original.

02 When to Use It

When to Use It

Provide the component code or a clear reference recording, together with the action's frequency and target devices. Decide whether the task is a motion review, an implementation change or a measured reconstruction.

A Good Fit

  • An interaction feels wrongThe source routes sluggishness, jumps and misfiring behavior into specific timing or implementation checks.
  • You need to match a recorded effectIts measurement scripts provide a path beyond guessing a spring by eye.

Limits to Check

  • It does not set the whole visual directionPalette, typography and broader product design are outside its primary scope.
  • Measurement needs dependenciesThe scripted recording route uses FFmpeg and Python packages for tracking and curve fitting.
  • A fit is not proof of equivalenceDropped frames, variable frame rate and multi-phase motion can make a single fitted curve misleading.

Bring These Inputs

  • Component or recordingProvide the code to improve or a clear clip of the reference interaction.
  • Behavior and frequencyDescribe the user's action, resulting state and how often it repeats.
  • Target platformSpecify implementation stack, devices and accessibility requirements.

03 Decisions That Matter

Decisions That Matter

  1. Purpose before decoration

    The decision framework can reject unnecessary animation as well as recommend it.

  2. Interruption handling

    Rapid toggles expose restart and retargeting problems that normal playback misses.

  3. Measured handoff

    Separate property timings and fitted parameters make reconstruction more precise.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide the code to improve or a clear clip of the reference interaction.

Upstream Source File
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use ui-animation to diagnose the drawer interaction in my supplied recording and React component. Measure opening and closing separately at the recording's actual frame rate. Identify whether the perceived delay comes from the easing, an early pause or work blocking the main thread. Keep keyboard focus immediate and preserve the existing drawer behavior. Propose the smallest implementation change, then test rapid toggling and reduced motion. If you fit a spring or curve, report the fit limitations and compare a recording of the revised interaction with the reference rather than claiming a visual match from the parameters alone.

Inspect the Result

Check the actual output against these observable criteria.

  • Test rapid retargeting and slow playback of both directions.
  • Match extraction and curve-fitting frame rates.
  • Exercise the same task with reduced motion and touch input.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
mblode
Repository
mblode/agent-skills
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · 391508702523
Editorial Source Summary
Build, debug and measure purposeful interface motion.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can it find places to add animation?

Yes. Its discovery route reports opportunities based on purpose and frequency, including suggestions it rejects. Discovery alone does not authorize implementation.

Why measure opening and closing separately?

They often have different timing and character. The source warns against fitting one direction and simply reversing it.

Does a CSS reduced-motion rule cover everything?

Not necessarily. The source notes that JavaScript-driven motion needs its own reduced-motion handling and should be tested through the actual interaction.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md