make-interfaces-feel-better

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:

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:

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.

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);
  }
}