mirror of
https://github.com/emilkowalski/skills.git
synced 2026-08-05 15:54:23 +08:00
format
This commit is contained in:
@@ -40,7 +40,7 @@ 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:
|
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 |
|
| Before | After | Why |
|
||||||
| ------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
| --- | --- | --- |
|
||||||
| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; avoid `all` |
|
| `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 |
|
| `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 |
|
| `ease-in` on dropdown | `ease-out` with custom curve | `ease-in` feels sluggish; `ease-out` gives instant feedback |
|
||||||
@@ -665,7 +665,7 @@ For touch interactions (drawers, swipe gestures), test on physical devices. Conn
|
|||||||
When reviewing UI code, check for:
|
When reviewing UI code, check for:
|
||||||
|
|
||||||
| Issue | Fix |
|
| Issue | Fix |
|
||||||
| -------------------------------------- | --------------------------------------------------------------------------------------------- |
|
| ------------------------------------------ | ---------------------------------------------------------------- |
|
||||||
| `transition: all` | Specify exact properties: `transition: transform 200ms ease-out` |
|
| `transition: all` | Specify exact properties: `transition: transform 200ms ease-out` |
|
||||||
| `scale(0)` entry animation | Start from `scale(0.95)` with `opacity: 0` |
|
| `scale(0)` entry animation | Start from `scale(0.95)` with `opacity: 0` |
|
||||||
| `ease-in` on UI element | Switch to `ease-out` or custom curve |
|
| `ease-in` on UI element | Switch to `ease-out` or custom curve |
|
||||||
|
|||||||
Reference in New Issue
Block a user