skills.rest
joaopaulotr
joaopaulotrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animate

Adds purposeful animations, micro-interactions, and motion effects to UI features.

Updated Apr 15, 2026
Search Tags:#accessibility#animation#micro-interactions#motion design#easing#ui enhancement#css transitions
One-click install
npx skills add https://github.com/joaopaulotr/PesquiseMaisHealth --skill animate-joaopaulotr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/joaopaulotr/PesquiseMaisHealth/tree/main/.agents/skills/animate
Command: npx skills add https://github.com/joaopaulotr/PesquiseMaisHealth --skill animate-joaopaulotr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Static interfaces often lack feedback, feel abrupt during state changes, and miss opportunities to guide users. This Skill reviews a feature and systematically adds animations and micro-interactions that improve usability and create delight. ## Core Features & Use Cases - Animation Assessment: Identifies missing feedback, jarring transitions, and unclear spatial relationships in an existing feature. - Layered Motion Strategy: Plans hero moments, feedback layers, transition layers, and delight moments with correct timing and easing curves. - Accessible Implementation: Uses GPU-accelerated transform and opacity animations while respecting prefers-reduced-motion settings. - Use Case: After building a checkout flow, run this Skill to add button press feedback, smooth modal entry, form validation shake effects, and a success celebration animation. ## Quick Start Ask the AI to review the checkout page and add purposeful animations and micro-interactions that improve feedback and delight.

Frequently Asked Questions about animate

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

FAQPage Schema
How do I add animations and micro-interactions to a web UI?▼

Start by identifying missing feedback, abrupt state changes, and delight opportunities, then plan a hero moment plus feedback and transition layers. Implement with CSS transitions and keyframes for simple cases, or the Web Animations API, Framer Motion, or GSAP for complex sequences.

What easing curves and durations should UI animations use?▼

Use ease-out curves like cubic-bezier(0.25, 1, 0.5, 1) for natural deceleration. Keep feedback at 100-150ms, state changes at 200-300ms, layout changes at 300-500ms, and avoid bounce or elastic curves which feel dated.

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

Wrap animations in a prefers-reduced-motion media query that sets animation and transition durations to near zero. Every animation must have a non-animated alternative so motion-sensitive users get an equivalent experience.

Why do my CSS animations cause jank and low frame rates?▼

Jank happens when animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity for GPU acceleration, use will-change sparingly, and verify 60fps on target devices.

When should I use JavaScript animation libraries instead of CSS?▼

Use CSS transitions and keyframes for simple declarative state changes. Switch to the Web Animations API, Framer Motion for React, or GSAP when you need programmatic control, complex sequenced timelines, or interactive gesture-driven motion.

Related Skills

Explore More Design & Creative Skills→
childrentimechildrentime
1.0k

animate

Analyze features and create accessible animation plans for web UI components.

Community
Advanced
catlog22catlog22
2.1k

team-motion-design

Orchestrates multi-agent motion design pipelines for animation tokens, scroll choreography, and performance testing.

Community
Advanced
mahou-labsmahou-labs
1

polish

Fix alignment, spacing, typography, and content consistency across UI components during final handoff.

Official
Advanced
soeiroosoeiroo

loading-states

Implement skeleton screens, spinners, and progressive loading with reduced-motion support.

Community
Intermediate