Design Engineering
Apply interface craft when building or reviewing UI - motion, easing, timing, springs...
Install
npx skills add rohitg00/pro-workflow --skill design-engineering -g -a claude-code -y- Repository
- rohitg00/pro-workflow2.9k
- Category
- Design
- Updated
- 1mo ago
- License
- See repository
- Context cost
- Lightabout 1,086 tokens
- Runs scripts
- No, instructions only
What it does
Apply interface craft when building or reviewing UI - motion, easing, timing, springs, component feel, and visual foundations. Use when building a component, animation, transition, hover or press state, modal, drawer, toast, or when polishing an interface so it feels right. Says "make this feel better", "add an animation", "polish the UI", "review this component".
design-engineering
In a world where most software works well enough, feel is the differentiator. Most of what makes an interface feel right is detail the user never consciously notices - the aggregate of small correct choices. Build for that aggregate.
Motion decision framework
Answer these in order before writing any animation.
1. Should it animate at all?
The deciding factor is frequency. The more often a user sees it, the less it should move.
| How often the user sees it | Decision |
|---|---|
| 100+ times/day (shortcuts, command palette) | No animation, ever |
| Tens of times/day (hover, list nav) | Remove or drastically reduce |
| Occasional (modals, drawers, toasts) | Standard animation |
| Rare or first-time (onboarding, celebration) | Room for delight |
Never animate a keyboard-initiated action. It repeats all day; animation makes it feel slow and disconnected from the keypress.
2. What is the purpose?
Every animation needs an answer to "why does this move?" Valid ones: spatial consistency (enters and exits the same edge), state change, feedback (a press that confirms the interface heard you), or preventing a jarring appear/disappear. "It looks cool" is not a purpose for anything the user sees often.
3. What easing?
- Entering or exiting ->
ease-out(fast start, feels responsive). - Moving or morphing on screen ->
ease-in-out. - Hover or color change ->
ease. - Constant motion (marquee, progress) ->
linear.
Never use ease-in for UI. It delays the first moment of movement - exactly
when the user is watching - so a 300ms ease-in dropdown feels slower than a
300ms ease-out one. The built-in curves are weak; use stronger custom ones:
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* UI interactions */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer */
