Pre-Flight & Review

The Iron Law: never ship the first version. Build it, then run these checks with fresh, critical eyes. Sources: emil (review format + checklist) and taste-skill (pre-flight matrix).

Review Format (required when reviewing UI code)

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
`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):

Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)

Correct format: A single markdown table with

Before

After

Why

columns, one row per issue found. The “Why” column briefly explains the reasoning.

Motion Review Checklist (from emil)

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)

Full Pre-Flight Matrix (from taste-skill)

Run this matrix before outputting code. This is the last filter.

THIS IS NOT OPTIONAL. Run every box. If any box fails, the output is not done.

If a single checkbox cannot be honestly ticked, the page is not done. Fix it before delivering.