emil-design-eng
Guides interaction and motion choices based on frequency and purpose.
- Status
- Observed
- Last reviewed
- 2026-10-10
ID: emil-design-eng.
What it does
Before adding motion, assesses how often the action repeats, the purpose of the effect, its curve and duration. Covers buttons, menus, tooltips, toasts and gestures with attention to feedback, origin and interruptibility. Also covers CSS properties, performance, reduced motion and touch devices. In reviews, compares the current implementation, proposal and rationale in a table.
When to use it
Use it as a design engineering perspective when building or refining frequent interactions and seeking clear, consistent responses. It may lead to removing motion when it slows the task. For a structured audit of all motion, use improve-animations.
How to use it
Ask for it by name, or invoke it with /emil-design-eng in Claude Code or $emil-design-eng in Codex. Specify the interaction, usage frequency, expected behavior and existing animation system. Show code or evidence of the result. Request a solution proportionate to the task and relevant checks for interruptions, touch and reduced motion.
What it delivers
- Reasoned motion decision
- Technical proposal with properties and values
- Before/after comparison and relevant checks
Example
The filter menu is opened many times a day: assess whether to animate it and define feedback, duration and behavior when I close it again immediately.
Executable instructions
The skill is installed from the source maintained by emilkowalski; its license applies.
In the workflow
Use the router to choose this capability based on the required outcome.