Ui Feel

UI Feel

Overview

Great interfaces compound from small craft details. After tokens + structure + anti-slop, apply this skill so the UI doesn’t just look correct — it feels right.

Adapted from make-interfaces-feel-better (MIT) for this pack.

When to use

• Finishing /ui builds (after anti-ai-slop)
• /polish / “rapihin detail” / “feels off” / “make it feel better”
• Design audits that go beyond slop into craft
• Hover, press, enter/exit, icon swap micro-interactions

When to skip

• Pure token/theme pick with no UI surface
• Backend-only or copy-only edits
• User asked for a one-line fix unrelated to feel

Pack fit

| Skill | Job | |-------|-----| | anti-ai-slop | Kill generic AI aesthetic | | ui-feel | Micro craft that compounds into polish | | motion | Larger animation systems (Framer/GSAP timelines) | | accessibility | Labels, keyboard, contrast (hit areas overlap here) |

Conflict rules (this pack wins):

• Prefer subtle layered transparent shadows — not heavy multi-layer card stacks (anti-ai-slop)
• Image outlines are optional (media cards / product shots), not mandatory on every ``
• Keep project fonts; only add smoothing / wrap / tabular-nums
• Icons stay Reicon unless project already standardized another lib

Core principles (quick)

1. Concentric radius — outer = inner + padding
2. Optical > geometric alignment for icons in controls
3. Subtle shadows over hard borders between sections (when depth is needed)
4. Interruptible — CSS transitions for hover/toggle; keyframes for one-shot only
5. Split + stagger enters (~100ms); soft exits (small translateY, not full height)
6. Icon swaps — opacity + scale 0.25→1 + blur 4px→0 (spring bounce 0 if Motion)
7. Font smoothing on root (antialiased)
8. tabular-nums for dynamic numbers
9. text-wrap: balance headings · pretty short body
10. Scale on press — exactly 0.96 (never below 0.95); disable when distracting
11. initial={false} on AnimatePresence for default-state UI (skip load flash)
12. Never transition: all — name properties
13. will-change sparingly — only transform/opacity/filter when first-frame stutter
14. Hit area — 44×44 touch/mobile; ≥40×40 dense desktop; no overlapping hit targets
15. Type ladder — ≤2 families; one h1/page; h1→body via tokens; body ~60–75ch when long-form (see judgment Typography ladder)
16. Mobile craft — thumb-reachable primary actions; full-width CTAs | active:scale-[0.96] transition-transform` |

## Checklist

- [ ] Nested radii are concentric
- [ ] Icons optically centered
- [ ] Depth via subtle transparent shadows where borders feel harsh
- [ ] Enter split/staggered; exits soft
- [ ] Dynamic numbers use `tabular-nums`
- [ ] Root font smoothing applied (or already present)
- [ ] Headings `text-balance`; short copy `text-pretty` where useful
- [ ] Press feedback `scale(0.96)` where appropriate
- [ ] No `transition: all` / Tailwind bare `transition`
- [ ] Hit areas meet 44/40 guidance without overlap
- [ ] Image outlines only where they help (pure black/white at 10% opacity)
- [ ] Typography ladder: one h1, sequential levels, token roles
- [ ] Mobile craft: full-width primary <768, safe-area, thumb-reachable CTAs

## Depth

Full examples: `references/ui-feel.md`.  
Related: `references/motion.md`, `references/anti-patterns.md`, `references/responsive.md`, `references/ux-foundations.md`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.