skills.rest
batdorj-s
batdorj-sCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Apply design engineering principles to UI/UX development and code review.

Updated Jul 5, 2026
Search Tags:#best practices#UI/UX#animation#component design#interface development#design engineering
One-click install
npx skills add https://github.com/batdorj-s/tlj --skill emil-design-eng-batdorj-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/batdorj-s/tlj/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/batdorj-s/tlj --skill emil-design-eng-batdorj-s

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of applying design engineering principles to UI/UX development, offering expert guidance and best practices for creating intuitive and polished interfaces.

Core Features & Use Cases

  • Design Engineering Philosophy: Offers insights into the philosophy of Emil Kowalski on UI polish, component design, and animation.
  • Review Format: Provides a specific review format for UI code with Before/After columns to improve code quality.
  • Animation Framework: Delivers a framework for making informed animation decisions, considering frequency, purpose, easing, and speed.
  • Component Building Principles: Outlines principles for building responsive and intuitive components.
  • CSS Transform Mastery: Explains advanced CSS techniques for transforming UI elements effectively.
  • clip-path for Animation: Demonstrates how to use clip-path for creating dynamic and engaging animations.
  • Gesture and Drag Interactions: Guides on implementing momentum-based dismissal, damping, and pointer capture for interactive elements.
  • Performance Rules: Offers best practices for performance optimization in UI animations.
  • Accessibility: Provides guidance on creating accessible designs with reduced motion preferences and touch device considerations.
  • The Sonner Principles: Shares principles for building loved components with developer experience, defaults, naming, edge case handling, and more.
  • Stagger Animations: Explains how to create natural animations for multiple elements entering a UI.
  • Debugging Animations: Offers tips for debugging animations using slow motion and frame-by-frame inspection.
  • Review Checklist: Provides a checklist for reviewing UI code to ensure adherence to best practices.

Quick Start

To get started, activate the 'emil-design-eng' skill and review your UI code with the provided framework.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
What are the best practices for UI animation and component design?▼

UI animation and component design best practices involve using a framework for animation decisions based on frequency, purpose, easing, and speed, alongside applying CSS transforms and clip-path for creating intuitive and polished interfaces.

How do I create stagger animations for multiple elements entering a UI?▼

To create stagger animations for multiple elements entering a UI, you apply specific animation principles that sequence the entrance of elements naturally, utilizing techniques like clip-path and CSS transforms for dynamic and engaging visual effects.

How do I implement momentum-based dismissal and damping for drag interactions?▼

Implementing momentum-based dismissal and damping for drag interactions involves using pointer capture and specific gesture interaction principles to ensure responsive and intuitive component behavior.

Can I use this design engineering framework for accessible UI with reduced motion preferences?▼

Yes, this design engineering framework provides explicit guidance for creating accessible UI designs, including implementing reduced motion preferences and handling touch device considerations for optimized interactions.

What is the best way to review UI code for interface development?▼

The best way to review UI code for interface development is using a specific review format with Before/After columns and a dedicated checklist to ensure adherence to design engineering best practices and component quality.

Why does my UI animation performance drop, and how do I debug it?▼

UI animation performance drops often violate performance optimization rules; you can debug animations using slow motion and frame-by-frame inspection to identify rendering issues and improve component smoothness.

Related Skills

Explore More Design & Creative Skills→
JaiminVadadoriyaJaiminVadadoriya
1

emil-design-eng

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

Community
Intermediate
markus41markus41
18

Framer Motion Skill

Create declarative animations and gesture recognition for React applications with Framer Motion.

Community
Intermediate
remiconnessonremiconnesson

emilkowal-animations

Apply animation best practices to React and Framer Motion interfaces.

Community
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced