make-interfaces-feel-better

Original：🇺🇸 English

Translated

Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.

5installs

Sourceaffaan-m/everything-claude-code

Added on2026-05-13

NPX Install

npx skill4agent add affaan-m/everything-claude-code make-interfaces-feel-better

SKILL.md Content

View Translation Comparison →

Make Interfaces Feel Better

Use this skill for the small design-engineering details that compound into a more polished interface.

Source: salvaged from stale community PR #1659 by

linus707

.

When to Use

The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
You are building controls, cards, lists, dashboards, navigation, forms, or toolbars.
A component needs hover, active, focus, enter, exit, loading, or empty states.
A frontend review needs specific before/after recommendations.

Core Principles

Concentric Radius

For nearby nested rounded surfaces:

text

outer radius = inner radius + padding

If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.

Optical Alignment

Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.

Shadows And Borders

Use borders for separation and focus rings. Use layered shadows when a card, button, dropdown, or popover needs depth. Shadows should be transparent and subtle enough to work across backgrounds.

Text Wrapping

Use
```
text-wrap: balance
```
on headings and short titles.
Use
```
text-wrap: pretty
```
on short-to-medium body text, captions, descriptions, and list items.
Avoid both on long prose, code, and preformatted content.
Use
```
font-variant-numeric: tabular-nums
```
for counters, timers, prices, tables, and other updating numbers.

Font Smoothing

On macOS, apply antialiased font smoothing at the root layout when the project does not already do so:

css

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Image Outlines

Images often need a subtle inset outline so their edges do not blur into the surface.

css

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Use neutral black or white alpha outlines. Do not tint image outlines with the brand palette.

Motion

Use CSS transitions for interactive state changes because they can retarget when the user changes intent mid-motion. Reserve keyframes for staged one-shot entrances or loading sequences.

Good motion defaults:

Enter: combine opacity, small
```
translateY
```
, and optionally blur.
Exit: shorter and quieter than enter, usually 150ms.
Press:
```
scale(0.96)
```
for tactile buttons, with a way to disable it when the movement distracts.
Icon swaps: cross-fade with opacity, scale, and blur instead of instant visibility toggles.

Transition Scope

Never use

transition: all

. Specify the changed properties:

css

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Use

will-change

only for first-frame stutter on compositor-friendly properties such as

transform

,

opacity

, and

filter

. Never use

will-change: all

.

Hit Areas

Interactive controls should have at least a 40x40px hit area, ideally 44x44px where the layout allows it. Expand with a pseudo-element when the visible icon is smaller, but do not let expanded hit areas overlap.

Review Output

When reviewing a UI polish pass, report concrete changes in before/after rows:

Principle	Before	After
Concentric radius	Same radius on parent and child	Parent radius accounts for padding
Tabular numbers	Counter shifts as digits change	Counter uses `tabular-nums`
Transition scope	`transition: all`	Explicit transition properties

Include file paths and properties when they are not obvious from the snippets. Omit principles that you checked but did not change.

Checklist

Nested rounded elements are optically coherent.
Icons are visually centered.
Buttons, cards, and popovers use borders or shadows for the right reason.
Headings and short text avoid awkward wrapping.
Dynamic numbers use tabular numerals.
Images have neutral outlines where needed.
Enter and exit animations are split, subtle, and interruptible where appropriate.
Buttons have tactile active states without exaggerated motion.
```
transition: all
```
and
```
will-change: all
```
are absent.
Small controls still have usable hit areas.