15 Skills to Refine UI Motion and Interaction Skills For Designers and Engineers

Decide whether it fits your interface

What problem does it solve?

An AI-built interface can work yet still feel awkward: a dropdown opens slowly, a popover grows from the wrong point, or a button stays in its hover state after a tap on a phone. This collection turns Emil Kowalski’s design engineering experience into 15 skills for building motion, reviewing code, fixing interactions, and planning improvements.

The question is not just how something should move, but whether it should move at all. Frequent actions need immediate feedback, touch and mouse need different treatment, and reduced-motion preferences need to be respected. The collection gives you methods to apply inside your own project.

How does it compare with similar entries on this site?

Entry	Main purpose	What this collection focuses on
Looks Like AI Is Building It	Reveal a ready interface with wireframes, scanning, and staged rendering	Build or review everyday component motion, including deciding whether animation belongs there
Let the Camera Follow Each Step	Make an animated walkthrough of a product workflow	Improve the interface people operate: dropdowns, dialogs, and touch feedback

Choose the first entry for that specific generation effect, or the second for a workflow demonstration. Use this collection when you want an existing product to feel better as people click, open, close, or drag its components.

Choose a skill for the task

The repository currently contains these 15 skills. Their names identify what to ask your coding agent to use; they are not terminal commands to run in sequence.

Skill	When to use it
emil-design-eng	Apply broader guidance on UI polish, component design, and motion decisions
animate	Build web motion and choose properties, curves, timing, and interruption behavior
review-animations	Review existing motion code and explain problems and fixes
improve-animations	Audit motion across a codebase and prioritize implementation plans
find-animation-opportunities	Find worthwhile motion opportunities and reject unnecessary animation
animation-performance	Investigate stutter, dropped frames, and unnecessary painting
animation-vocabulary	Turn a loose description of an effect into the right motion term
apple-design	Apply Apple-inspired gesture, motion, and interface principles to the web
mobile-native	Fix mobile-web touch, viewport, safe-area, and input behavior
prototype	Build distinct UI candidates and compare them with a live switcher
break-ui	Test layouts with plausible worst-case data and report what breaks
pick-ui-library	Choose a library for a task such as toasts, charts, or drag and drop
ask-sonner	Set up, style, or troubleshoot the Sonner React toast library
animate-expo	Build React Native / Expo gestures, transitions, and haptic feedback
write-swift	Write or review Swift, including concurrency, performance, and tests

review-animations reviews rather than edits, and find-animation-opportunities only proposes motion. The normal improve-animations workflow inspects source, confirms priorities, and writes plans; executing a plan is a separate step. break-ui prepares development-only test data and a preview toggle, then reports problems before you choose fixes. Decide whether you want advice, a plan, or a code change before choosing a skill.

Install the skills and improve a dropdown

Install what this exercise needs

Start with a frontend project you can run locally that already has a dropdown. The installer, skills CLI, currently requires Node.js 22.20 or newer. That requirement belongs to the installer; prepare the app’s own runtime according to its project configuration.

1. Run the author’s installation command in a terminal at the project root:

npx skills@latest add emilkowalski/skills

2. Select review-animations and animate, then choose the coding agent you actually use. Installation targets the current project by default. You do not need every skill for this exercise.
3. List the project’s installed skills and check that both names appear:

npx skills@latest list

Open your coding agent in the same project. Include the component path and a concrete task instead of sending a skill name alone. If the agent does not find the skill, check that you installed it for the agent you are using, then reopen the session.

Review before editing

Run the app and open and close the dropdown once. Note what feels wrong. The two requests below were written for this tutorial; replace the bracketed paths with your own. They are not bundled repository commands or recorded execution results.

Send the first request to your coding agent:

Use review-animations to review [dropdown component path] and its directly related styles.
Read the component and existing motion tokens first. Do not edit code.
Check whether opening feels slow, whether the menu expands from its trigger,
whether rapid toggles interrupt smoothly, and how keyboard input and reduced motion are handled.
Report code-backed findings in a Before / After / Why table with file and line references.
If nothing needs changing, say so. Do not add motion for its own sake.

Check that the report refers to your component and cites real styles. If the reported code is not present, ask the agent to verify it. For example, transition: all can animate properties that were never meant to change. The fix should address the affected properties and interaction, rather than blindly replacing all with a fixed snippet.

Apply one change and check the result

Choose a confirmed issue, such as a menu that opens slowly and seems to grow from the center of the page. Then send:

Use animate to change only the open/close motion in [dropdown component path].
A mouse click should get immediate feedback, and the menu should expand naturally near its trigger.
Reuse the project’s existing timing and easing tokens where appropriate; explain any exception.
Rapid toggles should retarget from the current state without snapping back to the start.
Keyboard-triggered state changes should be immediate. Disable translation and scaling in reduced-motion mode.
Preserve copy, layout, options, close behavior, focus management, and keyboard controls.
Explain the changed files, the tradeoffs, and how to open a preview.

1. Start the preview using the project’s normal command. Open and close the menu with both mouse and keyboard, checking selection, dismissal, and focus returning to the trigger.
2. Toggle it rapidly several times. Look for smooth changes of direction from the current state, rather than watching only a single uninterrupted animation.
3. Enable reduced motion in the system or browser developer tools. Check that translation and scaling are disabled while the content remains visible and the controls remain usable.
4. Use review-animations again on the change. Code review can identify concrete issues; judge the visual rhythm in the preview too.

If a phone tap leaves a hover style stuck, use mobile-native. If animation drops frames while the page is busy, use animation-performance. There is no need to invoke every skill on each component.

Apply the method to your own components

For a dialog, toast, or card, keep the sequence: describe the use case, review, then make a local change. Fill in this brief for your coding agent:

Target: [component path and name].
Use case: [what people do, how often, and whether they use mouse, touch, or keyboard].
Current problem: [the state change that feels slow or abrupt, and why].
Improve: [feedback speed, origin, gesture interruption, or mobile behavior].
Preserve: [copy, data, layout, business logic, and accessible controls].
First use [chosen skill] to give evidence-backed recommendations.
After I select an item, implement a local change.
Deliver preview instructions and the behaviors I should check manually.

Toasts may arrive in rapid succession, so check how messages enter, make room, and dismiss. A dialog needs attention to focus, its backdrop, and entry and exit. Do not copy a dropdown’s anchored origin into a centered dialog, or apply a one-time demo entrance to every keystroke.

The collection is MIT licensed. For later additions or changes, consult the repository README and the individual skill instructions.