Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →modu-ai/moai-ref-ui-polish
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.
Passed 20 of 23 test cases with the skill, and 14 of 23 without it.
and 7 more in the full report
6 fixed14 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are running a full UI review across all typography, motion, icons, and interaction states in our app using full mode. What severity levels are reviewed in full mode, and what is the maximum finding count cap?
| Checked | Without skill | With skill |
|---|---|---|
| Covers HIGH, MEDIUM, and LOW severity findings in full mode | Passed | Passed |
| Sets maximum finding limit to 15 issues for full mode | Missed | Passed |
The instructions your model reads when the skill loads.
manager-develop - Applies polish rules during frontend/UI component implementation (cycle_type=tdd or cycle_type=ddd context)/moai review - UI-design review surface; equivalently available as a per-spawn Agent(general-purpose) frontend specialist per archived-agent-rejection.md §CGreat 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".
Before 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.
| Principle | Rule | Rationale |
|---|---|---|
| Concentric Border Radius | outerRadius = innerRadius + padding | Mismatched radii on nested elements is the most common cause of an interface "feeling off" |
| 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 |
| Element | Use | Avoid |
|---|---|---|
Semi-transparent layered box-shadow | Depth, elevation, floating surfaces | Solid borders for depth (they read heavy and flat) |
| Borders | Structure, dividers, separators, selected/focus state | Using shadows for structural separation (ambiguous) |
| Pattern | Rule | Common Mistake |
|---|---|---|
| Enter animation easing | ease-out (decelerate) — element arrives calmly | ease-in on enter (element appears to slam into place) |
| Exit animation easing | ease-in (accelerates away), mirroring the enter curve (small fixed translateY) | Full-height collapse, or harsher-than-enter motion |
| Interruptible state changes | CSS transition (can be interrupted mid-animation) | keyframes for interactive states (cannot interrupt) |
| Staged entrances | Stagger semantic chunks ~100ms — only for infrequent staged entrances | Staggering routine, high-frequency interactions (feels sluggish) |
| Contextual icon animation | opacity/scale/blur cross-fade (scale 0.25→1, opacity 0→1, blur 4px→0) | Toggling visibility (jarring, no transition) |
| Press feedback | scale(0.96) on click — always 0.96 | Smaller than 0.95 (reads as a bug, not a press) |
| First-render enter | Skip with initial={false} on AnimatePresence (or equivalent) | Enter animation fires on page load (disorienting) |
| Motion restraint | No custom animation on high-frequency interactions; motion is never the only feedback channel | Animating everything (noise, performance cost, accessibility) |
test cases passed, vs 14 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.