skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-animation

Designs, implements, reviews, and reverse-engineers UI motion for CSS, Framer Motion, and native platforms.

3|1|Updated Apr 29, 2026
Search Tags:#reverse engineering#motion design#framer-motion#spring physics#ui animation#css transitions#easing curves
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill ui-animation-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-animation
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/ui-animation
Command: npx skills add https://github.com/firstsun-dev/skills --skill ui-animation-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, opencv-python, numpy, scipy, and includes scripts (resource) and references (resource) components.

What problem does it solve? UI animation work is error-prone: developers pick sluggish easings, animate layout properties that drop frames, forget reduced-motion fallbacks, and struggle to reproduce motion they see in other products. This Skill provides concrete rules, recipes, and measurement tooling so motion is designed, implemented, reviewed, and reverse-engineered correctly. ## Core Features & Use Cases - Motion design and implementation: Decision framework, easing/duration defaults, and per-component recipes (buttons, popovers, drawers, modals, toasts, gestures, drag) for CSS transitions, WAAPI, springs, and Framer Motion. - Animation code review: Ten non-negotiable standards with flag-on-sight triggers, a Before/After/Why table format, and a Block/Approve verdict for reviewing animation diffs. - Reverse-engineering from screen recordings: Scripts extract frames, track element motion, and fit spring or cubic-bezier parameters, then emit code for CSS, Motion, SwiftUI, React Native, and UIKit plus a handoff spec. - Use Case: Given a screen recording of an iOS-style drawer animation, extract frames, fit the curve, and produce a Framer Motion spring config that reproduces it. ## Quick Start Ask the agent to add a smooth swipe-to-dismiss gesture to a modal, or to reverse-engineer the animation from an attached screen recording.

Frequently Asked Questions about ui-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reverse engineer an animation from a screen recording?▼

Extract frames with the extract_frames.py script, identify the moving element and its effects from the contact sheet, then run track_motion.py and fit_curves.py to get spring or cubic-bezier parameters. Substitute the fitted values into the code templates for CSS, Framer Motion, SwiftUI, or React Native.

What easing and duration should I use for UI animations?▼

Use cubic-bezier(0.22, 1, 0.36, 1) for entrances and cubic-bezier(0.25, 1, 0.5, 1) for slides, keeping routine UI under 300ms and scaling duration with distance. Avoid ease-in, which starts slow and makes the interface feel sluggish.

Should I use CSS transitions or Framer Motion for animations?▼

Prefer CSS transitions for interruptible, predetermined state changes since they stay smooth under load and retarget on interruption. Use Framer Motion springs for gesture-driven or physics-based motion, and reserve JS requestAnimationFrame for complex choreography.

Why does my animation drop frames or feel janky?▼

Jank usually comes from animating layout properties like width, height, top, or left, which trigger layout recalculation every frame. Animate only transform and opacity, avoid transition: all, and toggle will-change only during heavy motion.

How do I make animations accessible for reduced motion users?▼

Every animation needs a prefers-reduced-motion: reduce path that disables transform and keyframe motion while keeping instant state changes or opacity-only fades. Also gate hover animations behind @media (hover: hover) and (pointer: fine) so touch devices do not replay hover on tap.

What are the limitations of fitting curves from a recording?▼

Fit accuracy depends on matching the extraction fps to the source rate and having at least four tracked frames; variable-frame-rate recordings and duplicated frames inflate fit error. High error on both spring and bezier models usually means multi-phase motion that must be split and fitted per segment.

Related Skills

Explore More Design & Creative Skills→
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
CristoVenturesCristoVentures
2

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS, React, or Vue.

Official
Advanced
AradotsoAradotso
3

design-motion-principles

Create and audit UI animations with accessibility and performance guardrails.

Official
Advanced
markus41markus41
18

Text Animations Skill

Generate React and Framer Motion text animation effects.

Community
Intermediate