admin/skills
1
0
Fork 0
mirror of https://github.com/emilkowalski/skills.git synced 2026-07-24 12:44:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace radix ui mentions with base ui

Browse Source
This commit is contained in:
Emil
2026-07-21 12:44:04 +02:00
parent 6bf24434f7
commit 86cf9f7d91
6 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/emil-design-eng/SKILL.md
+2 -7
View File
@@ -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)` |
skills/find-animation-opportunities/SKILL.md
+1 -1
View File
@@ -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**
skills/improve-animations/AUDIT.md
-1
View File
@@ -50,7 +50,6 @@ 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 */
```
**Modals are exempt** — they appear centered; `transform-origin: center` is correct there. Do not report it.
skills/improve-animations/PLAN-TEMPLATE.md
+1 -1
View File
@@ -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);
}
​```
skills/review-animations/SKILL.md
+1 -1
View File
@@ -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)
skills/review-animations/STANDARDS.md
-1
View File
@@ -53,7 +53,6 @@ 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 */
```
**Modals are exempt** — they appear centered in the viewport, keep `transform-origin: center`.