skills.rest
squidllee
squidlleeCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

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

Updated Aug 22, 2026
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/squidllee/skills --skill emil-design-eng-squidllee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/squidllee/skills/tree/main/emil-design-eng
Command: npx skills add https://github.com/squidllee/skills --skill emil-design-eng-squidllee

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 based on usage frequency, then choose the right easing curve, duration, and technique (CSS transitions, springs, WAAPI). - Structured UI Reviews: Get Before/After/Why markdown tables identifying issues like transition: all, ease-in on dropdowns, missing :active states, and incorrect transform-origin on popovers. - Component Craft Guidance: Apply patterns for buttons, tooltips, toasts, drawers, drag gestures, stagger animations, clip-path reveals, and accessibility (prefers-reduced-motion, touch hover gating). - Use Case: Paste a React or CSS component and ask for a polish review; receive a table of concrete fixes such as replacing scale(0) entries with scale(0.95) plus opacity, or switching Framer Motion x props to hardware-accelerated transform strings. ## Quick Start Ask the assistant to review your UI component code for animation and interaction polish using Emil Kowalski's 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 so movement starts immediately, keep durations under 300ms, and add press feedback like transform: scale(0.97) on :active. Custom cubic-bezier curves such as cubic-bezier(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 because they retarget smoothly instead of restarting.

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. High-frequency interactions like command palettes should open instantly, as demonstrated by Raycast having no open/close animation.

Why does my Framer Motion animation drop frames 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 and WAAPI 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-based movement while keeping opacity and color transitions that aid comprehension. In React, hooks like useReducedMotion let you conditionally disable positional animation values.

Why should popovers not scale from center?▼

Popovers are anchored to a trigger element, so scaling from center breaks spatial consistency. Set transform-origin to the trigger location, for example with var(--transform-origin) in Base UI. Modals are the exception and should stay centered.

Related Skills

Explore More Design & Creative Skills→
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
Festo-WampambaFesto-Wampamba

emil-design-eng

Analyze component design, motion behavior, and interaction feedback for UI polish.

Community
Advanced
russosalvrussosalv
5

polish

Audit visual and content details against design system guidelines.

Community
Advanced
concept2cureconcept2cure

motion-discipline

. . .

Community
Advanced