skills.rest
WeWake1
WeWake1COMMUNITY
Explore all skills by this author →
GitHub

animate

Add purposeful animations and micro-interactions to frontend features using CSS and JavaScript.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Static interfaces often lack feedback, feel jarring during state changes, and miss opportunities to guide users. This Skill reviews a feature and systematically adds animations, micro-interactions, and motion effects that improve usability and create delight. ## Core Features & Use Cases - Animation Opportunity Assessment: Identifies missing feedback, abrupt transitions, unclear relationships, and delight gaps in an existing feature. - Layered Motion Strategy: Plans a hero moment, feedback layer, transition layer, and delight layer instead of scattering animations randomly. - Technical Implementation Guidance: Provides timing and easing standards, CSS and JavaScript techniques (Web Animations API, Framer Motion, GSAP), GPU-accelerated transform/opacity patterns, and prefers-reduced-motion accessibility support. - Use Case: After building a checkout form, use this Skill to add button press feedback, input focus transitions, validation shake animations, and a smooth success state, all respecting reduced-motion preferences. ## Quick Start Ask the AI to review the checkout form component and add purposeful animations and micro-interactions that respect reduced-motion settings.

Frequently Asked Questions about animate

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

FAQPage Schema
How do I add animations to a React component?▼

Add animations to React components using CSS transitions for simple state changes or Framer Motion for complex interactive sequences. Animate only transform and opacity properties to keep animations GPU-accelerated and smooth at 60fps.

What easing curves should I use for UI animations?▼

Use natural deceleration curves like ease-out-quart cubic-bezier(0.25, 1, 0.5, 1) or ease-out-expo cubic-bezier(0.16, 1, 0.3, 1). Avoid bounce and elastic curves, which feel dated and draw attention to the animation itself.

How long should UI animation durations be?▼

Use 100-150ms for instant feedback like button presses, 200-300ms for state changes like hovers, 300-500ms for layout changes like modals, and 500-800ms for entrance animations. Exit animations should run at about 75% of entrance duration.

How do I support prefers-reduced-motion in CSS animations?▼

Wrap animations in a @media (prefers-reduced-motion: reduce) query that sets animation-duration and transition-duration to 0.01ms and animation-iteration-count to 1. This provides non-animated alternatives for motion-sensitive users and is an accessibility requirement.

Why do my CSS animations cause jank and low FPS?▼

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

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
OthmanAdiOthmanAdi

gmira-motion

Enforce motion theses and performance-oriented patterns for web animations.

Community
Advanced
JacksonZx535JacksonZx535

design-review

Automates website design audits for visual consistency, typography, color, spacing, layout, interaction, responsiveness, motion, content, and performance.

Community
Advanced
42team-ru42team-ru

animate

Analyze UI features and add accessible animations and micro-interactions.

Official
Advanced