Emil Kowalski Design Engineering Skill · Interaction design

Emil Kowalski Skill: Make UI Motion Feel Right

Make every interaction feel intentional before you polish it.

Turn stiff transitions into purposeful motion with Emil Kowalski's emil-design-eng Skill: practical guidance for easing, gestures, springs, and accessible interaction states. This focused edition keeps the MIT source intact and is separate from Apple Design.

View Emil Kowalski’s source

UI motion
Design engineering
Interaction states

About This Skill

Turn stiff transitions into purposeful motion with Emil Kowalski's Design Engineering Skill. Use its guidance for easing, duration, springs, gestures, component states, and accessible interaction paths, then start from one concrete interaction brief.

Built on proven foundations

Trusted Source, Professionally Refined

The original expertise stays intact. Focused refinements make it easier to start, follow the guidance, and know when the work is finished.

Original foundation

Emil Kowalski · commit 85e8e23

The original Skill knowledge, package structure, attribution and original license terms are preserved. Follow the source link to see where this edition began.

View the original project

Antigravity optimization

2 files, one clearer workflow

A source-faithful edition with the improvements explained below. The download includes the original attribution and everything needed to follow the Skill’s guidance.

More useful from the first prompt

What We Improved

Keep the depth you came for. Get clearer starting points, practical guidance and an explicit finish line.

Start with the right workflow

Route a build, review, repair, gesture, or animation request before diving into the full design-engineering guide.

Give every interaction a clear brief

Name feedback, presentation value, interruption, release, device inputs, and reduced-motion boundaries before implementation.

Keep the motion decisions grounded

Use the source rules for easing, springs, gestures, and component states instead of polishing by feel alone.

Know what to check before shipping

End with the chosen branch, changed seam, uncertainty, and next verification step so the interaction has a clear finish line.

Start with One Interaction

1Name the surface, trigger, interaction state, and behavior that must remain intact.
2Route the request as a build, review, repair, or explanation task before choosing a technique.
3Write the Interaction Brief: feedback, presentation value, interruption and release, device inputs, and reduced-motion boundary.
4Use the source review rules and finish with the changed seam, uncertainty, and next verification step.

Example Command

Use Emil Design Engineering to review this popover. Keep its origin-aware motion, keyboard path, and reduced-motion behavior explicit.

Core Capabilities

Task-led design guidance

Start from the actual build, review, repair, gesture, animation, or interaction-state job.

Purposeful motion decisions

Use the source framework for whether to animate, why it animates, and how easing and duration affect feel.

Interruptible interaction states

Carry live values, spring behavior, press feedback, popover origins, and gesture boundaries through the plan.

Reviewable finish

Name keyboard, touch, reduced-motion, performance, changed-seam, and next-verification checks before handoff.

Use Cases

UI motion review

Turn a motion or interaction review into a table of concrete before-and-after decisions and reasons.

Gesture and spring work

Plan interruptible gestures, feedback, release behavior, and spring parameters before implementation.

Component polish

Apply the source rules to buttons, tooltips, popovers, drawers, and other interaction states.

Accessible interaction handoff

Carry keyboard, touch, reduced-motion, and performance constraints into the next implementation step.

SKILL.md

# Emil Design Engineering

This focused edition derives from Emil Kowalski's MIT-licensed `emil-design-eng` Skill at commit 85e8e2363b713506e1d5b6e07a0eb2da66be1bc3. The original 674-line source remains the authority for animation decisions, easing and duration, springs, interruption, component states, performance, and accessibility.

The instruction-level edition adds four narrow navigation contracts: a trigger description for build/review/repair/gesture/animation work, a task-routing pointer after the Initial Response, an Interaction Brief, and a completion/handoff check. It does not add a UI example, screenshot, runtime result, or sibling Apple Design source.

Apple DesignEmil Kowalski’s separate Skill for fluid, gesture-driven web interactions.Frontend DesignA thesis-led workflow for building or reshaping a complete interface.ImpeccableA focused UI refinement and review Skill.

Frequently Asked Questions

What is Emil Kowalski Design Engineering Skill?

It is Emil Kowalski's `emil-design-eng` Skill for building, reviewing, and repairing polished web interfaces, especially animation, gestures, component details, and interaction states.

Is this the same as Emil Kowalski’s Apple Design Skill?

No. Emil Design Engineering and Apple Design are separate SKILL.md files in the same repository. This page is bound to emil-design-eng and does not merge the Apple Design sibling.

Where is the canonical source and how do I install it?

The canonical source is the emilkowalski/skills repository at the pinned revision. Use its documented Skills installer, select emil-design-eng, and invoke it for one concrete interaction or review task.

What changed in this focused edition?

It keeps the original design-engineering knowledge and adds clearer task routing, an Interaction Brief, and a completion/handoff check. These are instruction-level changes, not a claim that a UI has been implemented or passed review.

What kind of UI work is it best for?

Use it for motion reviews, gesture and spring work, button and popover polish, and accessible interaction states where the details of feel matter.

Discussion

0 comments

Trigger Phrases

Use these phrases to activate this skill in your AI coding assistant:

Review this interaction with Emil Design Engineering.Build a polished button or popover interaction.Make this animation interruptible and accessible.Repair the motion in this component.