Loading...
Loading...
Found 15 Skills
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.
Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
Use when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context
Tailwind CSS animations and transitions including built-in utilities and custom animation patterns
Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive
Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, or icon swaps. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "tween the size", "fade between", "smooth open", "smooth close".
Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible
Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention
Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.