skills.rest
masakinihirota
masakinihirotaCOMMUNITY
Explore all skills by this author →
𝕏@masakinihirotaGitHub

animate

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

Updated Jul 21, 2026
Search Tags:#accessibility#animation#micro-interactions#motion design#ui feedback#framer motion#css transitions
One-click install
npx skills add https://github.com/masakinihirota/2026src-ni --skill animate-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/masakinihirota/2026src-ni/tree/main/.agents/skills/animate
Command: npx skills add https://github.com/masakinihirota/2026src-ni --skill animate-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Static interfaces often lack feedback, feel abrupt during state changes, and miss opportunities to guide users, making them harder to understand and less engaging to use. ## Core Features & Use Cases - Animation Audit: Identifies missing feedback, jarring transitions, unclear relationships, and missed guidance opportunities in an existing feature. - Layered Motion Strategy: Plans hero moments, feedback layers, transition layers, and delight moments with defined durations and easing curves. - Accessible Implementation: Implements CSS transitions, keyframes, Web Animations API, Framer Motion, or GSAP while respecting prefers-reduced-motion and 60fps performance budgets. - Use Case: After shipping a new dashboard, ask for an animation pass to add staggered entrance reveals, button press feedback, smooth modal transitions, and skeleton loading states. ## Quick Start Review the checkout flow and add purposeful animations and micro-interactions that improve feedback and transitions.

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 web UI feature?▼

Audit the feature for missing feedback, abrupt transitions, and unclear relationships, then plan hero, feedback, transition, and delight layers. Implement with CSS transitions for state changes, keyframes for sequences, and transform plus opacity for GPU acceleration.

What easing curves should I use for UI animations?▼

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

Should I use CSS or JavaScript for web animations?▼

Use CSS transitions and keyframes for simple declarative animations like hovers and state changes. Use the Web Animations API, Framer Motion, or GSAP for complex interactive sequences requiring programmatic control.

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

Wrap animations in a prefers-reduced-motion media query that reduces durations to near zero and disables iteration. Always provide non-animated alternatives so motion-sensitive users get equivalent feedback.

Why do my UI animations feel laggy or janky?▼

Jank usually comes from animating layout properties like width, height, top, or left instead of transform and opacity. Keep feedback durations under 500ms, use will-change sparingly, and verify 60fps on target devices.

Related Skills

Explore More Design & Creative Skills→
childrentimechildrentime
1.0k

animate

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

Community
Advanced
juanelojgajuanelojga

optimize

Measure Core Web Vitals and optimize web UI performance.

Community
Intermediate
ntdev204ntdev204

frontend-design

Teach frontend design principles for UI components, color, typography, and layout.

Community
Intermediate
mahg-esmahg-es
3

animation

Animate UI transitions and state changes with transform and opacity.

Official
Intermediate