{"skill":{"slug":"web-animation-design","displayName":"Web Animation Design","summary":"Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, e...","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":545,"installsAllTime":2,"installsCurrent":1,"stars":0,"versions":1},"createdAt":1774046988749,"updatedAt":1774047406614},"latestVersion":{"version":"1.0.0","createdAt":1774046988749,"changelog":"Initial release of **web-animation-design** skill for web animation best practices:\n\n- Provides a comprehensive guide for designing purposeful, natural-feeling web animations, based on Emil Kowalski's animations.dev course.\n- Includes clear triggers: activates for questions about motion, easing, timing, transitions, performance, or popular animation libraries (CSS, Framer Motion, React Spring, GSAP).\n- Enforces accessibility: always check and respect `prefers-reduced-motion`.\n- Specifies required review output as a markdown table (not \"Before/After\" text lists).\n- Offers practical decision tree for choosing tools (CSS, Framer Motion, etc.) based on animation type and performance needs.\n- Details best practices for duration, easing, and accessibility for different interaction types.\n- Covers spring animation usage, configuration, and guidelines for lively or interruptible motion.\n- Sets clear scope: only applies when animation or motion is explicitly requested.","license":"MIT-0"},"metadata":null,"owner":{"handle":"aa-on-ai","userId":"s17c7rw6zqf32g9sv6mqgxjxhh83fa3a","displayName":"ai-ron","image":"https://avatars.githubusercontent.com/u/94061050?v=4"},"moderation":null}