emil-design-eng

Name: emil-design-eng
Availability: InStock
Author: xccssdsdsd-source

Apply Emil Kowalski's design principles to UI/UX projects.

Updated Apr 18, 2026

Search Tags:#design philosophy #accessibility #performance optimization #ui/ux design #component building #animation design

Ready to run

npx skills add https://github.com/xccssdsdsd-source/nextengroup-build --skill emil-design-eng-xccssdsdsd-source

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/xccssdsdsd-source/nextengroup-build/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/xccssdsdsd-source/nextengroup-build --skill emil-design-eng-xccssdsdsd-source

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill applies Emil Kowalski's design philosophy to UI/UX, improving user experience and aesthetic quality.

Core Features & Use Cases

Philosophy Application: Implements principles like taste training, unseen details, and beauty leverage.
Animation Framework: Provides guidelines for animation design, including purpose, easing, and speed.
Component Building: Offers best practices for button responsiveness, popovers, tooltips, and more.
CSS Mastery: Covers translateY percentages, scale children, 3D transforms, and clip-path animations.
Gesture Interactions: Delivers guidance on momentum-based dismissal, damping, and pointer capture.
Performance Rules: Focuses on transform and opacity animations, CSS variables, and hardware acceleration.
Accessibility: Includes preferences for reduced motion and touch device hover states.
Sonner Principles: Offers guidelines for building cohesive, user-friendly components.
Stagger Animations: Explains how to stagger animations for a more natural feel.
Debugging: Suggests slow motion testing, frame-by-frame inspection, and real device testing.
Review Checklist: Provides a checklist for reviewing UI code for common issues.
Use Case: For a new project, use this Skill to ensure that UI/UX design adheres to best practices and user-centric philosophy.

Quick Start

Run the emil-design-eng skill to begin applying Emil Kowalski's design philosophy to your UI/UX project.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema

How do I apply UI/UX design philosophy to component building?▼

Apply UI/UX design philosophy to component building by implementing principles like taste training, unseen details, and beauty leverage to improve aesthetic quality and user experience.

What is the best way to design UI animations for performance optimization?▼

The best way to design UI animations for performance optimization is focusing on transform and opacity animations, utilizing CSS variables, and leveraging hardware acceleration for smooth rendering.

How do I ensure accessibility when designing animation frameworks?▼

Ensure accessibility when designing animation frameworks by respecting reduced motion preferences and implementing specific handling for touch device hover states.

How do I create natural stagger animations for UI components?▼

Create natural stagger animations for UI components by following specific guidelines that sequence animation timing, creating a cascading visual effect that feels more organic to the user.

Why do my CSS 3D transforms and clip-path animations look janky?▼

CSS 3D transforms and clip-path animations look janky when hardware acceleration is missing; debug using slow motion testing, frame-by-frame inspection, and real device testing to identify rendering bottlenecks.

Can I use momentum-based dismissal and damping for gesture interactions?▼

Yes, you can use momentum-based dismissal and damping for gesture interactions by applying specific guidance on pointer capture to create natural, physically accurate touch movement.