animation-designer

This skill is an expert reference for building smooth, professional web animations using Framer Motion and CSS. It solves the problem of implementing polished motion design by providing ready-to-use patterns for UI animations, scroll effects, and micro-interactions, so developers do not have to reinvent common motion recipes from scratch.

The content covers Framer Motion basics (installation and a minimal fade-in example) and a catalogue of reusable patterns written as TypeScript React components: fade-in on mount, staggered list animations with container and item variants, button hover and tap feedback using spring transitions, and modal/dialog animations with AnimatePresence. It also enumerates categories of motion work it supports, including page transitions, component enter/exit animations, hover effects, loading animations, parallax and scroll-triggered effects, progress indicators, and micro-interactions such as form focus states and success/error feedback. The package includes a README and a manifest alongside the main skill document.

Target users are frontend and React developers who want to add motion to their applications without deep animation expertise. Typical use cases include adding an entrance animation to a card, staggering a list reveal, wiring up hover/press feedback on buttons, animating a modal open and close, or building scroll-triggered effects, all using idiomatic Framer Motion and CSS.