skills.rest
xzedm
xzedmCOMMUNITY
Explore all skills by this author →
GitHub

animate

Implements UI animations by deciding purpose, tool, properties, easing, and duration before writing code.

Updated Sep 3, 2026
Search Tags:#frontend#animation#motion#easing#reduced motion#css transitions#ui motion
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill animate-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/animate
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill animate-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams often ship animations that feel wrong: elements that should not animate at all, ease-in curves on entrances, scale(0) pop-ins, or durations that make dropdowns feel sluggish. This Skill turns a request for motion into an implementation that follows a strict decision sequence, so the result survives a rigorous animation review the first time. ## 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 (feedback, spatial consistency, state indication, delight) before writing any code. - Tool and property selection: Picks the cheapest working tool (CSS transition, @starting-style, CSS animation, WAAPI, or Motion) and restricts animation to transform and opacity for GPU-accelerated rendering. - Concrete values, no guessing: Provides exact easing curves (cubic-bezier tokens), duration ranges per component type, and spring configurations, plus mandatory reduced-motion and hover gating. - Use Case: When asked to add an entrance animation to a dropdown menu, it selects a CSS transition on transform and opacity, applies a strong ease-out curve at 150-250ms, sets transform-origin at the trigger, and ships the prefers-reduced-motion variant in the same change. ## Quick Start Ask the AI to animate a component, for example: add an entrance and exit animation to this modal dialog following the animation build sequence.

Frequently Asked Questions about animate

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

FAQPage Schema
How do I add an entrance animation to a modal or dropdown?▼

Use a CSS transition or @starting-style on transform and opacity only, starting from scale(0.95) plus opacity 0 rather than scale(0). Apply a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1) at 150-250ms, and set transform-origin at the trigger for popovers.

CSS transitions vs Motion library for UI animation?▼

Use CSS transitions for hover, press, and state toggles, and CSS animations for predetermined motion that must stay smooth under load. Reach for Motion only when you need springs, layout animations, exit animations, or gesture-driven values.

When should a UI element not be animated?▼

Skip animation entirely for actions triggered 100+ times per day, such as keyboard shortcuts or command palette toggles. Frequent hover and navigation interactions get only near-imperceptible motion, while delight is reserved for rare first-time moments.

Why does my animation drop frames under page load?▼

Frame drops happen when animating layout properties like width, height, or top, or when using Motion's x/y/scale shorthand props. Animate only transform and opacity, and in Motion pass the full transform string such as translateX(100px) for hardware acceleration.

How do I handle prefers-reduced-motion in animations?▼

Ship a reduced-motion variant with every animation using a media query that keeps opacity and color transitions but drops transform-based movement. Reduced motion means fewer and gentler animations, not zero, so comprehension-aiding transitions remain.

Why does my toast animation restart instead of reversing smoothly?▼

Keyframes restart from zero when retriggered, which breaks rapidly-fired elements like toasts and toggles. Use CSS transitions instead, since they retarget from the current value, and use springs for gestures because they carry velocity through interruptions.

Related Skills

Explore More Design & Creative Skills→
shawnlivermoreshawnlivermore

cleen-ui-overlays

Build overlay UI elements such as modals, drawers, and tooltips with @cleen/ui.

Community
Intermediate
ceshezceshez

emil-design-eng

Review web UI interactions and animation choices against design engineering rules.

Community
Advanced
Free-The-AiFree-The-Ai
5

review-animations

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

Official
Intermediate
owshq-mecowshq-mec
122

overdrive

Generates WebGL and CSS animations for interactive web designs.

Official
Advanced