# What Is the emil-design-eng Skill? Emil Kowalski’s Design Engineering Philosophy for AI Agents

> Discover the emil-design-eng skill a framework guiding AI agents to build UI with disciplined taste invisible polish and precise animation. Learn Emil Kowalski's design engineering philosophy.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-08

---

**The `emil-design-eng` skill encodes Emil Kowalski’s design-engineering philosophy into a structured framework that guides AI agents to build UI with disciplined taste, invisible polish, and precise animation decisions.**

The `emil-design-eng` skill is a foundational skill in the `emilkowalski/skills` repository that teaches AI agents how to apply design engineering principles to user interface development. Defined in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), this skill moves beyond functional code to emphasize the subtle details that make software "feel right" through trained taste and systematic animation frameworks.

## Core Philosophy of the emil-design-eng Skill

The skill establishes three non-negotiable philosophical tenets that govern all design decisions.

### Taste Is Trained, Not Innate

According to lines 20-23 of [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), good taste is not an innate talent but a **learned instinct** built by studying great work and practicing relentlessly. Agents using this skill must approach UI refinement as a discipline requiring continuous study of high-quality interfaces rather than relying on intuition alone.

### Unseen Details Compound

Lines 26-33 emphasize that **tiny details users never consciously notice** aggregate into a "stunning" experience. The skill trains agents to focus on micro-interactions, subtle transitions, and invisible polish that compound into perceived quality, even when individual elements go unnoticed by end users.

### Beauty Is Leverage

As stated in lines 34-37, excellent defaults, subtle animations, and visual polish serve as **differentiation mechanisms** for products. The skill treats aesthetic refinement not as superficial decoration but as functional leverage that increases user trust and perceived value.

## Interaction Blueprint: The Before/After/Why Format

The skill mandates a specific review format for all UI suggestions. Agents must present changes using a Markdown table with **Before**, **After**, and **Why** columns (lines 38-48).

```markdown
| Before | After | Why |
|--------|-------|-----|
| Static button state | Subtle scale on press | Provides tactile feedback without distracting from task flow |
| Immediate content swap | Cross-fade transition | Prevents jarring visual breaks during state changes |

```

This structured format forces explicit justification for every design decision, ensuring agents articulate the reasoning behind invisible details rather than applying changes arbitrarily.

## Animation Decision Framework

Before writing any animation code, the `emil-design-eng` skill requires agents to answer four mandatory questions defined in the source file.

### 1. Should This Animate at All?

Lines 66-75 establish a **frequency-based matrix** for animation necessity:

- **Keyboard actions** → Never animate (maintains input responsiveness)
- **Occasional UI interactions** → Standard animation acceptable
- **Frequent/repeated actions** → Minimal or no animation to prevent fatigue

### 2. What Is the Purpose?

Every animation must serve one of five specific purposes defined in lines 81-91:

- **Spatial consistency** (maintaining context during layout changes)
- **State indication** (showing active/inactive conditions)
- **Explanation** (teaching users how elements relate)
- **Feedback** (confirming user actions)
- **Prevent jarring changes** (smoothing abrupt visual shifts)

### 3. What Easing Should It Use?

Lines 95-108 mandate **custom cubic-bezier curves** for all UI animations. The skill explicitly forbids the standard CSS `ease-in` timing function for UI work, requiring instead carefully crafted curves that feel natural and responsive.

### 4. How Fast Should It Be?

The fourth question forces agents to consider duration carefully. While the specific guidelines are truncated in the source analysis, the framework requires precise timing decisions that respect the frequency matrix from the first question.

## Summary

- The `emil-design-eng` skill in `emilkowalski/skills` encodes a systematic approach to design engineering for AI agents.
- **Taste is trained** through study and practice, not inherited as innate talent.
- **Invisible details compound** to create stunning user experiences even when individual elements go unnoticed.
- All UI suggestions must follow the **Before/After/Why** table format to ensure disciplined decision-making.
- The **Animation Decision Framework** forces evaluation of necessity, purpose, easing curves (forbidding `ease-in`), and speed before implementation.

## Frequently Asked Questions

### What is the emil-design-eng skill used for?

The `emil-design-eng` skill guides AI agents and developers to build user interfaces that "feel right" by applying Emil Kowalski's design engineering philosophy. It provides structured frameworks for animation decisions, component polish, and invisible details that differentiate high-quality software from functional but uninspired alternatives.

### How does the emil-design-eng skill define good design taste?

According to [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) lines 20-23, the skill defines taste as a **trained instinct** rather than an innate ability. Agents develop taste by studying exceptional work, understanding why specific details work, and practicing relentless refinement until good design decisions become automatic.

### What animation easing does the emil-design-eng skill recommend?

The skill mandates **custom cubic-bezier curves** for all UI animations and explicitly forbids using the standard `ease-in` timing function. This requirement ensures animations feel natural and responsive rather than mechanical or sluggish, as detailed in lines 95-108 of the skill definition.

### Where is the emil-design-eng skill located in the repository?

The skill definition resides at [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) in the `emilkowalski/skills` repository. This Markdown file contains the complete philosophical framework, interaction blueprints, and animation decision matrices that agents use to implement design engineering principles.