skills.rest
NarixHine
NarixHineCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

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

Updated Jul 8, 2026
Search Tags:#ui review#interaction design#transitions#micro-interactions#easing#framer motion#css animation
One-click install
npx skills add https://github.com/NarixHine/uni-chem --skill emil-design-eng-narixhine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/NarixHine/uni-chem/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/NarixHine/uni-chem --skill emil-design-eng-narixhine

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 applies Emil Kowalski's design engineering philosophy to review and fix UI animation and interaction code so components feel responsive and cohesive. ## 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. - UI Code Review with Before/After Tables: Audits CSS and component code for issues like transition: all, ease-in on UI elements, missing :active states, and incorrect transform-origin on popovers, presenting fixes in a structured table. - Advanced Techniques: Covers springs, clip-path animations, gesture velocity-based dismissal, stagger delays, hardware acceleration pitfalls in Framer Motion, and reduced-motion accessibility. - Use Case: Paste a dropdown or toast component's CSS and receive a row-by-row review table with corrected transitions, custom cubic-bezier curves, and durations under 300ms. ## Quick Start Review this button and popover CSS for animation and interaction issues and suggest fixes 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 CSS animations feel more responsive?▼

Use ease-out curves so movement starts immediately, keep UI durations 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 easings.

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, rapidly-triggered UI state changes.

Why does my Framer Motion animation drop frames?▼

Framer Motion's shorthand x, y, and scale props run on the main thread via requestAnimationFrame and drop frames under load. 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.

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. Reduced motion means gentler animation, not zero animation.

Related Skills

Explore More Design & Creative Skills→
mweinbachmweinbach
154

shadcn-ui

Create accessible UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
Festo-WampambaFesto-Wampamba

emil-design-eng

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

Community
Advanced
Async-IOAsync-IO

accessibility-check

Audits web components for WCAG 21 AA compliance across five categories.

Official
Intermediate
Cobalt-MoneyCobalt-Money
7

emil-design-eng

Encode design engineering principles for UI polish and animation.

Official
Advanced