skills.rest
josippapez
josippapezCOMMUNITY
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 May 5, 2026
Search Tags:#frontend#ui review#animation#interaction design#easing#framer motion#css transitions
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill emil-design-eng-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/emil-design-eng
Command: npx skills add https://github.com/josippapez/ai-setup --skill emil-design-eng-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel sluggish or unpolished because of poor animation choices: wrong easing curves, excessive durations, non-interruptible keyframes, and animations on high-frequency actions. This Skill applies Emil Kowalski's design engineering philosophy to review and fix UI animation and interaction code. ## Core Features & Use Cases - Animation Decision Framework: Determines whether an element should animate at all based on usage frequency, then selects the correct easing curve, duration, and technique (CSS transitions, springs, WAAPI). - UI Code Review with Before/After Tables: Audits CSS and React animation code against a checklist covering transition: all, scale(0) entries, ease-in misuse, transform-origin errors, and missing reduced-motion support, outputting structured markdown tables. - Component Interaction Patterns: Provides concrete implementations for buttons, popovers, tooltips, toasts, drawers, drag gestures, stagger animations, and clip-path reveals. - Use Case: Paste a dropdown component with a 400ms ease-in transition and receive a corrected version using a custom cubic-bezier ease-out curve at 200ms with origin-aware scaling, plus an explanation of why each change improves perceived responsiveness. ## 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 custom cubic-bezier curve like cubic-bezier(0.23, 1, 0.32, 1) instead of ease-in, and keep UI animation durations under 300ms. Ease-out starts fast, giving immediate visual feedback at the moment the user is watching most closely.

When should I use springs vs CSS transitions for animations?▼

Use springs for drag interactions, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. Use CSS transitions for predetermined enter/exit animations and anything that must stay smooth under main-thread load.

Should I animate elements triggered by keyboard shortcuts?▼

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

Why do Framer Motion animations drop frames during page load?▼

Framer Motion's shorthand x, y, and scale props run on requestAnimationFrame on the main thread, so they drop frames when the browser is busy. Use the full transform string like transform: "translateX(100px)" 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-based movement while keeping opacity and color transitions that aid comprehension. In React, use a useReducedMotion hook to conditionally disable positional animation values.

Why should popovers not scale from the center?▼

Popovers are anchored to a trigger element, so scaling from center looks disconnected. Set transform-origin to the trigger location, for example via Base UI's var(--transform-origin). Modals are the exception and should stay centered.

Related Skills

Explore More Design & Creative Skills→
shadcn-labsshadcn-labs
1.1k

vercel-react-view-transitions

Implement native view transition animations in React and Next.js applications.

Official
Advanced
aicodeproaicodepro

emil-design-eng

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

Official
Intermediate
boparaiamritboparaiamrit
5

frontend-audit

Audit frontend codebases for architecture, state management, accessibility, and performance issues.

Community
Advanced
MicrockMicrock

gsap-easing

Implement GSAP animation easing functions with built-in and custom eases.

Community
Intermediate