skills.rest
sapatamuku-creator
sapatamuku-creatorCOMMUNITY
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 13, 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/sapatamuku-creator/mastersapatamuku --skill emil-design-eng-sapatamuku-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/sapatamuku-creator/mastersapatamuku/tree/main/releases/v2.7/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill emil-design-eng-sapatamuku-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI code often ships with subtle animation and interaction flaws—sluggish easing, wrong transform origins, non-interruptible keyframes—that compound into interfaces that feel off. This Skill encodes Emil Kowalski's design engineering philosophy to review and fix those details systematically. ## Core Features & Use Cases - Animation Decision Framework: Determines whether an element should animate at all, which easing curve to use, and how fast it should run based on interaction frequency and purpose. - Structured UI Code Review: Produces Before/After/Why markdown tables identifying issues like transition: all, scale(0) entries, ease-in on UI elements, and missing :active states. - Component & Gesture Guidance: Covers springs, clip-path animations, drag momentum, popover transform origins, tooltip delays, stagger timing, and performance rules (transform/opacity only, CSS vs JS under load). - Use Case: Paste a React dropdown component and receive a table of concrete fixes—custom cubic-bezier easing, 150-250ms duration, origin-aware scaling—plus accessibility handling for reduced motion and touch devices. ## Quick Start Review this button and dropdown component code and suggest animation and interaction improvements in a Before/After table.

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 transform: 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.

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 transitions over keyframes for rapidly triggered elements.

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

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

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.

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

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

Related Skills

Explore More Design & Creative Skills→
simstudioaisimstudioai
29.5k

make-interfaces-feel-better

Applies design engineering principles to polish UI components, animations, typography, and surfaces.

Official
Intermediate
aymenhamoudiiaymenhamoudii

animate

Identify usability improvements and apply purposeful animations with accessibility considerations.

Community
Advanced
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate