emil-design-eng

Review UI component animations and interactions using design engineering principles.

2|Updated May 24, 2026
One-click install
npx skills add https://github.com/Nuu-maan/portfolio-template --skill emil-design-eng-nuu-maan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/Nuu-maan/portfolio-template/tree/main/.claude/skills/emil-design-eng
Command: npx skills add https://github.com/Nuu-maan/portfolio-template --skill emil-design-eng-nuu-maan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill addresses the challenge of creating intuitive, polished UI/UX designs by providing a structured approach to design engineering principles and best practices.

Core Features & Use Cases

  • Design Engineering Philosophy: Offers insights into UI polish, component design, and animation decisions inspired by Emil Kowalski.
  • Review Format: Provides a standardized method for reviewing UI code with a markdown table format.
  • Animation Framework: Offers a decision-making framework for animations, considering purpose, timing, and easing.
  • Component Building Principles: Shares best practices for building responsive, accessible, and aesthetically pleasing components.
  • CSS Transform Mastery: Delivers deep knowledge on CSS transforms for animations and interactions.
  • Gesture and Drag Interactions: Offers guidance on implementing smooth and intuitive gesture-based interactions.
  • Performance Rules: Lists key performance considerations for UI animations and interactions.
  • Accessibility: Provides considerations for creating accessible UI/UX designs.
  • The Sonner Principles: Shares principles for building loved components based on the Sonner library.
  • Stagger Animations: Explains how to stagger animations for a more natural effect.
  • Debugging Animations: Offers tips for debugging animations effectively.

Quick Start

Use the emil-design-eng skill to review the design of a UI component and provide feedback on its animations and interactions.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I review UI code for animation and interaction quality?

To review UI code effectively, use a standardized markdown table format to evaluate component design, animation purpose, timing, and easing against design engineering principles. This structured approach identifies areas lacking polish and ensures interactions feel intuitive.

What is the best way to decide on UI animation timing and easing?

The best way to decide on UI animation timing and easing is to apply a dedicated animation decision-making framework. This framework evaluates the specific purpose of the animation to determine the appropriate duration and easing curves for a natural feel.

How do I build accessible and responsive UI components?

To build accessible and responsive UI components, follow established component building principles that prioritize aesthetic flexibility alongside strict accessibility considerations. This ensures components function correctly across different devices and user needs.

Why do my stagger animations look unnatural and how can I fix them?

Stagger animations look unnatural when their timing lacks proper sequencing. You can fix them by applying stagger animation principles that adjust the delay and duration of individual elements to create a smooth, cascading visual effect.

How do I debug UI animations that are not performing smoothly?

To debug UI animations that lack smooth performance, apply specific debugging techniques alongside established performance rules for UI interactions. This process isolates rendering bottlenecks and verifies CSS transforms are optimized.

Can I use design engineering principles to improve gesture-based drag interactions?

Yes, you can use design engineering principles to implement smooth and intuitive gesture-based drag interactions. This approach provides specific guidance on handling user input and movement calculations to ensure a responsive UI experience.