skills.rest
omergulcicek
omergulcicekCOMMUNITY
Explore all skills by this author →
Website𝕏@omergulcicekGitHub

emil-design-eng

Reviews and improves UI animation, easing, and interaction code using design engineering principles.

2|Updated Aug 26, 2025
Search Tags:#frontend#ui review#animation#interaction design#easing#framer motion#css transitions
One-click install
npx skills add https://github.com/omergulcicek/takvim --skill emil-design-eng-omergulcicek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/omergulcicek/takvim/tree/main/web/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/omergulcicek/takvim --skill emil-design-eng-omergulcicek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI code often ships with subtle animation and interaction flaws—sluggish easing, wrong transform origins, non-interruptible keyframes—that make interfaces feel unpolished. This Skill applies Emil Kowalski's design engineering philosophy to review and improve frontend animation and component code. ## Core Features & Use Cases - Animation Decision Framework: Determines whether an element should animate at all, which easing curve to use, and how fast it should run based on interaction frequency and purpose. - Structured UI Code Review: Produces Before/After markdown tables identifying issues like transition: all, scale(0) entries, ease-in on UI elements, and missing :active press states. - Advanced CSS & Motion Techniques: Covers springs, clip-path animations, gesture velocity handling, hardware acceleration, stagger delays, and reduced-motion accessibility. - Use Case: Paste a React dropdown component and receive a table of concrete fixes—custom cubic-bezier curves, origin-aware popover scaling, and sub-300ms durations. ## Quick Start Ask the assistant to review your button, dropdown, or toast component code for animation and interaction issues.

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 instead of ease-in, keep durations under 300ms, and add transform: 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 CSS easings.

When should I use spring animations vs CSS transitions?▼

Use springs for drag interactions, interruptible gestures, and elements that should feel alive, since they maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes, and avoid keyframes for rapidly triggered elements.

Should I animate elements triggered by keyboard shortcuts?▼

No. Keyboard-initiated actions repeat hundreds of times daily, and animation makes them feel slow and disconnected. Remove open/close animations entirely for high-frequency interactions like command palettes.

Why does my Framer Motion animation drop frames under load?▼

Framer Motion's shorthand x/y/scale props run on the main thread via requestAnimationFrame. Use the full transform string like transform: "translateX(100px)" for hardware acceleration, or switch to CSS animations which run off the main thread.

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.

Why should popovers not scale from center?▼

Popovers are anchored to a trigger element, so scaling from center looks disconnected. Set transform-origin to the trigger location or use var(--transform-origin). Modals are the exception and should stay centered.

Related Skills

Explore More Design & Creative Skills→
Aki2022Aki2022

baseline-ui

Enforces opinionated UI constraints for Tailwind CSS and React component code.

Community
Intermediate
erikhazzarderikhazzard
1

design__animating-interfaces

Design motion token systems for web interfaces with easing curves and durations.

Community
Advanced
sohampawar1866sohampawar1866
1

accessibility

Audit interfaces against WCAG principles covering keyboard, screen reader, contrast, and motion.

Community
Intermediate
taxmaxitaxmaxi
1

pick-ui-library

Selects animation and UI primitive libraries for React web interfaces.

Official
Intermediate