skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

ui-motion

Defines UI animation and transition guidelines for GSAP and Framer Motion interfaces.

Updated Aug 31, 2026
Search Tags:#accessibility#transitions#micro-interactions#motion design#gsap#framer motion#ui animation
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill ui-motion-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-motion
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/ui-motion
Command: npx skills add https://github.com/MANR255926/GARAGE --skill ui-motion-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent or excessive UI animation degrades user experience and accessibility. This Skill provides clear motion design rules so interfaces use subtle, purposeful animation instead of distracting effects. ## Core Features & Use Cases - Motion Principles: Enforces subtle motion patterns such as opacity and translate over scale, spring physics for UI elements, and easeOut easing. - Timing Standards: Standardizes stagger delays (0.03-0.08s), hover animations under 200ms, and physical layout transitions. - Accessibility Compliance: Ensures animations respect reduced-motion preferences and animate hierarchy rather than everything equally. - Use Case: When building a React dashboard with Framer Motion, apply these rules so card entrances use staggered spring animations and hover states complete in under 200ms. ## Quick Start Apply the ui-motion guidelines to review and refine the animations in my React component.

Frequently Asked Questions about ui-motion

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

FAQPage Schema
How do I create smooth UI animations with Framer Motion?▼

Use spring animations for UI elements and prefer opacity plus translate transforms over scale effects. Keep hover animations under 200ms and apply easeOut easing for natural-feeling motion.

What stagger delay should I use for list animations?▼

Use stagger delays between 0.03 and 0.08 seconds between elements. This range creates a perceptible sequential reveal without making the interface feel slow or laggy.

GSAP vs Framer Motion for UI micro-interactions?▼

Both support the spring physics and easing rules in these guidelines. Framer Motion integrates directly with React components, while GSAP offers broader framework-agnostic control for complex timelines.

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

Respect the prefers-reduced-motion media query by disabling or simplifying animations when users request reduced motion. This is a core requirement of the motion guidelines, not an optional enhancement.

When should I avoid animating UI elements?▼

Avoid animating everything equally; animate hierarchy so only meaningful changes draw attention. Skip distracting effects like scale explosions and keep motion subtle and purposeful.

Related Skills

Explore More Design & Creative Skills→
himaxxhimaxx
1

ui-ux-designer

Designs wireframes, prototypes, and token-based component libraries with WCAG compliance and user research.

Community
Advanced
qazuorqazuor

performance-testing

Automate end-to-end performance testing across database, API, and frontend layers.

Community
Advanced
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
AnglesiteAnglesite
2

animate

Design CSS animations with vanilla CSS custom properties for hover effects, scroll reveals, and page transitions.

Official
Advanced