Ui feel

Skill sukirman1901/frontend-expert/skills/ui-feel

Polish micro-details that make UI feel better — concentric radius, optical alignment, tabular nums, text-wrap, interruptible transitions, scale-on-press, hit areas, no transition:all. Use when building/reviewing UI polish, "feels off", "rapihin detail", hover/press feedback, stagger enter/exit, or after anti-ai-slop on /ui and /polish. Adapted from make-interfaces-feel-better.From its SKILL.md

Install

npx -y skills add sukirman1901/frontend-expert --skill ui-feel

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

10 stars10 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.6 KB, as published. Nobody here has run it

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 <img>
Keep project fonts; only add smoothing / wrap / tabular-nums
Icons stay Reicon unless project already standardized another lib

Core principles (quick)

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

Typography hierarchy (MUST on polish)

Do	Don’t
One page title (`h1` / role)	Multiple competing `h1`s per page
Sequential heading levels	Skip h2 for “style” (h1 then h3)
Token type roles (title / body / muted / label)	Random rem sizes per section
Calm mobile heading scale	Giant marketing title crushing a settings form

Mobile craft (MUST when layout/touch)

Do	Don’t
Primary controls in thumb-friendly zone (lower/mid screen on phone)	Tiny top-right-only primary on long pages
Full-width primary buttons <768	Hug-width desktop CTAs on 320px
`env(safe-area-inset-*)` on sticky topbar / drawers / bottom bars	Content under notch / home indicator
Sticky bottom CTA for long mobile forms when submit is far	Force scroll past fold with no persistent action
Tap highlight off + press scale on icon/nav controls	Hover-only feedback

Cross-link: references/responsive.md (safe areas, Auto Layout Fill), references/ui-feel.md.

Workflow

Scan touched UI against the checklist below
Fix with tokens (--radius, spacing scale) — don’t invent one-off magic numbers when a token exists
Report changes as Before / After tables grouped by principle (omit empty groups)

Review output format

#### Concentric border radius
| Before | After |
| --- | --- |
| `rounded-xl` on card + inner (`p-2`) | Outer `rounded-2xl`, inner `rounded-lg` |

#### Scale on press
| Before | After |
| --- | --- |
| bare `<button>` | `active:scale-[0.96] transition-transform` |

Checklist

Depth

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