diff --git a/skills/emil-design-eng/SKILL.md b/skills/emil-design-eng/SKILL.md index 7c8235b..4911235 100644 --- a/skills/emil-design-eng/SKILL.md +++ b/skills/emil-design-eng/SKILL.md @@ -39,12 +39,12 @@ People select tools based on the overall experience, not just functionality. Goo When reviewing UI code, you MUST use a markdown table with Before/After columns. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this: -| Before | After | Why | -| ------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------- | -| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; avoid `all` | -| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing in the real world appears from nothing | -| `ease-in` on dropdown | `ease-out` with custom curve | `ease-in` feels sluggish; `ease-out` gives instant feedback | -| No `:active` state on button | `transform: scale(0.97)` on `:active` | Buttons must feel responsive to press | +| Before | After | Why | +| --- | --- | --- | +| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; avoid `all` | +| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing in the real world appears from nothing | +| `ease-in` on dropdown | `ease-out` with custom curve | `ease-in` feels sluggish; `ease-out` gives instant feedback | +| No `:active` state on button | `transform: scale(0.97)` on `:active` | Buttons must feel responsive to press | | `transform-origin: center` on popover | `transform-origin: var(--radix-popover-content-transform-origin)` | Popovers should scale from their trigger (not modals — modals stay centered) | Wrong format (never do this): @@ -95,15 +95,15 @@ If the purpose is just "it looks cool" and the user will see it often, don't ani ### 3. What easing should it use? Is the element entering or exiting? -Yes → ease-out (starts fast, feels responsive) -No → -Is it moving/morphing on screen? -Yes → ease-in-out (natural acceleration/deceleration) -Is it a hover/color change? -Yes → ease -Is it constant motion (marquee, progress bar)? -Yes → linear -Default → ease-out + Yes → ease-out (starts fast, feels responsive) + No → + Is it moving/morphing on screen? + Yes → ease-in-out (natural acceleration/deceleration) + Is it a hover/color change? + Yes → ease + Is it constant motion (marquee, progress bar)? + Yes → linear + Default → ease-out **Critical: use custom easing curves.** The built-in CSS easings are too weak. They lack the punch that makes animations feel intentional. @@ -664,16 +664,16 @@ For touch interactions (drawers, swipe gestures), test on physical devices. Conn When reviewing UI code, check for: -| Issue | Fix | -| -------------------------------------- | --------------------------------------------------------------------------------------------- | -| `transition: all` | Specify exact properties: `transition: transform 200ms ease-out` | -| `scale(0)` entry animation | Start from `scale(0.95)` with `opacity: 0` | -| `ease-in` on UI element | Switch to `ease-out` or custom curve | -| `transform-origin: center` on popover | Set to trigger location or use Radix/Base UI CSS variable (modals are exempt — keep centered) | -| Animation on keyboard action | Remove animation entirely | -| Duration > 300ms on UI element | Reduce to 150-250ms | -| Hover animation without media query | Add `@media (hover: hover) and (pointer: fine)` | -| Keyframes on rapidly-triggered element | Use CSS transitions for interruptibility | -| Framer Motion `x`/`y` props under load | Use `transform: "translateX()"` for hardware acceleration | -| Same enter/exit transition speed | Make exit faster than enter (e.g., enter 2s, exit 200ms) | -| Elements all appear at once | Add stagger delay (30-80ms between items) | +| Issue | Fix | +| ------------------------------------------ | ---------------------------------------------------------------- | +| `transition: all` | Specify exact properties: `transition: transform 200ms ease-out` | +| `scale(0)` entry animation | Start from `scale(0.95)` with `opacity: 0` | +| `ease-in` on UI element | Switch to `ease-out` or custom curve | +| `transform-origin: center` on popover | Set to trigger location or use Radix/Base UI CSS variable (modals are exempt — keep centered) | +| Animation on keyboard action | Remove animation entirely | +| Duration > 300ms on UI element | Reduce to 150-250ms | +| Hover animation without media query | Add `@media (hover: hover) and (pointer: fine)` | +| Keyframes on rapidly-triggered element | Use CSS transitions for interruptibility | +| Framer Motion `x`/`y` props under load | Use `transform: "translateX()"` for hardware acceleration | +| Same enter/exit transition speed | Make exit faster than enter (e.g., enter 2s, exit 200ms) | +| Elements all appear at once | Add stagger delay (30-80ms between items) |