skills.rest
fernando-bertholdo
fernando-bertholdoCOMMUNITY
Explore all skills by this author →
GitHub

animation-motion

Apply a structured UI motion framework for designing and reviewing animations.

2|Updated Apr 9, 2026
Search Tags:#accessibility#css#animation#ui-design#motion-design#easing#web-animations
One-click install
npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill animation-motion-fernando-bertholdo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-motion
Source: https://github.com/fernando-bertholdo/4-successful-AI-life/tree/main/plugins/ui-excellence/skills/foundations/animation-motion
Command: npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill animation-motion-fernando-bertholdo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The animation decision framework helps UI designers and frontend engineers make purposeful motion choices that enhance usability and brand expression, reducing gratuitous motion.

Core Features & Use Cases

  • Framework-driven motion decisions for components (buttons, modals, popovers, tooltips)
  • Accessibility-conscious timing and reduced-motion handling
  • Practical examples and best practices for CSS and Web Animations API

Quick Start

Describe a UI component and ask for a recommended motion approach using the framework.

Frequently Asked Questions about animation-motion

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

FAQPage Schema
How do I choose the right duration and easing curves for UI animations?▼

Choosing duration and easing curves for UI animations requires a structured framework to ensure purposeful motion. This skill provides customizable timing guidelines and easing curve recommendations tailored for components like buttons and modals to enhance usability and brand expression.

What is the best way to handle prefers-reduced-motion in web animations?▼

Handling prefers-reduced-motion in web animations means providing accessibility-conscious alternatives to gratuitous motion. This framework imposes strict adherence to reduced-motion preferences, ensuring your CSS and Web Animations API implementations remain usable for sensitive users.

How do I design production-grade motion for UI components like modals and tooltips?▼

Designing production-grade motion for UI components like modals and tooltips involves applying a structured decision framework. This skill guides you through refining animations for these specific components, balancing brand expression with performance and accessibility considerations.

Can I use this motion design framework with both CSS and Web Animations API?▼

Yes, you can apply this motion design framework with both CSS and Web Animations API. The skill provides practical examples and best practices specifically for implementing UI motion using these web technologies, ensuring accessible and performant results.

When should I avoid adding animation to a UI component?▼

You should avoid adding animation to a UI component when the motion lacks a clear purpose and degrades usability. This framework helps you make structured motion decisions, reducing gratuitous animation and ensuring movement enhances rather than distracts from the user experience.

Related Skills

Explore More Design & Creative Skills→
vanyastaffvanyastaff
1

rust-ms-universal

Apply universal Rust naming, style, and idiom guidelines to crates.

Community
Advanced
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
segersnielssegersniels

web-animation-design

Guide web animation design with easing, timing, and accessibility support.

Community
Advanced