skills.rest
hwj123hwj
hwj123hwjCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Apply Emil Kowalski's design engineering principles to UI polish and animation decisions.

4|Updated Jan 28, 2026
Search Tags:#animation#ui design#component design#ui polish#design engineering#animation framework
One-click install
npx skills add https://github.com/hwj123hwj/custom-skills --skill emil-design-eng-hwj123hwj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/hwj123hwj/custom-skills/tree/main/skills/emil-design-eng
Command: npx skills add https://github.com/hwj123hwj/custom-skills --skill emil-design-eng-hwj123hwj

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you create interfaces that feel right by applying Emil Kowalski's design engineering philosophy, focusing on UI polish, component design, and animation decisions.

Core Features & Use Cases

  • UI Polish: Offers insights on taste, unseen details, and beauty as leverage in software design.
  • Component Design: Provides guidelines for button responsiveness, popover scaling, and tooltip animations.
  • Animation Decisions: Delivers a framework for animation purposes, easing, speed, and perceived performance.
  • Spring Animations: Explains when and how to use spring animations for drag interactions and depth effects.
  • Component Building Principles: Covers responsive buttons, non-scale(0) animations, and origin-aware popovers.
  • CSS Transform Mastery: Offers tips on translateY percentages, scale children, 3D transforms, and transform-origin.
  • clip-path for Animation: Demonstrates the use of clip-path for tabs, hold-to-delete patterns, and image reveals.
  • Gesture and Drag Interactions: Discusses momentum-based dismissal, damping at boundaries, and pointer capture.
  • Performance Rules: Emphasizes animating transform and opacity, CSS variables, Framer Motion, and WAAPI.
  • Accessibility: Covers prefers-reduced-motion and touch device hover states.
  • Sonner Principles: Outlines principles for building loved components with good defaults and handling edge cases.
  • Stagger Animations: Explains how to stagger animations for a more natural appearance.
  • Debugging Animations: Suggests slow motion testing, frame-by-frame inspection, and real device testing.
  • Review Checklist: Provides a checklist for reviewing UI code for common issues.

Quick Start

Use the emil-design-eng skill to review your UI code and apply design engineering principles to improve the user experience.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I improve UI polish and component design with animation frameworks?▼

Improving UI polish requires applying design engineering principles to component design and animation decisions. By focusing on taste, unseen details, and leveraging beauty in software, you can create interfaces that feel right and responsive to user interactions.

What is the best way to animate popovers and tooltips without visual glitches?▼

The best way to animate popovers and tooltips is using origin-aware scaling and non-scale(0) animations. Mastering CSS transform-origin and translateY percentages ensures components scale smoothly from their trigger point without causing layout shifts or visual jumps.

When should I use spring animations for drag interactions and depth effects?▼

Spring animations should be used for drag interactions and depth effects when you need natural, momentum-based dismissal and damping at boundaries. They provide a physical feel to gesture interactions, making UI elements respond organically to user touch and pointer capture.

Does this design engineering approach support accessibility and prefers-reduced-motion?▼

Yes, the design engineering approach explicitly covers accessibility by respecting prefers-reduced-motion and handling touch device hover states. This ensures animation decisions and component design remain usable and performant for users with motion sensitivities across different devices.

How do I debug animation performance and test perceived responsiveness?▼

Debug animation performance by conducting slow motion testing, frame-by-frame inspection, and real device testing. Emphasize animating only transform and opacity properties while leveraging CSS variables, Framer Motion, and WAAPI to maintain optimal perceived performance.

Can I use clip-path for tab transitions and image reveal animations?▼

Yes, you can use clip-path for tab transitions, hold-to-delete patterns, and image reveals. This technique allows precise masking of elements during animation, enabling complex UI polish effects that go beyond standard scaling or opacity fades.

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
booklib-aibooklib-ai
35

animation-at-work

Apply Animation at Work guidance to design and review web UI motion.

Official
Advanced
somachaksomachak

animating-react-components-with-motion

Automates GPU-accelerated UI animations for React apps using Motion.dev across multiple frameworks.

Community
Advanced
anilveersingh1308anilveersingh1308

emil-design-eng

Review UI code for animation, interaction responsiveness, and polish.

Community
Advanced