skills.rest
eyenalxai
eyenalxaiCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

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

Updated Sep 5, 2023
Search Tags:#code review#interaction design#framer motion#ui animation#design engineering#css transitions#easing curves
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill emil-design-eng-eyenalxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill emil-design-eng-eyenalxai

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: Determines whether an element should animate at all, which easing curve to use, and how long it should run based on usage frequency and purpose. - Structured UI Code Review: Produces Before/After/Why markdown tables identifying issues like transition: all, ease-in on UI elements, missing :active states, and incorrect transform-origin on popovers. - Implementation Guidance: Covers springs, clip-path animations, gesture physics (velocity-based dismissal, damping), CSS transform mastery, performance rules (GPU-only properties, WAAPI), and accessibility (prefers-reduced-motion, touch hover gating). - Use Case: Paste a dropdown component's CSS and receive a table of concrete fixes, such as replacing ease-in at 300ms with a custom cubic-bezier(0.23, 1, 0.32, 1) ease-out at 180ms. ## Quick Start Review my dropdown component's CSS and suggest animation improvements following design engineering best practices.

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 so movement starts immediately, keep UI animations under 300ms, and add scale(0.97) on :active for press feedback. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

What easing should I use for dropdown and popover animations?▼

Use ease-out for elements entering the screen, since ease-in delays initial movement and feels sluggish. Set transform-origin to the trigger location rather than center, and keep durations between 150-250ms.

When should I use springs instead of CSS transitions?▼

Use springs for drag interactions with momentum, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes that need to run off the main thread.

Why do Framer Motion animations drop frames under load?▼

Framer Motion's shorthand x/y/scale props run via requestAnimationFrame on the main thread, so they drop frames when the browser is busy. Use the full transform string like transform: translateX(100px) for hardware acceleration, or CSS animations.

Should I animate elements triggered by keyboard shortcuts?▼

No. Keyboard-initiated actions repeat hundreds of times daily, and animation makes them feel slow and disconnected. Remove open/close animations entirely for high-frequency actions like command palettes.

How do I handle animations for users with reduced motion preferences?▼

Use the prefers-reduced-motion media query to remove transform and position-based movement while keeping opacity and color transitions that aid comprehension. Reduced motion means gentler animation, not zero animation.

Related Skills

Explore More Design & Creative Skills→
AlexW00AlexW00
70

emil-design-eng

Reviews and improves UI animations, transitions, and component interactions using CSS and Framer Motion.

Community
Intermediate
yunior123yunior123

flutter-performance

Diagnose frame drops, scroll jank, and animation stutter in Flutter apps using overlays, DevTools, and benchmarks.

Community
Intermediate
mohamedgshoaibmohamedgshoaib
5

make-interfaces-feel-better

Apply design engineering principles to polish frontend component visuals and motion.

Community
Intermediate
taxmaxitaxmaxi
1

pick-ui-library

Selects animation and UI primitive libraries for React web interfaces.

Official
Intermediate