make-interfaces-feel-better

Make Interfaces Feel Better

Use this skill after the core layout and behavior exist, or during review when a UI feels technically correct but visually rough. It focuses on small design-engineering details that compound into a more polished interface.

This is a polish pass, not a new visual identity. Read the project's DESIGN.md, tokens, shared components, and existing screens first. Apply the details through the project's current stack and naming conventions.

Detail Pass

Typography

• Use balanced wrapping for short headings and titles when the platform supports it.
• Use prettier wrapping for short-to-medium paragraphs, descriptions, captions, and list text.
• Leave long prose, code, and preformatted text on normal browser wrapping.
• Apply font smoothing once at the root when the stack supports it, rather than per element.
• Use tabular numerals for changing numbers: timers, counters, prices, dashboard metrics, scoreboards, and numeric table columns.

Surfaces

• For nested rounded surfaces, make the outer radius visually account for the padding between the outer and inner element.
• Use optical alignment when geometric centering looks wrong, especially text+icon buttons, play icons, arrows, carets, stars, and asymmetric SVGs.
• Use shadows or ring-like shadow layers for element depth when a solid border would look harsh on varied backgrounds.
• Keep real dividers, table boundaries, and accessibility-critical input outlines as borders when they are serving structure.
• Add subtle inset outlines to images/media when the surrounding system uses depth or framed surfaces; use neutral black or white opacity, not tinted brand colors.
• Interactive controls should expose a stable hit area: at least 44px where touch is possible, and never below 40px for compact pointer-only controls unless the surrounding component already expands the target.
• Do not let invisible hit areas overlap.

Motion

• Use transitions for interactive state changes so they can be interrupted and retargeted mid-action.
• Reserve keyframe or staged motion for one-shot entrance, loading, or storytelling sequences.
• Split entrance motion into semantic chunks, then stagger lightly so the page reads in order.
• Make exits shorter and quieter than entrances; use small fixed movement instead of large dramatic travel unless spatial context truly matters.
• Animate contextual icons with opacity, scale, and light blur rather than abruptly toggling visibility.
• Use a restrained press scale on tactile controls; avoid exaggerated shrink effects.
• Respect reduced-motion settings and keep critical state changes understandable with motion disabled.