Reviews and improves UI animation, CSS transitions, and component interaction code.
npx skills add https://github.com/j172/bid --skill emil-design-eng-j172
Please help me install this Agent Skill. Skill: emil-design-eng Source: https://github.com/j172/bid/tree/main/agent/skills/emil-design-eng Command: npx skills add https://github.com/j172/bid --skill emil-design-eng-j172
transition: all, ease-in usage, and missing :active states. - Animation Decision Framework: Guides whether an element should animate at all, which easing curve to use, and how long it should run based on frequency and purpose. - Component Patterns: Covers springs, clip-path reveals, gesture velocity dismissal, stagger delays, tooltips, popovers, and reduced-motion accessibility. - Use Case: Paste a React dropdown component and receive a table of fixes, such as replacing a 400ms ease-in transition with a 200ms custom ease-out curve and an origin-aware transform. ## Quick Start Review my dropdown component's CSS and tell me what animation details to fix.High-intent search queries and answers about installing and using this skill.
Use ease-out curves for entering elements, keep UI durations under 300ms, and replace built-in easings with custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1). Avoid ease-in, which delays initial movement and feels sluggish.
Use springs for drag interactions, interruptible gestures, and elements that should feel alive, since they maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes, since they run off the main thread and stay smooth under load.
Framer Motion's shorthand x, y, and scale props run on the main thread via requestAnimationFrame and are not hardware-accelerated. Use the full transform string like transform: "translateX(100px)" or switch to CSS animations for predetermined motion.
Popovers should scale from their trigger element by setting transform-origin to the trigger location, such as Base UI's var(--transform-origin). Modals are the exception and should keep transform-origin: center since they are not anchored to a trigger.
Reduced motion means fewer and gentler animations, not zero. Keep opacity and color transitions that aid comprehension, but remove transform-based movement and position animations using the prefers-reduced-motion media query or a useReducedMotion hook.
artsmcImplement React components with TSX, CSS/SCSS/Tailwind styling, and responsive interactions.
melissa-pereira-deelAudit user actions against perceptual thresholds and propose performance improvement plans.
sohampawar1866Audit interfaces against WCAG principles covering keyboard, screen reader, contrast, and motion.
shinnytechCreate React UI components with shadcn/ui and Tailwind CSS.