# Design Engineering

Apply interface craft when building or reviewing UI - motion, easing, timing, springs...

- Repository: https://github.com/rohitg00/pro-workflow (2940 stars)
- Category: Design
- License: see repository
- Last updated: 2026-09-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rohitg00/pro-workflow --skill design-engineering -g -a claude-code -y`
Codex: `npx skills add rohitg00/pro-workflow --skill design-engineering -g -a codex -y`
Cursor: `npx skills add rohitg00/pro-workflow --skill design-engineering -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/pro-workflow --skill design-engineering -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add rohitg00/pro-workflow`

## Description

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".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

```css
--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 */
```

### 4. How fast?

The rest: https://github.com/rohitg00/pro-workflow/blob/HEAD/skills/design-engineering/SKILL.md