skills.rest
joaopaulotr
joaopaulotrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

emil-design-eng

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

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

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 issues in UI code. ## Core Features & Use Cases - Animation Decision Framework: Decide whether an element should animate at all, which easing curve to use, and how long it should run based on interaction frequency and purpose. - UI Code Review with Before/After Tables: Get structured markdown table reviews covering transitions, transform-origin, spring configs, clip-path patterns, and gesture handling. - Component Polish Patterns: Apply concrete CSS and Framer Motion recipes for buttons, popovers, tooltips, toasts, drawers, and drag interactions, including performance and accessibility rules. - Use Case: Paste a dropdown component with transition: all 300ms ease-in and receive a table of fixes: exact property transitions, ease-out custom curves, origin-aware scaling, and sub-300ms durations. ## 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 for entering elements, keep durations under 300ms, and add scale(0.97) press feedback on buttons. Avoid ease-in, which delays initial movement and makes interfaces feel sluggish.

What easing curve should I use for CSS transitions?▼

Use ease-out for entering elements, ease-in-out for on-screen movement, and linear for constant motion. Prefer custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) since built-in CSS easings are too weak.

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 that x/y shorthand props are not hardware-accelerated.

Why does my popover animation look wrong when opening?▼

The default transform-origin: center makes popovers scale from the middle instead of their trigger. Set transform-origin to the trigger location using Radix UI's --radix-popover-content-transform-origin variable. Modals are the exception and should stay centered.

When should I not animate a UI element?▼

Skip animation for actions repeated 100+ times daily, especially keyboard-initiated ones like command palettes. Animation on high-frequency actions makes the interface feel slow and disconnected from user input.

How do I handle animations for users with reduced motion preferences?▼

Use the prefers-reduced-motion media query to remove transform-based movement while keeping opacity and color transitions. Reduced motion means gentler animation, not zero animation, since some transitions aid comprehension.

Related Skills

Explore More Design & Creative Skills→
rahul-s-bhattrahul-s-bhatt

frontend-design

Design distinctive frontend interfaces with cohesive visual systems and responsive layouts.

Community
Advanced
SL-A-SHSL-A-SH

polish

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

Community
Intermediate
KyaniteLabsKyaniteLabs
3

a11y-pass

Audits rendered web interfaces for WCAG 2.2 AA accessibility compliance and generates a repair ledger.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate