MCP.so
Sign In

animate

pbakaus / impeccable

About animate

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

Install animate

npx skills add https://github.com/pbakaus/impeccable --skill animate

Basic information

Category

Design & UI

Repository

pbakaus / impeccable

Skill

animate

What it does

  • Guides systematic assessment of animation opportunities across feedback, transitions, entrance effects, and delight moments, with mandatory accessibility support for prefers-reduced-motion

  • Provides timing recommendations (100–800ms by purpose), GPU-accelerated easing curves, and anti-patterns to avoid (bounce/elastic effects, layout property animations, animation fatigue)

  • Covers implementation across CSS transitions, @keyframes, JavaScript Web Animations API, and Framer Motion, with performance optimization for 60fps on target devices

  • Requires frontend-design skill context and performance constraints before proceeding; includes detailed patterns for buttons, forms, state changes, navigation, and delight moments

More skills in Design & UI