# Make Interfaces Feel Better > UI polish skill — 16 design engineering principles for making interfaces feel polished and professional. Covers typography, surfaces, animations, and performance. Triggers on UI review, design details, "make it feel better", "feels off", 界面打磨, UI细节, border radius, shadows, stagger animations, enter/exit transitions, optical alignment, font smoothing, tabular numbers, image outlines. - Skill: `zhouyinlong-lab/make-interfaces-feel-better` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add zhouyinlong-lab/make-interfaces-feel-better` - Raw SKILL.md: https://api.skillmd.com/api/skills/zhouyinlong-lab/make-interfaces-feel-better/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: zhouyinlong-lab (https://skillmd.com/u/zhouyinlong-lab) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/zhouyinlong-lab/make-interfaces-feel-better --- # Details That Make Interfaces Feel Better Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code. ## Quick Reference | Category | Reference | When to Use | |----------|-----------|-------------| | Typography | [typography.md](references/typography.md) | Text wrapping, font smoothing, tabular numbers | | Surfaces | [surfaces.md](references/surfaces.md) | Border radius, optical alignment, shadows, image outlines, hit areas | | Animations | [animations.md](references/animations.md) | Interruptible animations, enter/exit transitions, icon animations, scale on press | | Performance | [performance.md](references/performance.md) | Transition specificity, `will-change` usage | ## Core Principles ### 1. Concentric Border Radius `outerRadius = innerRadius + padding`. Mismatched radii on nested elements is the most common thing that makes interfaces feel off. ### 2. Optical Over Geometric Alignment When geometric centering looks off, align optically. Buttons with icons need manual adjustment — `icon-side padding = text-side padding - 2px`. ### 3. Shadows Over Borders Layer multiple transparent `box-shadow` values for natural depth. Shadows adapt to any background; solid borders don't. ### 4. Interruptible Animations Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once. ### 5. Split and Stagger Enter Animations Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay. ### 6. Subtle Exit Animations Use a small fixed `translateY(-12px)` instead of full height. Exits should be softer and shorter than enters. ### 7. Contextual Icon Animations Animate icons with `opacity`, `scale` (0.25→1), and `blur` (4px→0). Use spring with bounce=0 if Motion available; CSS cross-fade if not. ### 8. Font Smoothing Apply `-webkit-font-smoothing: antialiased` on macOS for crisper text. ### 9. Tabular Numbers Use `font-variant-numeric: tabular-nums` for dynamically updating numbers to prevent layout shift. ### 10. Text Wrapping `text-wrap: balance` on headings (≤6 lines). `text-wrap: pretty` on body text to avoid orphans. ### 11. Image Outlines Add `1px` outline: pure black `rgba(0,0,0,0.1)` in light mode, pure white `rgba(255,255,255,0.1)` in dark mode. Never use tinted neutrals. ### 12. Scale on Press `scale(0.96)` on click gives buttons tactile feedback. Never below `0.95`. Add `static` prop to disable when distracting. ### 13. Skip Animation on Page Load `initial={false}` on `AnimatePresence` for default-state elements. Verify it doesn't break intentional entrance animations. ### 14. Never Use `transition: all` Always specify exact properties. Tailwind: `transition-transform` or `transition-[scale,opacity]`. ### 15. Use `will-change` Sparingly Only for `transform`, `opacity`, `filter` — GPU-compositable properties. Never `will-change: all`. Only add when you notice first-frame stutter. ### 16. Minimum Hit Area 44×44px for touch/mobile, ≥40×40px for dense desktop. Extend with pseudo-element. Never let two hit areas overlap. ## Common Mistakes | Mistake | Fix | |---------|-----| | Same border radius on parent and child | `outerRadius = innerRadius + padding` | | Icons look off-center | Adjust optically with padding or fix SVG | | Hard borders between sections | Use layered `box-shadow` with transparency | | Jarring enter/exit animations | Split, stagger, and keep exits subtle | | Numbers cause layout shift | Apply `tabular-nums` | | Heavy text on macOS | Apply `antialiased` to root | | Animation plays on page load | Add `initial={false}` to `AnimatePresence` | | `transition: all` | Specify exact properties | | First-frame animation stutter | Add `will-change: transform` (sparingly) | | Tiny hit areas | Extend with pseudo-element to 44×44px | ## Review Output Format Always present changes as a markdown table with **Before** and **After** columns. Group by principle with a heading. Only include principles where changes were made — omit empty tables. ### Example #### Concentric border radius | Before | After | |--------|-------| | `rounded-xl` on card + `rounded-xl` on inner button (`p-2`) | `rounded-2xl` on card, `rounded-lg` on inner button | #### Scale on press | Before | After | |--------|-------| | `