emil-design-eng

Encode design engineering principles for CSS transitions and spring animations.

5|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/mohamedgshoaib/reway --skill emil-design-eng-mohamedgshoaib
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill emil-design-eng-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the gap between functional code and high-quality, polished user interfaces by providing a framework for animation, component design, and the invisible details that define professional software.

Core Features & Use Cases

  • Animation Decision Framework: Provides clear rules on when to animate, what easing to use, and how to maintain perceived performance.
  • UI Polish Guidelines: Offers specific technical advice on button responsiveness, popover origins, and CSS transform mastery.
  • Use Case: When building a new dashboard component, use this skill to determine if a hover effect is necessary, select the correct easing curve for a dropdown, and ensure the component feels responsive to user input.

Quick Start

Ask the emil-design-eng skill to review your current CSS transition code for a dropdown component to ensure it follows the design engineering philosophy.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I choose the right easing curve for UI animations?

Choosing the right easing curve for UI animations requires a framework that dictates specific durations and spring physics to maintain perceived performance. This approach ensures component transitions feel responsive and professional.

Why does my CSS transition feel janky during component interaction?

CSS transitions feel janky when not using hardware acceleration standards or correct transform properties for component interaction. Applying design engineering principles to your CSS transitions ensures smooth, performant UI polish.

When do I need to animate hover effects and dropdown components?

You need to animate hover effects and dropdown components when an animation decision framework determines it enhances responsiveness. Specific rules guide when to animate popover origins and UI elements for optimal polish.

What is UI polish in frontend development?

UI polish in frontend development is the application of design engineering principles to bridge the gap between functional code and high-quality interfaces. It involves mastering CSS transforms, button responsiveness, and accessibility-first design.

What is the best way to ensure accessibility-first interface design with animations?

The best way to ensure accessibility-first interface design with animations is to apply standards for animation duration and easing alongside hardware acceleration rules. This guarantees component interactions remain professional and accessible.

Can I use spring animations for dashboard component design?

Yes, you can use spring animations for dashboard component design by applying specific design engineering principles. This framework ensures your dropbox and popover components maintain perceived performance and responsiveness.