Implements UI animations using CSS transitions, WAAPI, or Motion with defined easing and duration rules.
npx skills add https://github.com/rithm84/Manor --skill animate-rithm84
Please help me install this Agent Skill. Skill: animate Source: https://github.com/rithm84/Manor/tree/main/.agents/skills/emilkowalski-design/animate Command: npx skills add https://github.com/rithm84/Manor --skill animate-rithm84
@starting-style, CSS animation, WAAPI, or Motion. - Opinionated ingredient tables: Fixed easing curves (cubic-bezier(0.23, 1, 0.32, 1) and others), duration budgets per component type, spring configs, and a never-ship blocklist (scale(0), ease-in, transition: all, ungated hover). - Ready-made recipes: RECIPES.md provides implementations for button press, popover, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal, and drag-to-dismiss. - Use Case: Ask to animate a dropdown menu, and get a transform-origin-anchored scale-and-fade at 200ms with reduced-motion and hover gating included, plus a one-line rationale for each choice. ## Quick Start Animate the settings modal so it scales in from 0.96 with a fading backdrop, following the build sequence and shipping reduced-motion support.High-intent search queries and answers about installing and using this skill.
Use a CSS transition on opacity and transform at 150-250ms with a strong ease-out curve, scaling from 0.95 rather than 0. Set transform-origin to the trigger element so the panel appears to grow out of what was clicked.
Use springs for gesture-driven motion like drag-to-dismiss, elements that should feel alive, or animations the user can interrupt mid-flight, since springs carry velocity through interruptions. Use CSS transitions for predetermined state changes like hovers and toggles.
ease-in starts slow, delaying the exact moment the user is watching, making the interface feel sluggish. scale(0) looks unnatural because nothing physical appears from nothing; start from scale(0.9-0.97) with opacity 0 instead.
Yes, reduced-motion handling ships with every animation, not as a follow-up. The pattern keeps opacity and color transitions while dropping transform-based movement, since reduced motion means fewer and gentler animations rather than zero.
Skip animation for actions fired 100+ times per day like keyboard shortcuts or command palette toggles, and for anything whose purpose cannot be named as feedback, spatial consistency, state indication, or preventing a jarring change.
raphaelmansScan a codebase for UI moments that warrant motion and propose exact animation recipes.
xzedmReviews animation and motion code against ten craft standards covering easing, duration, origin, and accessibility.
legioncodeincSelect accessible React overlay primitives and audit focus, ARIA, and stacking behavior.
RepairYourTechDevelops cross-platform mobile apps with React Native, Expo, navigation, animations, and EAS Build deployment.