skills.rest
rod97-1
rod97-1COMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Review frontend UI animation and interaction code for polish and consistency.

1|Updated May 29, 2026
Search Tags:#frontend#user experience#animation#ui design#component design#design engineering#css transitions
One-click install
npx skills add https://github.com/rod97-1/design-skills --skill emil-design-eng-rod97-1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/rod97-1/design-skills/tree/main/raw-design-skills/emil-design-eng
Command: npx skills add https://github.com/rod97-1/design-skills --skill emil-design-eng-rod97-1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the common issue of user interfaces feeling unpolished, inconsistent, or lacking the subtle, often unnoticed details that make software feel intuitive, responsive, and delightful to use, which is a key differentiator for product adoption and user satisfaction.

Core Features & Use Cases

  • Structured UI Code Reviews: Provides a standardized markdown table format for reviewing UI code, with clear before/after examples and reasoning for improvements to animation, transitions, and component behavior.
  • Animation Decision Framework: Guides users through a 4-step process to determine if an animation is needed, its purpose, appropriate easing, and duration, plus best practices for spring animations and performance optimization.
  • Component Design Principles: Includes actionable rules for building common UI components like buttons, popovers, tooltips, and toasts, with specific code examples for responsive press states, origin-aware transitions, and accessible motion handling.
  • Use Case Example: A frontend developer working on a new dropdown component can use this skill to get specific fixes for incorrect transform-origin settings, inappropriate easing curves, and overly long animation durations, resulting in a component that feels native and polished.

Quick Start

Use the emil-design-eng skill to review the animation and interaction code for your new dropdown component and get specific, actionable improvements for polish and performance.

Frequently Asked Questions about emil-design-eng

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix unpolished UI animations and inconsistent component transitions in frontend development?▼

You can fix unpolished UI animations by applying a design engineering review framework that evaluates interaction purpose, easing curves, and duration, providing specific before-and-after code improvements for responsive press states and origin-aware transitions.

What is the best way to decide if a CSS transition or JavaScript animation is needed for a UI component?▼

Deciding if an animation is needed involves applying a 4-step decision framework that evaluates the animation's purpose, appropriate easing, duration, and performance impact to ensure it aligns with industry best practices.

How do I implement accessible motion handling and reduced motion support for CSS transitions?▼

Implement accessible motion handling by ensuring your CSS transitions and JavaScript animations include reduced motion support, complying with accessibility preferences by adjusting or disabling movement based on user settings.

How do I review frontend UI code for micro-interaction design and animation performance issues?▼

Review frontend UI code for micro-interaction design using a standardized markdown table format that highlights before and after examples, offering clear reasoning for improvements to component behavior and animation performance.

Why does my dropdown component animation feel unpolished and how can I improve its transform-origin settings?▼

Your dropdown animation feels unpolished due to incorrect transform-origin settings, inappropriate easing curves, or overly long durations, which you can resolve by applying origin-aware component transition principles and optimized timing.

Related Skills

Explore More Design & Creative Skills→
Free-The-AiFree-The-Ai
833

emil-design-eng

Guide UI design with animation, accessibility, and performance principles.

Official
Advanced
B1u3B01tB1u3B01t
191

make-interfaces-feel-better

Enforce typography, surface, shadow, and animation standards in frontend UI code.

Community
Advanced
felvieirafelvieira
22

motion-design

Define token-driven motion systems for UI components using Framer Motion with accessibility support.

Community
Advanced
Festo-WampambaFesto-Wampamba

emil-design-eng

Analyze component design, motion behavior, and interaction feedback for UI polish.

Community
Advanced