Developer Utility

AI Design Engineering Skill

Integrate Emil Kowalski's renowned design engineering and animation principles into your AI developer workflows. Install the skill, audit your UI layouts, and explore interactive animations.

Add to Claude Code, Codex, or Cursor

This skill provides structural rules to help AI agents build premium, tactile web interfaces.

npx skills add emilkowalski/skill

1. Easing Curves Comparison

Emil's philosophy stresses that browser defaults like linear or plain ease-in are sluggish. Custom cubic-bezier parameters create immediate feedback and snappier finishes.

Traditional Easing: 400ms duration with ease-in

Design Engineer Curve: 180ms duration with cubic-bezier(0.23, 1, 0.32, 1)Snappy Easing & Faster Perception

2. Tactile Button Scale Feedback

Buttons and pressable UI elements should respond physically to user input. Standard hover elements lack active feedback; adding a subtle scale (0.97) on click elevates tactile response.

Traditional ButtonNo active click transition

Design Engineer ButtonActive scale(0.97) enabled

3. Organic Entry: Never Animate from scale(0)

Scaling a modal or dropdown from 0 makes it appear out of thin air, looking artificial. Standard guidelines suggest starting from a subtle scale (0.9 or 0.95) combined with opacity.

Scale(0) Entry

Scale(0.95) + Opacity Entry

4. Origin-Aware Popovers

Dropdowns and popovers should scale from their respective trigger buttons to maintain structural continuity. In contrast, modals belong at the center.

Settings

This container scales and anchors relative to the button trigger in top-left position.

5. Hold-to-Delete (Clip-path Transition)

Hold transitions must be slow and deliberate (e.g. 2s linear loading) to confirm user intention, but release snaps back quickly (200ms ease-out) to return to zero state.

Press and hold mouse button on the box. Notice the quick snapback on release.