skills.rest
Nadav011
Nadav011COMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Reviews and improves UI animations, easing curves, and component interactions using design engineering principles.

Updated Sep 15, 2026
Search Tags:#animation#micro-interactions#easing#framer motion#ui polish#design engineering#css transitions
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill emil-design-eng-nadav011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/emil-design-eng
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill emil-design-eng-nadav011

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 those 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, or clip-path). - Structured UI Review: Audit UI code against a checklist covering transition: all, ease-in misuse, transform-origin errors, missing press states, and Framer Motion hardware-acceleration pitfalls, output as a Before/After/Why markdown table. - Component Craft Guidance: Apply concrete patterns for buttons, popovers, tooltips, toasts, drawers, drag gestures, 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 200ms. ## Quick Start Ask the assistant 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 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 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 because they retarget smoothly and run off the main thread.

Why does my Framer Motion animation drop frames?▼

Framer Motion's shorthand x and y 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 for smooth playback under load.

Should modals scale from their trigger element?▼

No. Popovers should scale from their trigger using transform-origin, but modals are the exception and should keep transform-origin: center because they are not anchored to a specific trigger and appear centered in the viewport.

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, hooks like useReducedMotion let you conditionally disable transform-based motion.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
nattergabrielnattergabriel
2

polish

Fix alignment, spacing, typography, copy, and accessibility issues in frontend interfaces before shipping.

Community
Advanced
vobasevobase
59

polish

Inspect UI components, layouts, and accessibility for pre-release polish issues.

Official
Intermediate
mooch10mooch10
1

emil-design-eng

Reviews UI code and applies animation, easing, and interaction design principles to CSS and React components.

Community
Intermediate