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

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, 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, 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).

| 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}