skills.rest
beelabstudio
beelabstudioOFFICIAL
Explore all skills by this author →
GitHub

emil-design-eng

Reviews and improves UI animations, component interactions, and CSS transitions using design engineering principles.

Updated Mar 14, 2026
Search Tags:#interaction design#micro-interactions#framer motion#ui animation#design engineering#css transitions#easing curves
One-click install
npx skills add https://github.com/beelabstudio/ai --skill emil-design-eng-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/emil-design-eng
Command: npx skills add https://github.com/beelabstudio/ai --skill emil-design-eng-beelabstudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel sluggish or unpolished because of subtle animation mistakes: wrong easing curves, excessive durations, non-interruptible keyframes, and animations on high-frequency actions. This Skill encodes Emil Kowalski's design engineering philosophy to help you diagnose and fix these issues 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 Code Review: Get feedback in a required Before/After/Why markdown table covering issues like transition: all, scale(0) entries, ease-in on UI elements, and missing press states. - Component & Gesture Guidance: Apply concrete patterns for popovers, tooltips, toasts, drawers, drag-to-dismiss with velocity detection, 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 UI animations under 300ms, and add press feedback like transform: scale(0.97) on :active. Avoid ease-in, which delays initial movement and makes interfaces feel sluggish.

What easing curve should I use for dropdowns and popovers?▼

Use a strong custom ease-out such as cubic-bezier(0.23, 1, 0.32, 1) for entering elements. Built-in CSS easings are too weak; resources like easing.dev offer stronger variants of standard curves.

Should I use CSS transitions or Framer Motion for animations?▼

Use CSS transitions for predetermined animations since they run off the main thread and stay smooth under load. Use Framer Motion springs for interruptible, gesture-driven interactions, but note its x/y shorthand props are not hardware-accelerated.

Why does my popover animation look wrong when it opens?▼

The default transform-origin: center makes popovers scale from the middle instead of their trigger. Set transform-origin to the trigger location, and start from scale(0.95) with opacity 0 rather than scale(0).

When should I not animate a UI element at all?▼

Skip animation for actions performed 100+ times daily, such as keyboard shortcuts and command palette toggles. Frequent animation makes repeated actions feel slow and disconnected from user input.

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

Use the prefers-reduced-motion media query to remove transform-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→
ambush0421ambush0421

frontend-ui-ux-engineer

Redesign React components with improved visual hierarchy and interaction design.

Community
Intermediate
SL-A-SHSL-A-SH

polish

Inspect frontend UI components for alignment, spacing, consistency, and detail issues.

Community
Intermediate
Async-IOAsync-IO

accessibility-check

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

Official
Intermediate
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate