skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

emil-design-eng

Reviews and improves UI animation, CSS transitions, and component interaction code.

Updated Jun 22, 2026
Search Tags:#animation#interaction design#easing#framer motion#ui polish#design engineering#css transitions
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill emil-design-eng-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/emil-design-eng
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill emil-design-eng-aicodepro

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 transforms that ignore real-world physics. This Skill encodes Emil Kowalski's design engineering philosophy to catch and fix those invisible details. ## Core Features & Use Cases - UI Code Review: Audits CSS and component code against a structured checklist (transition: all, scale(0) entries, ease-in misuse, missing transform-origin) and returns findings in a required Before/After/Why markdown table. - Animation Decision Framework: Decides whether an element should animate at all, which easing curve to use, and how long it should run based on interaction frequency and purpose. - Implementation Guidance: Covers springs, clip-path reveals, gesture velocity thresholds, GPU-safe transform/opacity animation, prefers-reduced-motion, and Framer Motion hardware-acceleration pitfalls. - Use Case: Paste a dropdown or toast component and receive a table of concrete fixes, such as replacing transition: all 300ms with transition: transform 200ms ease-out and anchoring popover scale to its trigger. ## 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 CSS animations feel more responsive?▼

Use ease-out or a strong custom cubic-bezier curve like cubic-bezier(0.23, 1, 0.32, 1), keep UI durations under 300ms, and animate only transform and opacity. Avoid ease-in, which delays initial movement and feels sluggish.

How to review UI animation code for common mistakes?▼

Check for transition: all, scale(0) entry animations, ease-in on UI elements, centered transform-origin on popovers, and keyframes on rapidly triggered elements. Each issue maps to a concrete fix such as specifying exact properties or using interruptible CSS transitions.

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 UI state changes that need to run off the main thread.

Does Framer Motion hardware accelerate x and y props?▼

No. Framer Motion's shorthand x, y, and scale props run via requestAnimationFrame on the main thread. For hardware acceleration, animate the full transform string such as transform: translateX(100px), or use CSS animations and WAAPI.

Why should popovers not scale from center?▼

Popovers are anchored to a trigger, so scaling from center looks disconnected. Set transform-origin to the trigger location, for example via the Radix UI CSS variable. Modals are the exception and should stay centered.

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→
d-kimusond-kimuson
3

frontend-design

Generate production-grade frontend interfaces from user requirements across React, Vue, and Svelte.

Community
Advanced
nachopalmerinachopalmeri

polish

Corrects UI alignment, spacing, typography, color, interaction states, content, accessibility, responsiveness, and code quality in final artifacts.

Community
Intermediate
dylantarredylantarre
38

motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

Community
Advanced
andrescardonas7andrescardonas7

ui-skills

Enforce Tailwind CSS, framer-motion, and accessible component constraints for UI code.

Community
Intermediate