skills.rest
Aeonxuu
AeonxuuCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Reviews and improves UI animation, easing, and interaction code using design engineering principles.

Updated May 9, 2026
Search Tags:#code review#Framer Motion#animation#interaction design#easing#UI polish#css transitions
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill emil-design-eng-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill emil-design-eng-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel sluggish or unpolished because of subtle animation mistakes: wrong easing curves, excessive durations, scale-from-zero entrances, and non-interruptible keyframes. This Skill encodes Emil Kowalski's design engineering philosophy to help you diagnose and fix these invisible details in UI code. ## Core Features & Use Cases - Animation Decision Framework: Decide whether an element should animate at all, which easing curve to use, and how fast it should run based on usage frequency and purpose. - Structured UI Code Review: Get Before/After/Why markdown tables identifying issues like transition: all, ease-in on UI elements, missing :active states, and incorrect transform-origin on popovers. - Component & Gesture Guidance: Apply concrete patterns for buttons, tooltips, drawers, drag dismissal with velocity, springs, clip-path reveals, stagger animations, and reduced-motion accessibility. - Use Case: Paste a React dropdown component and receive a table of fixes, such as replacing ease-in with a custom cubic-bezier(0.23, 1, 0.32, 1) ease-out and shortening the duration from 400ms to 180ms. ## Quick Start Ask the skill to review your UI component's animation code and suggest improvements based on design engineering principles.

Frequently Asked Questions about emil-design-eng

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make UI animations feel more responsive?▼

Use ease-out curves for entering elements so movement starts immediately, keep UI animation durations under 300ms, and add transform: scale(0.97) on :active for press feedback. Custom cubic-bezier curves like (0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

When should I use springs vs CSS transitions for animation?▼

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, and prefer them over keyframes for rapidly triggered elements because transitions retarget smoothly.

Should popovers scale from center or from their trigger?▼

Popovers should scale from their trigger using transform-origin set to the trigger location, such as Radix UI's --radix-popover-content-transform-origin variable. Modals are the exception and should keep transform-origin: center since they are not anchored to a trigger.

Why does my Framer Motion animation drop frames under load?▼

Framer Motion's shorthand x, y, and scale props run via requestAnimationFrame on the main thread and are not hardware-accelerated. Use the full transform string like transform: "translateX(100px)" or switch to CSS animations, which run off the main thread.

How do I handle animations for users who prefer reduced motion?▼

Use the prefers-reduced-motion media query to remove transform and position animations while keeping opacity and color transitions that aid comprehension. In React, useReducedMotion from Framer Motion lets you conditionally disable movement values.

When should I not animate a UI element at all?▼

Never animate keyboard-initiated actions or elements seen 100+ times per day, such as command palette toggles, since animation makes them feel slow. Frequent hover effects should be removed or drastically reduced; reserve animation for occasional or rare interactions.

Related Skills

Explore More Design & Creative Skills→
istinataFTSistinataFTS
2

ckm:ui-styling

Build accessible React UIs with Radix UI, Tailwind CSS, and canvas-based design.

Community
Advanced
han-so1omonhan-so1omon
1

animate

Plan entrance, transition, and micro-interaction animations for frontend components.

Community
Advanced
civictechdccivictechdc
1

accessibility-compliance

Audit web and mobile UI components for WCAG 2.2 accessibility conformance.

Official
Advanced
iart-aiiart-ai
12

animation-principles

Define timing, easing, and physical motion properties for natural animation.

Official
Intermediate