1---2name: moai-ref-ui-polish3description: UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies frontend/UI domain work with production-grade "interface taste" rules. NOT for: backend logic, database design, DevOps, security audits, non-UI work.4---5
6# UI Polish Reference
7
8## Target Agents
9
10- `manager-develop` - Applies polish rules during frontend/UI component implementation (`cycle_type=tdd` or `cycle_type=ddd` context)
11- `/moai review` - UI-design review surface; equivalently available as a per-spawn `Agent(general-purpose)` frontend specialist per `archived-agent-rejection.md` §C
12
13## Core Philosophy
14
15Great interfaces are a collection of small details that compound into a great experience. AI agents frequently miss these details — an `ease-in` easing on an enter animation (should be `ease-out`), a solid border where a semi-transparent shadow reads better, or mismatched radii on nested elements. None of these is catastrophic; together they separate "polished" from "generic".
16
17Before suggesting polish changes, identify the project's existing styling system (design tokens, spacing scale, motion library). Never introduce a second styling system for polish fixes — extend the existing one.
18
19## Geometry and Alignment
20
21| Principle | Rule | Rationale |
22|-----------|------|-----------|
23| Concentric Border Radius | `outerRadius = innerRadius + padding` | Mismatched radii on nested elements is the most common cause of an interface "feeling off" |
24| Optical over Geometric Alignment | When geometric centering looks wrong, align optically | Buttons with icons, play triangles, and asymmetric icons need a manual nudge; geometric center is visually off-center for these shapes |
25
26## Elevation and Structure
27
28| Element | Use | Avoid |
29|---------|-----|-------|
30| Semi-transparent layered `box-shadow` | Depth, elevation, floating surfaces | Solid borders for depth (they read heavy and flat) |
31| Borders | Structure, dividers, separators, selected/focus state | Using shadows for structural separation (ambiguous) |
32
33## Motion
34
35| Pattern | Rule | Common Mistake |
36|---------|------|----------------|
37| Enter animation easing | `ease-out` (decelerate) — element arrives calmly | `ease-in` on enter (element appears to slam into place) |
38| Exit animation easing | `ease-in` (accelerates away), mirroring the enter curve (small fixed `translateY`) | Full-height collapse, or harsher-than-enter motion |
39| Interruptible state changes | CSS `transition` (can be interrupted mid-animation) | `keyframes` for interactive states (cannot interrupt) |
40| Staged entrances | Stagger semantic chunks ~100ms — only for infrequent staged entrances | Staggering routine, high-frequency interactions (feels sluggish) |
41| Contextual icon animation | `opacity`/`scale`/`blur` cross-fade (scale 0.25→1, opacity 0→1, blur 4px→0) | Toggling `visibility` (jarring, no transition) |
42| Press feedback | `scale(0.96)` on click — always 0.96 | Smaller than 0.95 (reads as a bug, not a press) |
43| First-render enter | Skip with `initial={false}` on `AnimatePresence` (or equivalent) | Enter animation fires on page load (disorienting) |
44| Motion restraint | No custom animation on high-frequency interactions; motion is never the only feedback channel | Animating everything (noise, performance cost, accessibility) |
45
46### Motion Easing Values (Web/CSS)
47
48| Case | Value |
49|------|-------|
50| With motion library (Framer Motion et al.) | `transition: { type: "spring", duration: 0.3, bounce: 0 }` |
51| Without motion library (CSS) | `cubic-bezier(0.2, 0, 0, 1)` for the standard "decelerate" curve |
52| Never | `transition: all` — always specify exact properties (`transition-property: scale, opacity`) |
53
54### Motion Accessibility and Cost
55
56| Rule | Detail |
57|------|--------|
58| Reduced-motion branch (required) | Every non-decorative animation needs a `prefers-reduced-motion: reduce` path. Vestibular-disorder users are physically harmed by large-displacement and parallax motion. Reduce to an opacity cross-fade or remove the animation — never merely shorten it. The branch is authored at the same time as the animation, not retrofitted |
59| Animate the compositor, not the layout | `transform` and `opacity` are composited and skip layout and most paint. `width`, `height`, `top`, `left`, `margin`, and `padding` trigger layout on every frame (thrashing), which is why the same visual effect janks when driven by the wrong property. Move with `translate`, resize with `scale` |
60
61> Motion principles behind these rules — the three decision passes, motion layers, the
62> 1/3 rules, stagger budgets, personality archetypes, Disney-adapted ranges, and the
63> emotion-to-motion map — live in `references/motion-principles.md` (L3, load on demand
64> when motion is the substance of the work).
65
66## Typography
67
68| Rule | Implementation (Web/CSS) | When |
69|------|--------------------------|------|
70| Font smoothing | `-webkit-font-smoothing: antialiased` on root layout | macOS targets (sharper rendering) |
71| Tabular numbers | `font-variant-numeric: tabular-nums` | Dynamically updating numbers (counters, timers, prices) — prevents layout shift |
72| Heading wrapping | `text-wrap: balance` | Headings (prevents orphan words, evens line lengths) |
73| Body wrapping | `text-wrap: pretty` | Body paragraphs (avoids orphan widows) |
74
75## Imagery
76
77| Rule | Value |
78|------|-------|
79| Image outline | `1px` subtle outline at low opacity |
80| Outline color (light mode) | pure black — `oklch(0 0 0 / 0.1)` |
81| Outline color (dark mode) | pure white — `oklch(1 0 0 / 0.1)` |
82| Never | Tinted neutral outlines (read as a color choice, not a separation cue) |
83
84## Interaction
85
86| Rule | Value |
87|------|-------|
88| Minimum hit area (touch/mobile) | 44 × 44 px |
89| Minimum hit area (dense desktop) | 40 × 40 px (extend with pseudo-element if the visual is smaller) |
90| Hit area overlap | Never let hit areas overlap |
91| Hover on touch (never load-bearing) | `:hover` does not exist on touch — anything reachable only by hover is simply gone on a phone. Keep affordances visible by default and gate hover styling behind `@media (hover: hover) and (pointer: fine)` |
92| Hover on pointer (always present) | The inverse rule: on a pointer device every clickable surface needs a distinct hover state, transitioning over ~100-200ms. A pointer resting on a target with no feedback reads as broken |
93| `will-change` | Only `transform`, `opacity`, `filter` — and only when first-frame stutter is observed; never `will-change: all` |
94
95## Icons
96
97| Rule | Detail |
98|------|--------|
99| Stroke matches text weight | `1.5px` stroke beside regular (400) text; `2px` beside semibold (600) text |
100| One stroke weight per set | Never mix icon libraries in one interface |
101| State via color, not assets | Icons use `currentColor`; states come from CSS `color`/`opacity` — never separate asset files |
102| Outline vs fill | Outline variant is default; fill variant marks the active state |
103
104## Review Modes
105
106| Mode | Coverage | Finding Cap |
107|------|----------|-------------|
108| `quick` | Primary user path, high-traffic states; HIGH/MEDIUM issues only | 5 |
109| `full` | Entire scope across all categories (Typography, Surfaces, Motion, Icons, Interaction) | 15 |
110
111### Severity
112
113| Level | Meaning |
114|-------|---------|
115| HIGH | Makes interaction inaccessible, misleading, unreadable, or repeatedly disruptive |
116| MEDIUM | Noticeable usability or consistency problem |
117| LOW | Isolated polish issue (full mode only) |
118
119### Verdict
120
121| Verdict | Condition |
122|---------|-----------|
123| Block | Any HIGH finding remains |
124| Needs changes | Only MEDIUM or LOW findings remain |
125| Approve | No actionable findings remain |
126
127> Auditing an existing codebase rather than reviewing a diff? `references/design-audit.md`
128> (L3, load on demand) carries the mechanical detection patterns behind the checklists
129> below — motion gaps, accessibility violations, layout-property animation, and the
130> duration/easing inventories that only surface across a whole codebase. It reports into
131> the severity scale and finding caps above, not a separate one.
132
133<!-- moai:evolvable-start id="rationalizations" -->
134## Common Rationalizations
135
136| Rationalization | Reality |
137|---|---|
138| "The framework handles animations correctly by default" | Framework defaults are generic. Easing, timing, and stagger must be specified per interaction, not inherited. |
139| "A solid border is simpler than a layered shadow" | A solid border communicates structure; depth needs transparency. Using a border for elevation reads heavy and flat. |
140| "Geometric centering is correct, optical adjustment is bikeshedding" | Geometric center is visually off for asymmetric shapes (icons, play triangles). Optical alignment is the difference users feel but cannot name. |
141| "Motion is optional polish, the interface works without it" | Motion is feedback. Without it, state changes are ambiguous (did it register?). But motion must be restrained — animating everything is noise. |
142| "Hit area equals visible area" | A 20px icon needs a 44px hit area on touch. Overlapping or undersized hit areas are the most common mobile usability defect. |
143| "`transition: all` is convenient" | It transitions properties you did not intend (layout, color), causing unexpected animation. Always specify exact properties. |
144
145<!-- moai:evolvable-end -->
146
147<!-- moai:evolvable-start id="red-flags" -->
148## Red Flags
149
150- Enter animation uses `ease-in` (should be `ease-out`)
151- Nested elements with mismatched border radii (no concentric relationship)
152- Solid border used for depth/elevation instead of semi-transparent shadow
153- `transition: all` instead of specific properties
154- Hit area smaller than 40×40px, or overlapping hit areas
155- Dynamically updating numbers without `tabular-nums` (layout shifts on each update)
156- Icon stroke weight mismatched with adjacent text weight
157- Separate icon asset files per state instead of `currentColor` recoloring
158- Page-load enter animation fires without a skip (`initial={false}`)
159- `will-change: all`, or `will-change` set permanently instead of only on stutter
160- Animation with no `prefers-reduced-motion` branch (or a branch that only shortens the duration instead of removing the displacement)
161- Movement driven by `top`/`left`/`width`/`height` where a `transform` would do (layout thrashing every frame)
162
163<!-- moai:evolvable-end -->
164
165<!-- moai:evolvable-start id="verification" -->
166## Verification
167
168- [ ] Enter animations decelerate (`ease-out`); exit animations accelerate (`ease-in`), and entrances run longer than exits
169- [ ] Every non-decorative animation has a `prefers-reduced-motion: reduce` branch
170- [ ] Movement uses `transform`/`opacity`, not `width`/`height`/`top`/`left`
171- [ ] Nested elements follow `outerRadius = innerRadius + padding`
172- [ ] Depth uses semi-transparent shadow; structure uses border
173- [ ] Every `transition` specifies exact properties (no `transition: all`)
174- [ ] Hit areas meet 44×44px (touch) / 40×40px (desktop) minimum, no overlap
175- [ ] Dynamic numbers use `tabular-nums`; headings use `text-wrap: balance`
176- [ ] Icons use one stroke weight matching text; states via `currentColor`, not separate assets
177- [ ] First render skips enter animation (`initial={false}` or equivalent)
178- [ ] High-frequency interactions have no custom animation; motion is not the only feedback
179
180<!-- moai:evolvable-end -->
modu-ai