Loading...
Loading...
Found 11 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.
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
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.
Create performant CSS animations, transitions, and motion design