skills.rest
PT-Perkasa-Pilar-Utama
PT-Perkasa-Pilar-UtamaOFFICIAL
Explore all skills by this author →
Website𝕏@perkasaidGitHub

emil-design-eng

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

Updated Sep 16, 2026
Search Tags:#code review#Framer Motion#micro-interactions#UI animation#design engineering#css transitions#easing curves
One-click install
npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill emil-design-eng-pt-perkasa-pilar-utama
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/PT-Perkasa-Pilar-Utama/axentra/tree/main/.claude/skills/emil-design-eng
Command: npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill emil-design-eng-pt-perkasa-pilar-utama

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 applies Emil Kowalski's design engineering philosophy to review and fix UI code so interactions feel responsive and natural. ## Core Features & Use Cases - Animation Decision Framework: Determines whether an element should animate at all based on usage frequency, then selects easing, duration, and spring configuration accordingly. - Structured UI Code Review: Produces a mandatory Before/After/Why markdown table covering issues like transition: all, ease-in misuse, wrong transform-origin, and missing :active states. - Concrete CSS and Motion Patterns: Provides ready patterns for popovers, tooltips, toasts, drawers, drag gestures, stagger animations, clip-path reveals, and hardware-accelerated transforms. - 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 reducing duration from 400ms to 180ms. ## Quick Start Ask the assistant to review your UI component's animation code and list the issues with fixes in a Before/After table.

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 curves for entering elements, keep UI animations under 300ms, and specify exact transition properties instead of `transition: all`. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in 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.

Why does my Framer Motion animation drop frames?▼

Framer Motion's shorthand props like x and y run on the main thread via requestAnimationFrame and are not hardware-accelerated. Use the full transform string such as transform: translateX(100px), or switch to CSS animations which run off the main thread.

Should popovers scale from center or from their trigger?▼

Popovers should scale from their trigger using transform-origin set to the trigger location, for example var(--radix-popover-content-transform-origin) in Radix UI. Modals are the exception and should keep transform-origin: center.

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. Reduced motion means fewer and gentler animations, not zero animation.

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

Skip animation for actions users trigger 100+ times per day, especially keyboard-initiated actions like command palette toggles. Frequent animation makes interfaces feel slow and disconnected from user input.

Related Skills

Explore More Design & Creative Skills→
langgeniuslanggenius

baseline-ui

Reviews and fixes UI code against spacing, typography, animation, and accessibility constraints.

Official
Intermediate
sandrasocialsandrasocial
1

polish

Audits UI and product artifacts for alignment, spacing, consistency, accessibility, and copy issues.

Community
Advanced
lugassawanlugassawan
2

principle-accessibility

Apply WCAG 2.2 AA semantic HTML, ARIA, and keyboard focus requirements to UI code reviews.

Community
Basic
mooch10mooch10
1

emil-design-eng

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

Community
Intermediate