diff --git a/skills/emil-design-eng/SKILL.md b/skills/emil-design-eng/SKILL.md index 4911235..1e14a50 100644 --- a/skills/emil-design-eng/SKILL.md +++ b/skills/emil-design-eng/SKILL.md @@ -45,7 +45,7 @@ When reviewing UI code, you MUST use a markdown table with Before/After columns. | `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) | +| `transform-origin: center` on popover | `transform-origin: var(--transform-origin)` | Popovers should scale from their trigger (not modals — modals stay centered) | Wrong format (never do this): @@ -236,11 +236,6 @@ Start from `scale(0.9)` or higher, combined with opacity. Even a barely-visible Popovers should scale in from their trigger, not from center. The default `transform-origin: center` is wrong for almost every popover. **Exception: modals.** Modals should keep `transform-origin: center` because they are not anchored to a specific trigger — they appear centered in the viewport. ```css -/* Radix UI */ -.popover { - transform-origin: var(--radix-popover-content-transform-origin); -} - /* Base UI */ .popover { transform-origin: var(--transform-origin); @@ -669,7 +664,7 @@ When reviewing UI code, check for: | `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) | +| `transform-origin: center` on popover | Set to trigger location or use Base UI's `var(--transform-origin)` (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)` | diff --git a/skills/find-animation-opportunities/SKILL.md b/skills/find-animation-opportunities/SKILL.md index 0ebba8a..0f114a2 100644 --- a/skills/find-animation-opportunities/SKILL.md +++ b/skills/find-animation-opportunities/SKILL.md @@ -80,7 +80,7 @@ Sweep for these seams — each is a known class of genuine opportunity: - List items added/removed with no bridge (and the list isn't high-frequency) → enter/exit transitions; CSS transitions, not keyframes, so rapid triggers retarget smoothly **Missing spatial story** -- Panels, popovers, menus that appear with no connection to their trigger → scale in with `transform-origin` at the trigger (Radix: `var(--radix-popover-content-transform-origin)`; Base UI: `var(--transform-origin)`); modals are exempt — they stay centered +- Panels, popovers, menus that appear with no connection to their trigger → scale in with `transform-origin` at the trigger (Base UI: `var(--transform-origin)`); modals are exempt — they stay centered - Dismissable surfaces (toasts, sheets) that exit a different way than they entered → symmetric paths; `translateY(100%)` percentages, not hardcoded pixels **Group entrances** diff --git a/skills/improve-animations/AUDIT.md b/skills/improve-animations/AUDIT.md index 02b2367..9405615 100644 --- a/skills/improve-animations/AUDIT.md +++ b/skills/improve-animations/AUDIT.md @@ -50,8 +50,7 @@ Hunt for: `ease-in` anywhere, bare `ease`/`linear` on entrances, durations > 300 - **Never `scale(0)`** — nothing in the real world appears from nothing. Target: `scale(0.9–0.97)` + `opacity: 0`. - **Popovers/dropdowns/tooltips scale from their trigger**, not center: ```css - .popover { transform-origin: var(--radix-popover-content-transform-origin); } /* Radix */ - .popover { transform-origin: var(--transform-origin); } /* Base UI */ + .popover { transform-origin: var(--transform-origin); } /* Base UI */ ``` **Modals are exempt** — they appear centered; `transform-origin: center` is correct there. Do not report it. - **Press feedback**: `transform: scale(0.97)` on `:active` with `transition: transform 160ms ease-out`. Keep it subtle (0.95–0.98). diff --git a/skills/improve-animations/PLAN-TEMPLATE.md b/skills/improve-animations/PLAN-TEMPLATE.md index 0eb63f7..239026b 100644 --- a/skills/improve-animations/PLAN-TEMPLATE.md +++ b/skills/improve-animations/PLAN-TEMPLATE.md @@ -30,7 +30,7 @@ configs, media queries. Never "use a nicer easing": /* target */ .dropdown { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); - transform-origin: var(--radix-dropdown-menu-content-transform-origin); + transform-origin: var(--transform-origin); } ​``` diff --git a/skills/review-animations/SKILL.md b/skills/review-animations/SKILL.md index b1cd9b1..56f4ed7 100644 --- a/skills/review-animations/SKILL.md +++ b/skills/review-animations/SKILL.md @@ -86,7 +86,7 @@ A single markdown table. One row per issue. Never a "Before:/After:" list. | `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; `all` animates unintended properties off-GPU | | `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing appears from nothing — `scale(0)` looks like it came from nowhere | | `ease-in` on dropdown | `ease-out` + custom curve | `ease-in` delays the moment the user watches most; feels sluggish | -| `transform-origin: center` on popover | `var(--radix-popover-content-transform-origin)` | Popovers scale from their trigger, not center (modals are exempt) | +| `transform-origin: center` on popover | `var(--transform-origin)` (Base UI) | Popovers scale from their trigger, not center (modals are exempt) | ### Part 2 — Verdict (REQUIRED) diff --git a/skills/review-animations/STANDARDS.md b/skills/review-animations/STANDARDS.md index e48e6a8..863ea12 100644 --- a/skills/review-animations/STANDARDS.md +++ b/skills/review-animations/STANDARDS.md @@ -53,8 +53,7 @@ Find curves at [easing.dev](https://easing.dev/) or [easings.co](https://easings - **Never `scale(0)`.** Start from `scale(0.9–0.97)` + `opacity: 0`. Nothing in the real world appears from nothing. - **Origin-aware popovers.** Scale from the trigger, not center: ```css - .popover { transform-origin: var(--radix-popover-content-transform-origin); } /* Radix */ - .popover { transform-origin: var(--transform-origin); } /* Base UI */ + .popover { transform-origin: var(--transform-origin); } /* Base UI */ ``` **Modals are exempt** — they appear centered in the viewport, keep `transform-origin: center`. - **Button press feedback.** `transform: scale(0.97)` on `:active`, `transition: transform 160ms ease-out`. Subtle (0.95–0.98). Applies to any pressable element.