skills.rest
falentio
falentioCOMMUNITY
Explore all skills by this author →
GitHub

animate

Implements UI animations by selecting tools, properties, easings, and durations through a gated decision sequence.

Updated Aug 22, 2026
Search Tags:#animation#ui design#motion#easing#reduced motion#springs#css transitions
One-click install
npx skills add https://github.com/falentio/cimi --skill animate-falentio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/falentio/cimi/tree/main/.agents/skills/animate
Command: npx skills add https://github.com/falentio/cimi --skill animate-falentio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deciding whether and how to animate a UI element is error-prone: developers often animate things that should not move, pick wrong easings, or ship motion without reduced-motion support. This Skill turns a motion request into a reviewed implementation by enforcing a strict build sequence. ## Core Features & Use Cases - Gated decision sequence: First decides whether the element should animate at all based on interaction frequency, then names the motion's purpose before writing any code. - Tool and property selection: Chooses between CSS transitions, @starting-style, CSS animations, WAAPI, or Motion, and restricts animation to transform and opacity for GPU-accelerated rendering. - Ready-made recipes: Provides implementations for buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, staggers, hold-to-confirm, tab indicators, scroll reveals, and drag-to-dismiss gestures. - Use Case: When asked to add an entrance animation to a dropdown menu, the Skill checks the frequency gate, picks a CSS transition with transform-origin at the trigger, applies the strong ease-out curve at 150-250ms, and ships reduced-motion and hover gating alongside the code. ## Quick Start Ask the AI to animate a component, for example: add an entrance animation to this dropdown menu using the animate skill.

Frequently Asked Questions about animate

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

FAQPage Schema
How do I animate a dropdown or popover in CSS?▼

Use a CSS transition on opacity and transform with a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1) at 150-250ms. Set transform-origin to the trigger element so the panel scales out of what the user clicked, and start from scale(0.95) with opacity 0 rather than scale(0).

When should I use CSS transitions vs a JavaScript animation library?▼

Use CSS transitions for hover, press, and state toggles, and CSS animations for predetermined motion that must stay smooth under load since they run off the main thread. Reach for a library like Motion only when you need springs, layout animations, exit animations, or gesture-driven values.

Should every UI element have an animation?▼

No. Elements triggered 100+ times per day, such as keyboard shortcuts or command palettes, should never animate. Frequent interactions get near-imperceptible motion at most, while the delight budget is reserved for rare moments like onboarding or success states.

Why does my animation drop frames under page load?▼

JavaScript requestAnimationFrame-based animation drops frames while the browser loads, scripts, or paints, and Motion's x/y/scale shorthand props are not hardware-accelerated. Use CSS animations for predetermined motion or the full transform string in Motion to stay on the GPU.

How do I support reduced motion in CSS animations?▼

Wrap motion in a @media (prefers-reduced-motion: reduce) block that keeps opacity and color transitions but drops transform-based movement. Reduced motion means fewer and gentler animations, not zero, so transitions that aid comprehension should remain.

What easing and duration should UI animations use?▼

Use ease-out for entering and exiting, ease-in-out for on-screen movement, and never ease-in on UI since it delays the moment the user is watching. Keep UI durations under 300ms: 100-160ms for button presses, 125-200ms for tooltips, and 200-500ms for modals and drawers.

Related Skills

Explore More Design & Creative Skills→
taxmaxitaxmaxi
1

pick-ui-library

Selects animation and UI primitive libraries for React web interfaces.

Official
Intermediate
Free-The-AiFree-The-Ai
5

review-animations

Reviews animation and motion code against easing, duration, performance, and accessibility standards.

Official
Intermediate
JiaxuanZou0714JiaxuanZou0714
5

animate

Plan and implement CSS and JavaScript animations for UI elements.

Community
Advanced
karthiknishkarthiknish
2

react-native-design

Provide React Native UI, navigation, and animation patterns with Reanimated 3 and Gesture Handler.

Community
Advanced